Angular vs. React vs. Vue: A 2017 comparison
So, how are we supposed to decide? A pros-and-cons list never hurts. We’ll do this in the style of my previous article, “9 Steps: Choosing a tech stack for your web application”.
Before we start — SPA or not?
You should first make a clear decision as to whether you need a single-page-application (SPA) or if you’d rather take a multi-page approach. Read more on this in my blog post, “Single-page-application (SPA) vs. Multi-page web applications (MPA)” (coming soon, follow me on Twitter for updates).
The starters today: Angular, React and Vue
Here are the questions we’ll address today:
- How mature are the frameworks / libraries?
- Are the frameworks likely to be around for a while?
- How extensive and helpful are their corresponding communities?
- How easy is it to find developers for each of the frameworks?
- What are the basic programming concepts of the frameworks?
- How easy is it to use the frameworks for small or large applications?
- What does the learning curve look like for each framework?
- What kind of performance can you expect from the frameworks?
- Where can you have a closer look under the hood?
- How can you start developing with the chosen framework?
Ready, set, GO!
1. Lifecycle & strategic considerations
1.1 Some history
Facebook is working on the release of React Fiber. It will change React under the hood — rendering is supposed to be much faster as a result — but things will be backward-compatible after the changes. Facebook talked about the changes at its developer conference in April 2017, and an unofficial article about the new architecture was released. React Fiber was released with React 16 in September 2017.
Vue is one of the most rapidly growing JS frameworks in 2016. Vue describes itself as a “Intuitive, Fast and Composable MVVM for building interactive interfaces.” It was first released in February 2014 by ex-Google-employee Evan You (BTW: Evan wrote an interesting blog post about the marketing activities and numbers in the first week back then). It’s been quite a success, especially given that Vue is getting so much traction as a one-man show without the backing of a big company. Evan currently has a team of dozen core developers. In 2016, version 2 was released. Vue is used by Alibaba, Baidu, Expedia, Nintendo, GitLab — a list of smaller projects can be found on madewithvuejs.com.
All three Frameworks are available under the MIT license.
React shipped with a special BSD3-license file until September 2017. There were a lot of discussions on the patent file. If you are interested into the history of this, you can read this Github issue discussion, the reasons and the history behind the patent file (by Ex-Facebook engineer James Ide), Why you should not be scared (by Dennis Walsh), the warning against the use for startups (by Raúl Kripalani) and a former statement from Facebook on this topic: Explaining React’s license. Anyway — all should not matter anymore as Facebook finally announced, that React will get the MIT license.
1.2 Core development
As already noted, Angular and React are supported and used by big companies. Facebook, Instagram and Whatsapp are using it for their pages. Google uses it in a lot of projects: for example, the new Adwords UI was implemented using Angular & Dart. Again, Vue is realized by a group of individuals whose work is supported via Patreon and other means of sponsorship. You can decide for yourself whether this is a positive or negative. Matthias Götzke thinks that Vue’s small team is a benefit because it leads to cleaner and less over-engineered code / API.
Let’s have a look at some statistics: Angular lists 36 people on their team page, Vue lists 16 people, and React doesn’t have a team page. On Github, Angular has > 25,000 stars and 463 contributors, React has > 70,000 stars and > 1,000 contributors, and Vue has almost 60,000 stars and only 120 contributors. You can also check the Github Stars History for Angular, React and Vue. Once again, Vue seems to be trending very well. According to bestof.js, over the last three months Angular 2 has been getting an average of 31 stars per day, React 74 stars, and Vue.JS 107 stars.
1.3 Market lifecycle
It’s hard to compare Angular, React and Vue in Google Trends because of the various names and versions. One way to approximate could be to the search in the category “Internet & technologies”. Here is the result:
Oh, well. Vue was not created before 2014 — so something is amiss here. La Vue is French for“view”, “sight” or “opinion”. Maybe it’s that. A comparison of “VueJS” and “Angular” or “React” is not fair either, as VueJS has hardly any results compared to the others.
Let’s try something else, then. The Technology Radar from ThoughtWorks gives a good impression of how technologies evolve over time. Redux is in the adoption stage (to be adopted in projects!), and it has been invaluable in a number of ThoughtWorks projects. Vue.js is in the trial stage (try it out!). It is described as a lightweight and flexible alternative to Angular with a lower learning curve. Angular 2 is in the assessment stage — it is used successfully by ThoughtWork teams, but not a strong recommendation yet.
According to the last Stackoverflow 2017 survey, React is loved by 67% of surveyed developers and AngularJS by 52%. “No interest to continue developing” registers higher numbers for AngularJS (48%) vs. React (33%). Vue is not in the Top 10 in either case. Then there’s the statejs.com survey comparing “front-end frameworks”. The most interesting facts: React and Angular have 100% awareness, and Vue is unknown to 23% of the people surveyed. Regarding satisfaction, React scored 92% for “would use again”, Vue 89% and Angular 2 only 65%.
What about another customer satisfaction poll? Eric Elliott started one in October 2016 to evaluate Angular 2 and React. Only 38% of the people surveyed would use Angular 2 again, while 84% would use React again.
1.4 Long-term support & migrations
React APIs are quite stable, as Facebook states in their design principles. There are also some scripts to help you move from your current API to a newer one: check out react-codemod. Migrations are quite easy and there is no such thing (needed) as a long-term-support version. In this Reddit post, people note that the upgrades never really were a problem. The React team wrote a blog post about their versioning scheme. When they add a deprecation warning, they keep it for the rest of the current release version before the behavior is changed in the next major version. There is no planned change to a new major version — v14 was released in October 2015, v15 was published in April 2016, and v16 does not have a release date yet. The upgrade should not be a problem, as recently noted by a React core developer.
Regarding Angular, there is a blog post about versioning and releasing Angular starting with the v2 release. There will be one major update every six months, and there will be a deprecation period of at least six months (two major releases). There are some experimental APIs marked in the documentation with shorter deprecation periods. There is no official announcement yet, but according to this article, the Angular team has announced long-term-support versions starting with Angular 4. Those will be supported for at least one year beyond the next major version release. This means Angular 4 will be supported until at least September 2018 with bug-fixes and important patches. In most cases, updating Angular from v2 to v4 is as easy as updating the Angular dependencies. Angular also offers a guide with information as to whether further changes are needed.
The update process for Vue 1.x to 2.0 should be easy for a small app — the developer team has asserted that 90% of the APIs stayed the same. There is a nice upgrade-diagnostic migration-helper tool working on the console. One developer noted that the update from v1 to v2 was still no fun in a big app. Unfortunately, there is no clear (public) roadmap about the next major version or information on plans for LTS versions.
One more thing: Angular is a full framework and offers a lot of things bundled together. React is more flexible than Angular, and you will probably wind up using more independent, unsettled, fast-moving libraries — this means that you need to take care of the corresponding updates and migrations on your own. It could also be a detriment if certain packages are no longer maintained or some other package becomes the de facto standard at some point.
1.5 Human resources & recruiting
Do you have designers working close to the code? The user “pier25” notes on Reddit that React makes sense if you are working for Facebook, where everyone is a superhero developer. In the real world, you won’t always find a designer who can modify JSX — as such, working with HTML templates will be much easier.
The good thing about the Angular framework is that a new Angular 2 developer from another company will quickly familiarize themselves with all the requisite conventions. React projects are each different in terms of architectural decisions, and developers need to get familiar with the particular project setup.
Well, then… I should probably mention that Mahesh is a Regional Director at Microsoft.
2. Comparison of React, Angular & Vue
The frameworks in question are all component-based. A component gets an input, and after some internal behavior / computing, it returns a rendered UI template (a sign in / sign out area or a to-do list item) as output. The defined components should be easy to reuse on the webpage or within other components. For example, you could have a grid component (consisting of a header component and several row components) with various properties (columns, header information, data rows, etc.) and be able to reuse the component with different data sets on another page. Here is a comprehensive article about components, in case you’d like to learn more about this.
React and Vue both excel at handling dumb components: small, stateless functions that receive an input and return elements as output.
2.2 Typescript vs. ES6 vs. ES5
Angular relies on TypeScript. This offers more consistency in related examples and open source projects (React examples can be found in either ES5 or ES6). This also introduces concepts like decorators and static types. Static types are useful for code intelligence tools, like automatic refactoring, jump to definitions, etc. — they are also supposed to reduce the number of bugs in an application., though there certainly isn’t consensus on this topic. Eric Elliott disagrees in his article “The shocking secret about static types”. Daniel C Wang says that the cost of using static types does no harm and that it’s good to have both test-driven development (TDD) and static typing.
Update: James Ravenscroft wrote in a comment to this article, that TypeScript has first-class support for JSX — components can be type-checked seamlessly. So if you like TypeScript and you want to use React, this should not be a problem.
2.3 Templates — JSX or HTML
Vue features “single-file components”. This seems like a trade-off with regard to the separation of concerns — templates, scripts and styles are in one file but in three different, ordered sections. This means you get syntax highlighting, CSS support and easier use of preprocessors like Jade or SCSS. I have read in other articles, that JSX is easier for debugging because Vue will not show bad HTML syntax errors. This is not true because Vue converts HTML to render functions — so errors are shown without problems (Thanks to Vinicius Reis for commenting and the correction!).
Side note: If you like the idea of JSX and want to use it in Vue, you can use babel-plugin-transform-vue-jsx.
2.4 Framework vs. library
Angular is a framework rather than a library because it provides strong opinions as to how your application should be structured and also has more functionality out of the box. Angular is a “complete solution” — batteries included and ready to provide you with a pleasant start. You don’t need to analyze libraries, routing solutions or the like — you can just start working.
React and Vue, on the other hand, are universally flexible. Their libraries can be paired to all kinds of packages (there are quite a lot for React on npm, but Vue has fewer packages because it’s still quite young). With React, you can even exchange the library itself for API-compatible alternatives like Inferno. However, with great flexibility comes great responsibility — there are no rules and limited guidance with React. Every project requires a decision regarding its architecture, and things can go wrong more easily.
There are still a bunch of installed tools, you are not used to, when starting with the framework. These are generated but probably a lot of developers do not understand, what is happening under the hood — or it takes a lot of time for them to do.
Vue seems to be the cleanest and lightest of the three frameworks. GitLab has a blog post about its decision regarding Vue.js (October 2016):
Vue.js comes with the perfect balance of what it will do for you and what you need to do yourself.(…) Vue.js is always within reach, a sturdy, but flexible safety net ready to help you keep your programming efficient and your DOM-inflicted suffering to a minimum.
They like the simplicity and ease of use — the source code is very readable, and no documentation or external libraries are needed. Everything is very straightforward. Vue.js “does not make large assumptions about much of anything either”. There’s also a podcast about GitLab’s decision.
Another blogpost about a shift towards Vue comes from Pixeljets. React “was a great step forward for JS world in terms of state-awareness, and it showed lots of people the real functional programming in a good, practical way”. One of the big cons of React vs. Vue is the problem of splitting components into smaller components because of the JSX restrictions. Here is a quote of the article:
For me and my team the readability of code is important, but it is still very important that writing code is fun. It is not funny to create 6 components when you are implementing really simple calculator widget. In a lot of cases, it is also bad in terms of maintenance, modifications, or applying visual overhaul to some widget, because you need to jump around multiple files/functions and check each small chunk of HTML separately. Again, I am not suggesting to write monoliths — I suggest to use components instead of microcomponents for day-to-day development.
2.5 State management & data binding
Building UIs is hard, because there are states everywhere — data changing over time entails complexity. Defined state workflows are a big help when apps grow and get more complex. For limited applications, this is probably overkill and something like Vanilla JS would be sufficient.
How does it work? Components describe the UI at any point in time. When data changes, the framework re-renders the entire UI component — displayed data is always up-to-date. We can call this concept “UI as function”.
React often works bundled with Redux. Redux describes itself in three fundamental principles:
- Single source of truth
- State is read-only
- Changes are made with pure functions
In other words: the status of the complete application is stored in an object tree within a single store. This helps with debugging the application, and some functionalities are easier to implement. The state is read-only and can only be changed via actions to avoid race conditions (it also helps with debugging). Reducers are written to specify how the states can be transformed by actions.
Most of the tutorials and boilerplates have Redux already integrated, but you can use React without it (and you might not need Redux in your project at all). Redux introduces complexity and pretty strong constraints into your code. If you are learning React, you should think about learning plain React before you head over to Redux. You should definitely read “You might not need Redux” by Dan Abramov.
Some developers suggest the use of Mobx instead of Redux. You can think of it as an “automatic Redux”, which makes things much easier to use and understand at the outset. If you want to have a look, you should start with the introduction. You can also read this useful comparison between Redux & MobX by Robin. The same author also offers information on moving from Redux to MobX. This list is useful if you want to check on other Flux libraries. And if you are coming from an MVC-world, you’ll want to read the article “Thinking in Redux (when all you’ve known is MVC)” by Mikhail Levkovsky.
Vue can make use of Redux — but it offers Vuex as its own solution.
A big difference between React and Angular is one-way vs. two-way binding. Angular’s two-way-binding changes the model state when the UI element (e.g. a user input) is updated. React only goes one way: it updates the model first and then it renders the UI element. Angular’s method is cleaner in the code and easier for the developer to implement. React’s way results in a better data overview, because the data only flows in one direction (this makes debugging easier).
Both concepts have there pros and cons. You need to understand the concepts and determine if this influences your framework decision. The article “Two-way-data binding: Angular 2 and React” and this Stackoverflow question both offer a good explanation. Here you can find some interactive code examples (3 years old, for Angular 1 & React only). Last but not least, Vue supports both one-way-binding and two-way-binding (one-way by default).
2.6 Other programming concepts
Angular includes dependency injection, a pattern in which one object supplies the dependencies (a service) to another object (a client). This leads to more flexibility and cleaner code. The article “Understanding dependency injection” explains this concept in more detail.
The model-view-controller pattern (MVC) splits a project into three components: model, view and controller. Angular as an MVC-framework has MVC out of the box. React only has the V — you need to solve the M and C on your own.
2.7 Flexibility & downsizing to microservices
We’re now moving more towards microservices and microapps. React and Vue give you more control to size an application by selecting only the things which are really necessary. They offer more flexibility to shift from an SPA to microservices using parts of a former application. Angular work best for SPA, as it is probably too bloated to be used for microservices.
As Cory House notes:
Some people use React for non-SPA websites as well (e.g. for complex forms or wizards). Even Facebook uses React — not for the main page, but rather for specific pages and features.
2.8 Size & performance
There is a flip-side to all the functionality: the Angular framework is quite bloated. The gzipped file size is 143k, compared to 23K for Vue and 43k for React.
React and Vue both have a Virtual DOM , which is supposed to improve performance. If you’re interested in this, you can read about the differences between the Virtual DOM & DOM, as well as the real benefits of the Virtual DOM in react.js. Also, one of the authors of the Virtual-DOM itself answers a performance-related question on Stackoverflow.
To check the performance, I had a look at the great js-framework-benchmark. You can download and run it yourself, or have a look at the interactive result table. Before you check the results, you should know, that the frameworks are cheating on benchmarks — such a performance check should not be used to make decisions.
To summarize: Vue has great performance and the deepest memory allocation, but all these frameworks are really pretty close to each other when compared to particularly slow or fast frameworks (like Inferno). Once again: The performance benchmarks should only be considered as side note, not as a verdict.
Then there is Jasmine as a testing framework in Angular 2. There’s rant in an article by Eric Elliott that says Jasmine “results in millions of ways to write tests and assertions, needing to carefully read each one to understand what it´s doing”. The output is also very bloated and laborious to read. There are some informative articles on the integration of Angular 2 with Karma and Mocha. Here is an old video (from 2015) about the testing strategies with Angular 2.
Vue lacks testing guidance, but Evan wrote in his 2017 preview that the team plans to work on this. They recommend using Karma. Vue works together with Jest, and there’s also avoriaz as a test utility.
2.10 Universal & native apps
Universal apps are introducing apps into the web, onto the desktop and into the world of native apps, as well.
React and Angular both support native development. Angular has NativeScript (backed by Telerik) for native apps and Ionic Framework for hybrid apps. With React, you can check out react-native-renderer to build cross-plattform iOS and Android apps, or react-native for native apps. A lot of apps (including Facebook; check the Showcase for more) are built with react-native.
2.11 Learning curve
Vue is pretty easy to learn. Companies switch to Vue because its seems to be much easier for junior developers. Here you can read about somebody describing his team’s move from Angular to Vue. According to another user, the React app at his company was so complex that a new developer couldn’t keep up with the code. With Vue, the gap between junior and senior developers shrinks, and they can collaborate more easily and with fewer bugs, problems and time to develop.
When it comes to debugging, it’s a plus that React and Vue have less magic. The hunt for bugs is easier because there are fewer places to look and the stack traces have better distinctions between their own code and that of the libraries. People working with React report that they never have to read the source code of the library. However, when debugging your Angular application, you often need to debug the internals of Angular to understand the underlying model. On the bright side, the error messages are supposed to be clearer and more informative starting with Angular 4.
2.12 Angular, React and Vue under the hood
Do you want to check the source code yourself? Do you want to see how things feel?
How does the syntax look? ValueCoders compares the syntax for Angular, React and Vue.
There are also some real-world apps you could have a look at. Here are solutions for React:
- Do (a nice real-world notes management application built with React & Redux)
- sound-redux (a Soundcloud client built with React & Redux)
- Brainfock (a project & team management solution built with React)
- react-hn & react-news (Hacker news clones)
- react-native-whatsapp-ui + a tutorial (Whatsapp clone with react-native)
- phoenix-trello (Trello clone)
- slack-clone + another tutorial (Slack clones)
There are some apps for Angular:
- angular2-hn & hn-ng2 (Hacker News clones + a nice tutorial about creating another one by Ashwin Sureshkumar)
- Redux-and-angular-2 (a Twitter clone)
There are also solutions for Vue:
Decide on a framework now
React, Angular and Vue are all pretty cool, and none of them stands clearly above the others. Trust your gut feeling. This last bit of entertaining cynicism might help your decision:
What should I choose?
If you work at Google: Angular
If you love TypeScript: Angular (or React)
If you love object-orientated-programming (OOP): Angular
If you need guidance, structure and a helping hand: Angular
If you work at Facebook: React
If you like flexibility: React
If you love big ecosystems: React
If you like choosing among dozens of packages: React
If you like really clean code: Vue
If you want the easiest learning curve: Vue
If you want the most lightweight framework: Vue
If you want separation of concerns in one file: Vue
If you are working alone or have a small team: Vue (or React)
If your app tends to get really large: Angular (or React)
If you want to build an app with react-native: React
If you want to have a lot of developers in the pool: Angular or React
If you work with designers and need clean HTML files: Angular or Vue
If you like Vue but are afraid of the limited ecosystem: React
If you can’t decide, first learn React, then Vue, then Angular.
So, have you made your decision?
Well done! Read about how to start developing in either Angular, React or Vue (coming soon, follow me on Twitter for updates).
- React JS, Angular & Vue JS — Quickstart & Comparison (an 8-hour long introduction and comparison of the three frameworks)
- Angular vs. React (vs. Vue) — the DEAL breaker (a short but excellent comparison by Dominik T)
- Angular 2 vs. React — the ultimate dance off (a nice comparison by Eric Elliott)
- React vs. Angular vs. Ember vs. Vue.js (a comparison of the three frameworks in note form by Gökhan Sari)
- React vs. Angular (a clear comparison of the two frameworks)
- Can Vue fight for the Throne with React? (a nice comparison with a lot of code examples)
- 10 reasons, why I moved from Angular to React (another nice comparison by Robin Wieruch)