After looking at the features, components and libraries for Vue, React and Angular it's time to do an actual comparison of the three. While in terms of popularity React is still top there are substantial differences in where each of the frameworks excels. So even if you’re already committed to one (or want to switch) it's probably a good idea to check out exactly how they measure up against each other in a few key aspects.
Basics
Before we get to the meat it's probably prudent to point out what these differences stem from. Each of the three frameworks has a different approach to development and aims at helping devs in a different way. React and Angular are developed by big companies namely Facebook and Google while Vue has started as a side project of a Google developer. While all are JavaScript based, each presents a slightly different syntax approach. React uses JavaScript and JSX (which combines HTML and JavaScript logic), Angular uses TypeScript (HTML and TypeScript logic is split) Vue uses JavaScript (HTML and JavaScript logic is split). All of them are component-driven, but they treat coding them differently along with a number of default features included.
- React combines the UI and behavior of components, the same code is responsible for both creating a UI component and dictating its behavior.
- Vue takes the same approach and even lets you combine the UI and behavior of components from within a script.
- Angular completely separates the two, the UI parts of components are attributes of HTML tags while their behaviors are in the form of JavaScript code.
| Components | Default lang | Built-in features | |
|---|---|---|---|
| React | same code is responsible for UI & logic | JavaScript/JSX | low amount |
| Angular | components' UI & logic are completely separated | TypeScript | high amount |
| Vue | same code is responsible for UI & logic | JavaScript | fair amount |
Learning curve
Finally the main difference in approach is probably the learning curve. Vue is the easiest to learn and can even serve as a stepping stone for learning the two others, as there is some overlap especially in handling components. Simplicity and customizability obviously have their advantages, but there are also some drawbacks as it makes it somewhat difficult to debug and test. React is middle of the road, it is harder to get into but has great documentation and an easy to follow starting guide. The drawback is it does require use of third party libraries for more complex stuff. This makes the learning curve not so steep but highly dependent on what you actually want to do and what third party libraries you’ll need to learn to do it. Angular is the complete framework, but also has the steepest learning curve requiring learning TypeScript, RxJS and MVC. The investment of time and effort may prove well worth it as mastering it will make building your app a breeze.
Minimalism vs all-in-one
Approach and philosophy are important and all but that’s mostly just the pitch. For a clearer picture it's better to look at the features. As mentioned above React takes a minimalistic approach here, it provides you with a library for rendering content to the DOM. It does provide some rudimentary built-in state management support but you’ll likely need to use a state management library like Redux (which is fortunately quite easy to learn). There aren't any other special features and if you need some other functionalities you’ll need to check out community provided solutions. That does make it a lot slimmer than the other two, but can be a hassle if you’re working on a complex project and looking to get started from the get go. Vue is the middle ground, it provides some features, but isn't the complete package Angular is. You get built in state management as well as a built-in router. Though for form validation you’ll need something like the Vuelidate library and a library for Http client functions (there's quite a few to choose from) Angular gives you all these features out of the box and more, there’s an official CLI which helps building, managing, updating and deploying projects even easier.
| React | Angular | Vue | |
|---|---|---|---|
| Backed by | Evan You | ||
| Release date | 2013 | 2016 | 2014 |
| Lang | JavaScript | TypeScript | JavaScript |
| Learning curve | medium | hard | easy |
| Documentation | good | good | good |
| Features | external libraries | all-in-one | most-in-one |
| Production-ready | yes | yes | yes |
Less is more
The thought that comes to mind is probably, why not go with Angular, after all it has the most features. Well more isn't always better and as mentioned the steep learning curve can be a turnoff especially if you’re looking to get started right away or working on projects requiring less complex solutions out of the box. Oh and emphasis on ‘out-of-the-box’ here, it's not like Vue and React are useless when it comes to features. Just the opposite, they're freely available to you when you need them, you just need to reach out to the community instead of getting them built-in with the framework. As you can see it comes to personal preference and focusing on what fits you best now and what might fit you best in the future, hopefully this little piece helped with that at least a little bit.
A guest blog post for GraphQL Editor blog by Michał Tyszkiewicz
Want to speed up your GraphQL schema development?
GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. Try GraphQL Editor for free!
Top comments (10)
why do these comparisons never compare framework to no frameworks?
Yes! react vs angular vs vue vs vanilla.
also, this article skips one crucial topic: Performance! And there we have only one winner: VanillaJS aka. no framework!
Check out the performance stats here: github.com/mits-gossau/event-drive...
I'd be very interested in reading a comparison between vanilla vs frameworks. Maybe someone more experienced than me can make an article of it
@Cédric, we gonna finish the real world example (see link above) soon. Why don't ya have a look... some code is worth a thousand words!
I don't know why people say angular is hard to learn. I started watching Vue but quit, then I built an easy project with React and I didn't like that style of code and finally when I see Angular I immediately fall in love. Angular was very easy for me to learn, the code is clean and its structure is very easy.
React makes the most sense for me.
Nice article!
typo: Documnation
Word! Interestingly enough, the DOM and its Web Api is kinda a framework, too.
This makes no sense to me. It says Vue was released before Angular, but Evan You created Vue to be a smaller simpler subset of the features of Angular.
Evan You was referring to the 1st (old) version of Angular which is today called AngularJS and is almost dead. The "new" Angular is a different and new platform.