Also have a look at the video at the top of the page!
Here's a very brief summary.
Vue.js is the trending newcomer. It's not backed by a big company but developed by a small team led by an ex-Googler. The framework combines concepts from both Angular and React.js - many developers agree that it kind of picks the best parts of both frameworks.
The first dimension is the "Ease of Learning" a framework. Of course you could argue that the quality of a framework is defined about how you build apps with it, how well these apps perform and how they scale. But if a framework is extremely hard to learn, there are not only going to be less developers using it (bad for the framework ecosystem) but also less developers mastering it.
Obviously, the learning curve does not only depend on the framework but also on the person. But there are some things which might make the learning process harder or easier for all (or at least most) people.
This dimension might not matter to you! But if you plan on creating a very big Single-Page-Application (SPA) it's of course important to understand how well the framework performs, how fast it loads and if performance remains great in very big apps.
Why am I not talking about big fullstack apps here (= NOT Single-Page-Applications)? Because there, the individual "app" run by the framework doesn't grow that big. It's only one page of many pages in the end, right? Of course we're back to this argument if a significant part of your otherwise fullstack app is a Single-Page-App (e.g. the user account backend).
Can you use a framework on the individual pages of a fullstack (or multi-page) app? That's what "Downscaling" means. Can you just drop in an import and start using the framework? Is the framework then an overkill or can you really enhance your page with it?
Just as the "Upscaling/ SPA" dimension, this one might of course not be important to you if you're not building these kind of apps.
Obviously, you want your applications to perform well. That includes having a fast initial loading time (small bundle size!) as well as great runtime performance (how fast does it update the page once it runs?). A framework which is super-fast at runtime but has a very big bundle size might not be the best choice for all kind of apps since it will load for ages when accessed via bad internet connections. Sometimes, this doesn't matter though. Then, using such a framework might be perfectly fine!
You could also describe this dimension as "the way from development to production". It might sound trivial, but actually it can be really hard to correctly deploy your finished app. If you miss possible optimization opportunities, this is going to impact your runtime performance without the framework being directly responsible for that.
On the other hand, it's of course also kind of the framework's fault if it's overly complicated to get things right and to deploy an optimized app. That's why we'll have a look at this dimension, too.
That's the last dimension I want to consider. How popular is a framework? This has influence on the ecosystem of that framework and therefore on the quantity and quality of third-party packages you may use together with it. It also affects the amount of support you'll get on stackoverflow and other pages and how many learning resources you may find.
Job perspectives of course are also related to the popularity of a framework. But even a popular framework (amongst developers) could have bad job perspectives because the industry is not adopting it. If you're only learning the framework for yourself or you already have a job, this aspect might of course not matter to you.
I came up with a possible learning curve comparison which reflects my opinion. Of course, these curves might not be correct for you. Maybe you found one aspect very easy to learn which I state to be harder. Maybe you struggled with something I found easier.
Angular arguably has the steepest learning curve since it requires you to learn a new language (TypeScript), really leaves everything you might've used before in JS development (components, modules), brings features like dependency injection and requires quite a bit of work to optimize your app and take advantage of features like lazy loading or ahead-of-time compilation.
It gets a little bit more complicated once you start building more complex apps. Then, you'll have to learn about workflows using .vue files, basically files which make the creation of components easier in the end. You'll also have to understand how to create components, connect them to each other and, of course, how to manage application state. With Vuex, it offers an official library which makes that much easier though.
Overall, Vue.js has the easiest ("best") learning curve in my opinion. That doesn't make Angular or React.js bad frameworks, in fact I love Angular! But for getting started, Vue.js certainly is the easiest.
All three frameworks allow you to create powerful Single-Page-Applications, that's the first important takeaway since this kind of web app is very popular and rapidly growing in usage. But are all frameworks equally suited for this kind of app?
Angular focuses entirely on Single-Page-Applications, this is what it was built for. It gives you a lot of tools to build (extremely) large Single-Page-Applications and it's clearly the focus of this framework. Google is using it internally to rebuild apps like Adwords and Adsense to use Angular.
The modularity, TypeScript, the concept of services, out-of-the-box routing and forms support as well as detailed optimizations options allow you to build well-performing, big Single-Page-Applications. Therefore, Angular can probably be called the winner in this category. It doesn't mean that React.js and Vue.js are not suited for this kind of application though!
React.js doesn't have a Single-Page-Application focus as Angular does. But it certainly is capable of hosting big Single-Page-Apps. Facebook uses React.js on its SPA parts of the webpage (e.g. the advertisement console) and there are many other web apps using it out there. You will need third-party packages though, React.js doesn't come with a router or forms package built into it like Angular does.
Vue.js is pretty similar to React.js. You can absolutely create big SPAs with it but it's not focused on this type of application. Just like React, Vue requires you to install extra routing or form validation packages, though at least the routing package (just like Vuex for state management) is provided by the official Vue.js team.
Angular probably makes the creation of very big SPAs easiest but React.js and Vue.js are perfectly valid choices, too. Especially for bigger apps, you might encounter some challenges when using React.js or Vue.js which you might not hit when using Angular. Examples would be the organization of your project files or the availability and maintenance of important packages for routing or forms support.
We had a look at how well the frameworks are suited for the creation of Single-Page-Applications. How do they compare when it comes to Multi-Page-Applications (MPAs; fullstack apps)?
Overall, React.js and Vue.js are both great for enhancing existing views in your fullstack (MPA) application. Vue.js is even a bit better than React in my opinion since it doesn't force you to use components at all. React.js pretty much does do that.
Of course your web app should load fast (small bundle size, quick startup time) and perform well once it runs (e.g. updating of the DOM). Depending on the type of users you're going to serve, the startup time might be less important. For example, you might know that only people with good internet connections are accessing your app. In most cases though, you'll probably want both parts (startup time + runtime performance) to be good.
One important note about this benchmark: It only tests what it tests. This is no super-big application. It's also not a super-small one. Some frameworks may outperform others for very big apps even though they lose to them in smaller apps.
Although being slower (at startup) than the other two, Angular is a fast framework but it also has a rather big bundle size. This size can be improved a lot but it's not that easy to get there. This bears the danger of having a non-optimized and therefore too big bundle being shipped to your deployment server. The runtime performance is great. Important: Angular's performance will be better (compared to React.js or Vue.js) for much bigger and more demanding apps! It's simply not built for smaller ones and even on mediocre ones (size-wise) it might lose to React or Vue. We're not talking about seconds of differences though.
React, Angular and Vue overall are pretty similar when it comes to runtime performance.
These results have to be interpreted with care though. In general, all three frameworks/ libraries are pretty darn fast and even if one framework is faster in test A, this does not mean, that it's generally better or faster.
All three frameworks have pretty good performance after all! You shouldn't pick your framework by performance only. You might exclude one if it performs badly but that isn't the case here. You should also keep in mind that the size and type of applications impacts the performance, therefore the linked benchmark is only one (and not the only one!) way of testing performance.
Why does the "Ease of Deployment" matter? Because you of course want to deploy your app in the end and if you can make a lot of mistakes while doing so, or if it's overly complicated to optimize your app, you might ship bad and possibly unoptimized code to your server. No one likes that!
Angular makes the move from development to deployment the hardest. Well, kind of. If you're using the Angular CLI, it's going to be easier and a lot of the work is done for you. Actually, when using the CLI, the road from development to deployment becomes very easy. But still, writing a "good" Angular application, taking advantage of lazy loading and the module system and correctly using Ahead-of-Time compilation (AoT) can be challenging.
React.js offers an easier way of moving from development to deployment, though you still need a workflow which optimizes your app. At least if you're building a bigger app or a single page application.
Vue.js also makes the deployment of your app easy. You either just dropped an import into your app, in which case you can't optimize a lot anyways. Or you have a more complex local setup (potentially created with the Vue CLI) which again will handle most of the code optimizations for you. You may use lazy loading of components and, since Vue.js does use templates, you can pre-compile these templates. That offline-compilation step is much easier than it is with Angular though (although, when using the Angular CLI, it's super-easy, too).
Overall, Vue.js and React.js are probably the easier two frameworks of these three when it comes to the road from development to deployment. Angular gives you a lot of tweaking possibilities. This can also be an advantage but it also poses the threat of shipping suboptimal code.
Even if you personally love a framework, the popularity amongst other developers as well as the job market for that framework might matter to you. The popularity influences the number and quality of third-party packages built for a framework (e.g. for form validation). And the job market obviously is a very important point if you're looking for a job.
I'll use Github stars + contributors to measure the popularity amongst developers and posted jobs on indeed.com to compare job perspectives. Of course there are way more places to find a job but it's about the relative comparison not the absolute numbers! All data mentioned below was fetched & analyzed on July 23rd 2018!
|Framework||Github Stars||Contributors||Posted Jobs|
Angular is still popular. Angular 1 (now AngularJS) reaches 58.8k Github stars and 1,593 contributors, indicating a very active community. Compared to my last measurement (done in May 2017), these numbers didn't grow much though (only + 3k stars, contributors even decreased). If we have a look at the job market, we'll see that as of July 23rd 2018, 11.3k jobs with "angularjs", "angular.js" or "angular 1" were listed on indeed.com. This number is also down from 12.8k.
That was Angular 1. What about Angular 2+? The official Github repo shows us 38.7k stars and 679 contributors. Not too bad but certainly a bit worse than Angular 1. But of course Angular 1 is way older and therefore gets used by a lot of companies already - especially as it was one of the first frameworks of its kind. If we have a look at the job market (keywords "angular 2", "angular 3", "angular 4", "angular 5", "angular 6") we can find 9.3k open job listings, certainly a decent number if we consider the age of Angular 2+. Additionally, all these numbers increased by a lot since the last measurement (in May 2017). Jobs were only 940 back then (so we got ten times as many job postings now).
React.js has the astonishing amount of 107k Github stars and 1,201 contributors. That again is a very active community, something which is reflected in the quantity and quality of available third-party packages. These numbers also grew a lot - we had 67k stars in May 2017. If we turn our heads towards the job market ("react.js", "react", "reactjs"), we can find 55.8k active job listings as of May July 2018. Wow! That certainly is a lot - and it grew quite a bit, too (42k jobs in May 2017). React.js of course is way older than Angular 2+ though. But still, React.js is extremely popular amongst employers!
Let's have a look at Vue.js then. Having a look at its official Github repository, we can clearly see that developers are loving it! And indeed, even though Vue.js 2 is relatively new (released in fall 2016), there are loads of actively developed third-party packages to be found on npm. The job market ("vue.js", "vuejs", "vue") doesn't look that bright though. Compared to Angular (Angular 1 + Angular 2+) and React, there are way less job listings. Whilst the developer community absolutely loves Vue (needless to say, that the number of Github stars also grew heavily since May 2017, it's up from 68k), the industry is beginning to slowly adopt it.
Overall, React.js offers the best job perspectives as of now (if we leave out Angular 1!). It's also extremely popular. Popularity is pretty awesome for Vue.js, too. And Angular has it's famous first part. It really comes down to what you're looking for. Are you looking for a job right now or in the near future? You'll have to think carefully about taking Vue.js then. React.js might be your safest bet. It's probable that both Angular and Vue.js offer great job perspectives in the future though.
Do job perspectives not matter to you but a vibrant and active community is important? Again, React.js might be a good choice but Vue.js certainly is very attractive, too. And don't underestimate Angular, it's far from being "not popular"!
So what's the verdict, which framework should you choose? Of course that depends. Carefully go through the compared dimensions and decide for yourself how to weight them. There is no single best or worst framework out of the mentioned three. Actually, all three are pretty awesome and you can't make a bad choice here.
Don't forget to also take other dimensions which matter to you into account. It is important how much you like the concept a certain framework implies on you. If you don't like the style of a framework, you probably won't be a good developer using it. Maybe I didn't list some other dimension which might be most important to you!
I do hope that this article gives you some ideas about how you may compare frameworks and about how you may choose one!