 So, good morning guys. I'm so sorry we had a small technical issue with my laptop not working, but everything is fixed now, thanks to our great moderator. And now I hope I can help you out with creating the ultimate front-end UI. So, just to know the crowd, can I know how many people work on the front-end? Anybody who uses JavaScript here? Please raise your hands. Oh, that's a great crowd. Thank you. So, I will assume that you know the basics of front-end and I will move on from that. The main focus of the topic, I'm actually a full stack developer, but I'm focusing on front-end at the moment in my company. So, we run an enterprise solution for drilling and stuff, which handles a lot of real-time data. And we have an enterprise solution already and we are building a new one, which is a single-page application. So, we had done a lot of research to see which react or which JavaScript framework that we can use for it. So, I can hope that I'll share some of that with you and you guys can benefit out of that. So, I'll start off. What makes the front-end? Front-end is anything that you see when you open up a browser. So, when you open up your browser, if you see Google and just a search tab, that is again the front-end. That's the front-end to the Google search engine. There are some really iconic front-ends that we've seen and one of my personal favorite is Google. Because those guys, the Google doodles are pretty brilliant. Because every single time something important happens, they change it up and they prove the user connection to the product with it. So, front-end, if we think about it, it is most of the time we just think HTML5, CSS and JavaScript, but it is so much more if you let it to be. Because in the earlier days, when you started off, we had to hardcore every single thing. So, there are all these old websites, if you can see from the 90s or from the 2000s, they are all a bit dull, I would say, compared to the stuff that we have now. Because we had to hand code every single thing by hand. But now, we have this brilliant invention called frameworks. So, I use Twitter Bootstrap a lot. It has to be one of my favorite front-end frameworks. That made things so much more easier. So, earlier I had to learn all these HTML tags, all these JavaScript functions, everything. But now, if I have HTML and bootstrap, and if I know the basics of HTML and CSS, I can create my own website so easily. So, that is there. And then, about after 2010, I believe, there has been an explosion of JavaScript framework. So, if you look, you have Node.js, you have Angular.js, you have so many stacks, you have the mean stack, you deal with so many JavaScript fatigue, if you would. So, there is N where there is Angular, there is X plus. And we don't know which one we can use for the other. And there are so many overlapping functionalities because they are all JavaScript. And there is a very famous comic, I don't know, that in by 2020, people are assuming the JavaScript is going to run your operating system as well. Because that's how JavaScript is growing. So, there are a lot of things. If you're just starting out with JavaScript, that might be a little intimidating because JavaScript has not been around as some of the older technologies. But there are so many people working on so many different parts of it that it looks like a really disorganized chaotic community. But once you start on one side, you realize how powerful JavaScript is. And that is the reason why it's so popular. Please do tell me if I'm going a bit fast. I'm used to speaking fast, but if you do not understand my accent, I can totally repeat or go slower. So, from my personal experience and from the places I've worked in, I've totally realized that frameworks are distinct that can generate things. For example, like Bootstrap or React.js, that is much more easier to work with. Initially, there is a learning curve. So, you have to learn how to work with Angular or how to work with React. But once you learn what that framework entails, then it is much more easier to work through and create a better website. So, if you have the chance, always go for frameworks. So, always go for frameworks. And I think little by little, hard coding by itself is going obsolete. It's okay. So, let's come to the main part of the topic. I think this is the big showdown that I was advertised. So, when we started working on our company project, we spent a lot of time debating Angular versus React personally. I'm a bit of a React fan, but we have to look at the positives and the negatives of all technology before we decide. So, let's go into it. Angular 2. AngularJS 2 was the technology that we considered. So, AngularJS 1, it released a bit of a time ago. So, when Angular 1 released, it was a game changer. It brought so many things that people had not seen before, and people accepted Angular 1 so fast. And there's a thriving community support for Angular 1. AngularJS 2, on the other hand, has just released in number of 2016. So, it's very new. It's very fresh in the block. But I believe that a lot of people who have worked in Angular 1, they have a sense of community for it, because it's like a smaller brother. You know, I've worked with Angular 1. How hard can Angular 2 be? It should be something similar. So, it's better established. And of course, there's Google. So, you know, support will not be a problem. You can use it for an enterprise solution and TypeScript. There are people who are very strong emotions against TypeScript. There are people who feel like TypeScript is so restrictive. You have to use exactly how TypeScript wants it to. Otherwise, it's difficult. So, that is there. TypeScript is restrictive to an extent. But, consider an example. You're working on a large solution. About 100 odd people will be working on a large-scale website. To give you a visualization, I work in a company that deals with oil drilling and oil. So, we have engineers who are mechanical or people who work on field with the chemicals, with the oils. And they know nothing about them or anything. They just have to use the software. So, when we create a software for them, we need something. And they will have support engineers on duty in different parts of the world. When we create a software which is used by support engineers in America, in Germany, in the Middle East, in India, so many different places and so many different people handling that kind of something. So, you would need something that is strongly typed, that has strict rules which everybody has to follow. Because if 100 people are given the same task, chances are they'll do it in 100 different ways. And if you're building an enterprise solution, you don't want that. You want a single way in which one task can be done. And that is very easily achievable with TypeScript, I believe. So, that is why if you're building a large-scale solution which is used by a lot of people, TypeScript does have an advantage there because it's very structured and, again, two-way binding. So, as just a TypeScript, there are a few positives and negatives for two-way binding. Two-way binding makes things very fast. So, two-way binding was revolutionary when it was introduced because it gave really fast DOM updates when you use two-way binding. And I'll come into a react later about how it uses one-way binding. So, two-way binding, essentially what happens is that when you update something, Angular has an algorithm running which updates the DOM almost instantly. So, there is no delay in between when you use it and when it updates because it uses the cache in your client's side. So, two-way binding is pretty good. I used it once and I really liked it. And then when you use react, things change up a little bit. So, let's go to react. And, of course, the disadvantage is when you use AngularJS, it comes abruptly. So, I feel AngularJS, it comes in a 30-end on download, fresh download, which it's a bit bulky for a JavaScript framework. So, a lot of functionalities come out of the box for Angular. So, if you want to build a full-scale web application, you can just use Angular. It's more than just libraries, an entire framework that you can use to build your own, I would say, web application solution for a problem that you're facing. But, with that comes... it is a bit clunky because it offers more things that you can otherwise just ignore. And also, I feel that Angular is a lot more harder to debug because Angular comes in a way where if you change something and it will break only in runtime, not in compile time. So, if you have ever used Angular, I feel you would understand that Angular, during compile time, it might not even say anything but you're in runtime, it just breaks and you don't know which line to shake or something like that and that I feel is a problem with AngularJS. So, you really need to be secure or you really need to know how to use Angular because it breaks and that's a bit of a problem. So, let's go on to React. React is a lot more flexible. So, remember when I talked about AngularJS earlier, I said that when you use TypeScript, if there are 100 people who are doing a task, they cannot do it only one way because that's how TypeScript is created. But in React, I feel that there is a bit more flexibility, a bit more leeway. So, React basically creates components. You can just inject that and every single component, it's a really divisive component structure. So, it's flexible. So, if 100 people can do something, they can do it in 50 or 80 different ways. Maybe not 100, but there are multiple ways to do something and that can be nice in a creative framework. So, if you have a creating and challenging problem that you need to deal with, then React is a very good framework that you can look at. So, I would never say that React is not your rule because React is supported by Facebook. So, Instagram, Facebook, those are pretty high density data networks that you are talking about and React can handle that. React has much better performance in some cases than Angular because of how flexible it is and that is something that you can always aspire to if you need it. So, if you have a smaller development team who are comfortable with React, I would always suggest going with React because as you're starting out and especially if you're a beginner, if you're a beginner starting out with web application development, React, I feel, is so much more easier and JSX, okay, TypeScript is largely different from JavaScript or I would say it's a super set of JavaScript. So, a lot of things that you do in JavaScript is available in TypeScript but TypeScript has some extra stuff. JSX, on the other hand, we are always taught to never put JavaScript directly in between our HTML. So, even when we use PHP, we have those PHP tags that we use. So, when we use JSX, it is almost like using a part of JavaScript into the HTML and that is pretty nice. If you know basic JavaScript, you can start working with JSX and that's a very nice experience for somebody who's starting out with a web application. So, okay. So, now I had talked about Angular for some time and I had talked for React for some time. So, in my viewpoint, I believe, we can talk, we can use Angular if both are really scalable for a large deployment scenario but Angular is more of when you have a strict rule to follow something that you really want to follow a single way to implement a single thing but React is more flexible and you can do, there are multiple styles in which you can do it and if you are comfortable with using JSX, then React is much more easier and friendly to programmers. So, other keys in the park, yes. So, React and Angular are not the only two frameworks that you have to choose. One of the up-and-coming, I would say, frameworks is Vue.js. Vue is, I believe, simpler than React and Angular and it's pretty nice to use. It's really good with graphics of Vue and even though I've not personally used it, that's why I'm putting it as others. Rather, too, I have tried out demos and stuff and I have worked on it but Vue is, again, it's for beginners and then I've heard a lot of great things about Meteor.js. Meteor.js is a combination of Angular and React to an extent, so it has a lot of good stuff from Angular and React. So, if you want to check out, then Vue and Meteor are some pretty good stuff that you can always check out. So, which ones can we choose? So, if you are building your own front-end, which JavaScript framework or library should you consider? So, I hope you know that Angular is an entire framework while React is just a library. So, if you are creating an entire application, then you should always go for Angular because it provides so much functionality out of the box and it gives you very less decision fatigue. So, if everything that you want to build, Angular helps you build it, Angular gives you pointers and you can involve external plugins, that is all easy in Angular. So, to build an entire setup, definitely go the Angular way. But, if you already have an existing system, you want to upgrade the Vue. If you want to make things easier, that's where React comes in. Because React is smaller, it's more flexible, it is focused directly on the Vue in the MVC. So, if you want to focus on the Vue, you make the Vue better really. You can't really compare these two because Angular runs on an MVC framework and React runs on Redux, I think. So, Redux, it uses one-way binding. It's a different style of procedure, but I have implemented React in an already existing system. Just one part of the functionality you can use React for and React plays very well if you have an existing system and if you want to just have one single part that you want to improve the Vue on. So, for testing or for trying out a new step, React is pretty good. And React is really gaining popularity. A lot of people who have used Angular 1 in the past are moving to React because they like how React is structured. Initially, there is a small gap. You have to get used to the framework and the method of coding when you come from the MVC style. But once you actually do it, then the payoff is really great because it's much simpler. So, so far, I was engaging in you about JavaScript frameworks, et cetera, et cetera. But my initial plan for this talk was how to create the ultimate UI. Technology is always important because technology is the backbone, the way in which our websites are made. But technology is not the only component for our websites. So, this, even if you don't take away anything else from my talk, I would like you to look at this slide and pay attention here because this is something I really want to share. So, of course, you can use Angular, you can use React, you can use Meteor, you can use Hell, you can hardcore your site. But the value of your site for somebody who's using it comes from what is there in your site, how the site plays with the user who's using it because both of the use in UI and UX is for the user. The key person here that you should be considering is the user. If you, the most technologically brilliant site, if the user does not know how to use it, it's a waste because we need to create it for the user's palette content. Whichever website you do, please focus on what the user wants and focus on how you can play to the user's taste. So that can be localized content, that can be content on a specific thing. So if you're creating a blog about technology, use technology key phrases. Use things that you know the crowd will like. So always play for the crowd and effort. Effort is if you are running a blog and you want people to subscribe to your blog, you should always have the subscribe button or you should always have a dialogue box saying please subscribe. So it goes the extra mile to the user showing that you care about the user and you want them to know more about it. So unless you make an effort, the user will never put in an effort to know your product or service or your website because you are just one of the millions of websites that the user can access why would they care? So you should put in the extra effort. Put in the effort to give something free to the user or engage the user and that effort if it will always be appreciated and noted by your user. So more than the technology you use, be considerate about how you use technology, now you can engage. And so simplicity, simplicity, oh sorry last point is simplicity. Simplicity is instead of crowding a lot or too much you should know what the user is thinking or focusing when they come to your website and play for that. So I think that adds to the other two points I have and that's basically it. I know I talked a lot more on the technology side but I'll take questions on both of them. Thank you. That's me. Any questions? This controversy about React versus Angular I haven't used React myself but what I've heard from the people, what I've read from the people that created React is that React is actually only the view. So that in principle you could combine React and Angular. So React is a library where Angular is a framework to structure your front-end app. Exactly. Why so much? Why can't you just use both in this question? Have you had experience with that? Yeah, we did consider that. So I was talking about how we were looking at both to build our application. So we did look at the possibility of using both React and Angular but there are a lot of overheads that come because Angular has a lot of in the box functionality. So Angular can handle view, model, controller, everything Angular can handle and then you're bringing in React. We're using React for view that is because most of the time React is used for the performance because when the demos have done React has given almost 2-3 times better performance pure performance when compared to Angular solely because of how flexible it is because it's so small that it can handle data faster. It can do things faster than Angular can because Angular is weighed down by all the functionalities it gives but if you use Angular and then you bring in React to give all this extra performance it's very difficult to configure for one because Angular does not like React Angular does not want you to use React Angular wants you to do this Angular So if you try to bring in React inside Angular Angular will throw all sorts of errors and after all that if you manage to configure it the performance that you actually wanted initially that you're using React for was not really that it was comparable pretty much to using Angular and the advantages were not as good as compared to the setup and all that hassle so I think that is one of the reasons why maybe in the future React will release a better version which is lighter faster and plays well with Angular but as of now I don't think a lot of people use that combination because of that but I have heard that somebody has used it I have seen it in forums but it's like a popular icon you have not seen it it remains to see if it actually exists it should be possible theoretically it should be because React even though it's just the view it plays well with a lot of other components so a lot of things the business logic is already decided you actually know what you want to do with your website the only questionable or the only unknown is how you're going to build a website or how it looks like because in the back end you know exactly what product or what service that you're going to give and how you're going to build it you just don't know how the website is going to look like because the back end is already decided and that is where React comes in because it can help build a faster front end and that gives React focuses only on the front end so you can build whatever you want in the back end PHP, Java, Python or Node.js whatever you want to use, you can use and React just handles the front end so that is how React works any other questions? you said you're working for an oil company which is not the type of company where what I expected from the development to come from so I think I've put performance my speaker ties in the lag I think I've put performance technologies as my company so performance was acquired by a company called Baker Use Baker Use is I think the third largest in the world for drilling services so what Baker does is that we handle the engineering part of oil drilling so if you want to drill a well Baker provides the drilling wits it handles all that but all the data and oil belongs to the company which we are contracting from so if you're contracting from the ABDAB International Oil Compression they own the drilling data and they own the oil but we do the drilling for them so where I come in is that we have a technical branch which handles the data analysis so when you drill a lot of data is generated we need to plot that, we need to analyze that we need to see how we can make the business better by analyzing the data all these data to the clients we need to plot them there's so much thing we can do with that data and that is where we come in because we create websites that can handle all their data do you use all of these different frameworks or you have like sell them one of them? we have I think centered on AmpliJS2 because I believe I think that's the example I used because we have parts we have centers all over the world so if you need to do support all over the world flexible it can become too flexible so we need one strict standard for it I think that's the reason I am down now to the end but maybe in the future we will react who knows it's still under construction and when we actually do I am under contract to not tell you what we actually use so that's it thank you