React.js vs Angular vs Vue

hello everyone welcome to this video over a year ago i created a kind of similar video where i compared angular react and view i shared my thoughts on them and a year is a pretty long time span in modern web development so it's definitely time for another round of this additionally i want to dive into some additional aspects and hopefully provide you even better help in deciding which framework or library you want to use for your next web project as with the last video i'd love to hear your thoughts so please definitely dive into the comment section and share your opinion no matter if you agree with my opinion here or not definitely looking forward to that and now let's have a look at my comparison so how do i want to compare these three frameworks and libraries i thought of three blocks first i want to have a look at the key characteristics of each because that is super important you got to know what you're working with and the key characteristics determine whether you like a library or framework or you don't i'll then also have a look at their popularity this might matter to you if you're looking for a job working with this library or framework or in general if you want to get a feeling for where the industry is moving and last but not least i'll have a look at performance because performance obviously matters and i want to dive into performance of these three alternatives and i want to see if there is a clear winner regarding performance so let's start with the key characteristics and for that let's have a look at react angular and view obviously and let's start with react now react is a library and that is super important to some people as i saw in the comments of my last video yes it's a library which you use to build components and it's extremely popular and used by many big or very large companies like netflix or facebook which basically developed and maintains react and as i said it's a library which you use to build components now library has one implication it means it focuses on one or very few things it's not a complete suit of tools and that will become important once we start comparing it to angular or view the component thing is the more important thing though components are basically reusable ui elements html by default has some components like input field a button but they're pretty basic don't have much styling and it definitely lacks more complex components like date pickers now with react you build such components and you do that with javascript everything is javascript in react world you build your entire application or these components with javascript and you then basically drop that into a page so that javascript can do its thing and render some html elements and some css styles maybe that make up your ui element in the end but you as a developer you work with javascript only and to be precise you work with something called jsx you don't have to and i actually have a video where i show you how you can work with react without using jsx but typically you do and jsx is basically html in javascript it's a special syntax that looks a bit like html but it's not entirely html which leads to some things like for example that you can't use class for assigning a css class it's class name instead but in general it's okay i'm personally not the biggest fan of this everything is in javascript approach but it has its advantages there are people who really love this approach and overall it's just how react works now besides the everything is javascript thing the other important characteristic is the fact that it's a library and it focuses on that component creation this implies that for more complex applications more complex single page applications for example you need to add routing and that is not included in react instead there is a pretty popular library react router and it's the same for state management by the way there we got redux and these are actively maintained but they're not from the react core team and you have to get into them they well simply are additional things you have to learn and that is something you might or might not like it's the general theme of react react is really just about creating components and nothing else now another important thing to know about react is that it's developed and maintained by facebook and that of course is a very large company which actively uses react in many or pretty much all its applications and therefore obviously react is actively maintained gets updates regularly gets new features or enhancements regularly and that of course is pretty good though it has one possible downside of course you might need to update your app from time to time though the updates the react team publishers always are pretty easy to incorporate and they're rarely very very rarely are breaking changes and if there are you got plenty of times to adjust so this really is a good thing now last but not least here it's primarily used for web apps but the cool thing about react is you can also build mobile apps with it with the help of react native or starting with version 4 all the with the ionic framework so you can take your react knowledge add some new knowledge which you'll have to learn and start building mobile apps and that's pretty cool without knowing android or swift so that's react react is not the only thing we got of course we also got angular now what are the key characteristics of angular angulardan angular is extremely popular too and is also used by many large companies for example by google who developed it but of course all by other companies angular unlike react is not just about creating components though it has components too and also follows a component driven approach but angular is a complete framework or even platform you could say a rich set of tools that help you with developing modern web applications so unlike react it's not just about creating components which you drop into your pages but instead it's really also about adding routing having a state management solution built in having form validation built building so all these tools you need for very large applications ship as part of angular developed by the angular team so you don't need to rely on third-party vendors there additionally it uses native web apis you could say it uses html templates for the components no jsx really html it uses css which is easy to add also so it uses these native features you could say though it does use typescript as a language instead of native javascript typescript isn't too hard to learn to be honest but it is something you have to be aware of you're not using native javascript when writing angular apps typescript it is instead and typescript is just a super set to javascript it compiles to javascript this is done for you but you have to get used to it you have some additional features which is pretty cool but which you have to learn there for in the end it's not too far away from javascript though so i think it's pretty okay to learn that but something to be aware of now as i said the cool thing about angular is that it includes routing state management and all these things which helps you scale your app or build really big apps because all the core features you need then are included want to turn your application in a progressive web app well there is an official package for that and this really is the theme of angular you get packages for all the core features you might want to add to your app and this of course gives you as a developer a lot of power to add such features easily now as i already mentioned it's developed and maintained by google which is pretty good it's a big company probably not going anywhere especially since it uses angular internally and therefore we got a strong background for angular 2. you can primarily use it for building web applications but just like react you can also build native mobile apps with angular here with the help of ionic always was focusing on angular ionic was always focusing on it and you also got native script which is following a similar approach as react native is but well it's just another alternative and it embraces angular so that is also an option you got here now what about ujs vue.js is a bit like as if react and angular had sex and this is a comparison i already did in my last video on the topic but it really still fits vue has nice features from both react and angular and in my personal opinion it merges them pretty well yielding almost the best of both worlds you could say so what are the key characteristics of you then vue is also extremely popular amongst developers but unfortunately not used by many large companies though it's slowly picking up and it's a getting adopted by more and more companies and smaller companies are already using it we're for example using it on our web page so it is popular it just doesn't have the big company behind it as react or angular habit it's a complete framework just like angular though a bit reduced less features than angular has it it has more than react it's not just a library for building components though just as in the other two alternatives you work with components here too they're all about building these ui elements but in view you also got routing and state management provided by the core view team and that of course makes moving towards larger applications maybe a bit easier since you can't rely on these packages always being available since they nicely integrate with vue you can rely on view getting updated and these third-party packages immediately being updated too so that's pretty cool to have it has less packages than angular does for example it has no official forum validation library there are community packages of course but these bring the general disadvantages such packages always have you have to rely on the people creating and maintaining them well to continue maintaining them it uses native web apis it uses html it uses css it is pretty similar to angular regarding that especially from a syntax perspective when we talk about its template maybe to angular 1 or partly to angular 1 at least with angular in the slides before i of course meant angular 2 plus by the way so it's similar to angular regarding that but it has some ideas from react and it really merges that in a nice way i personally like its syntax a lot and i think most developers do at least that is the opinion the resonant i heard most often now as i said routing and state management are coming from the core team they are provided by them other features are provided by the community only putting only in quotation marks here because that's not necessarily a bad thing it's good that we have an active ecosystem it just means you have to rely on them now one of the biggest disadvantages i'd say or perceived disadvantages to be precise is that it's not backed by a big company but by a single developer would be wrong but mainly by avenue who is a former google employee but in the meantime especially also since my last video a pretty big core team has been established so it's not just one guy working on vue anymore instead it is a core team but of course avenue still is the leading person in the team probably the person driving the development of you and that is just something you have to be aware of there is no major company backing this though this can also be an advantage of course because it could mean greater independence and there are big projects like laravel which heavily backed you indeed and we got this strong community pushing view and basically backing view you could say it's for example also entirely funded or mainly funded by um donations from the um or contributions i should say by the community you can support it you can pay money to support the development of view which is a great thing last but not least it is also primarily used for web apps but just as with the other two alternatives you can use it to build native mobile apps it's worth mentioning ionic here ionic 4 to be precise which will be usable with any framework or library or native script view which is a native script implementation building up on view which allows you to use vue to build mobile apps so these were the key characteristics one other important thing is how easy is it to get started that obviously is super important if you are relatively new to web development in general or to well one of these frameworks which you want to learn so react is easy to get started say jsx is optional though jsx can be a bit strange to get into but the good thing is that you can start working with react without a complex build workflow you can't just add an import to a page and start adding code and again i got a video where i show exactly this so definitely check that out besides my other react resources like my complete guide if you really want to double down on it and dive deeply into it we also can't drop it into existing pages or views so if you have an existing multi-page application you can drop react into it and start working with it on some of these pages which is really great now potential disadvantages depending on how you feel about that is jsx it's not my personal favorite i still feel like that other people love it and i can understand that too but you have to get used to that everything is javascript approach and it's just something to be aware of everything is javascript you don't write native html code and that is something you have to get accommodated to now we also have to understand that for single page applications you will have to add routing state management form validation all of that by picking third party community managed modules there is no official guide on how to proceed regarding that or there is no official solution for that although there are of course best practices and so on but it is something you have to dive into on your own angular is easy to get started regarding the fact that we use html and css so the technologies we already know we also have all the core features baked into the platform so if you're getting started and you want to build a huge single page application you got all these key features added to angular added to added to its official documentation so it's not too hard to get started with that there also is the angular cli helping you get started with angular projects it sets up a ready to get started project for you automatically but a downside is that we have to learn typescript you can learn it on the job to be honest for example in my angular course you'll learn it whilst you learn angular this is possible but still you have to learn it and some of the angular features like dependency injection are pretty cool but also a bit more complex so you you have to invest a bit more to learn these i'd say so it might have a steeper learning curve when we think about topics or features like this last but not least i mentioned it you have the cli to get started by the way you also have one for react but unlike for react you really need it for angular in react you can dump it into a page and get started for angular you need a complex project setup and build workflow for example to compile that typescript code or for example to optimize all your code you really need that here and that of course can be seen as a disadvantage because there is no drop in getting started mode now for vue we also use html and css which is great technologies we know and love we can drop it into existing pages and views and that of course makes getting started super easy we don't need to set up a complex project setup or workflow though if you do need it it has a cli too command line interface that is it's also using a very intuitive syntax in my opinion and it has a great documentation all these solutions have good documentation vue has an exceptionally good one i'd say and it also has some core features like routing and so on provided by the core team which makes learning these a bit easier than for example with react now downside is just as with react some key features like form validation are not included so if you need these you have to add them manually and you have to learn them therefore they're not necessarily following the same philosophy as the core view packages so these are the key characteristics in my opinion on them and things you have to consider you have to learn i always suggest that you dive into all of them at least briefly so that you get an idea of how they work i also got a comparison course you can take or simply take the many resources i got on my page on this channel or of course my complete guides i have on each of these frameworks but before we wrap this video up let's have a look at popularity how popular are these solutions well here's react react is um pretty popular if we measure the monthly npm downloads or is it we don't know let's compare it so here's angular and we can see react is quite a bit more popular than angle at least if we just look at these downloads now that is not the only measure to be honest but it gives us some indication that react seems to be getting used a bit more we also have to keep in mind that react is a bit more mature and older than angular because i'm talking about angular 2 plus this is excluding angular 1 if we would add it angular would be much closer to react but angular 2 plus getting downloaded a bit less view even less now view also is is rising so it's not like it's on a declining path but you missing the big backing of the other two alternatives still is highly liked in developer circles if you look at github stars vue is super popular but regarding usage and npm downloads it's uh the weakest framework though all three are on a good level and definitely worth learning don't get me wrong now performance let's have a look at a nice page that can help you with that now this is a github repository where you can download a benchmark which you can run on your machine too link can be found in the video description and it basically allows you to compare multiple frameworks and you can also do that without running it on your machine directly on the github repository there is so if you click that image you find there you can basically filter this comparison now here i compared angular 6 view 2.5 and react 16.1 these are not the latest versions as of now but they are the latest major versions so if we had big performance changes they are definitely included here now it can be deceiving to just look at this we can see something yellow or reddish and we immediately say okay that has a bad performance now benchmarks are always tricky to go to look at they not necessarily measure what your application needs they're of course highly theoretical and whilst they give us some idea about performance it's always performance for these given tests and therefore we're not necessarily talking about a slow framework if it is slower than its alternatives in one of these tests additionally we have to keep in mind that all these results here you see the milliseconds latencies are pretty fast there is no super long taking test lag which takes half a second or a second so i can already say all three alternatives offer pretty good performance and it might differ on your machine and your exact requirements in your web app which of these really is slower or better in the end they're all pretty darn fast and there are production applications running with all three of these and they're all running fast i'd say one thing to note though are these startup metrics because there is something interesting angular is worse than the other two and that is something which is related to the fact that angular still ships with a pretty big code base so if you deploy your angular app it's pretty big definitely bigger than a react or view app now this will drastically become better in future versions where angular will internally use a different renderer leading to a smaller code base so with angular 7 and higher we should see improvements there and we're not talking about seconds here either but it is something to keep in mind that right now the code base you get with angular is a bit better now for some applications like internal enterprise applications these milliseconds here might not matter for some applications it might and then right now before the improvements i just mentioned react and view might be better but with that i can only encourage you to have a look at this on your own and in general there is no clear winner this is really something i have to tell you all free frameworks and libraries are great you can build the same type of apps with all of them there is no clear winner there is no better or worse one they follow different philosophies and approaches and as i mentioned i can only encourage you to at least briefly dive into each of them at least watch one of my free series to get an idea of how the code looks and then dive into one deeper or two if you have the time and want to learn one or two of them in a in a more focused way i got courses on all three of them and i'd be more than happy to welcome you in them and i can only encourage you to dive into these frameworks and libraries because they allow you to create great applications and they're all free really awesome in the end they get their differences and it's up to you to pick your personal favorite

Channel: Academind

Views: 323,930

Rating: 4.9089041 out of 5

Keywords: react, react.js, reactjs, angular, angular 2, angular 4, angular 5, angular 6, vue, vue.js, vuejs, angularjs, angular.js, react vs angular, angular vs react, angular vs react vs vue, react vs angular vs vue, comparison

Id: SWZ_4YBFBhs

Length: 23min 23sec (1403 seconds)

Published: Tue Jul 31 2018