React, Angular and Vue are all excellent frameworks for building web apps. So if you’re kicking off a new project or looking to switch to a modern JavaScript framework, which should you choose?
1. How would you define React, Angular and Vue?
Anthony: They are JavaScript frameworks that allow you to build user interfaces each in their own way.
Anders: Angular and Vue.js are both web frameworks, whereas React is classified as a JavaScript library. Angular is developed and maintained by Google, React by Facebook and Vue.js is the brainchild of former Google employee, Evan You.
2. Are they all open source?
Anthony: They are all broadly open source because they are released under an MIT license which doesn’t have many restrictions. However, as React and Angular are backed by huge tech companies, Vue gives off a more open source feel, as it’s backed by donations and sponsors.
3. Which is most loved? And does this matter?
Anders: React has the most downloads, according to NPM trends.
In terms of which framework developers prefer, Stack Overflow’s 2020 Developer Survey found React.js the “most loved” of the three at 68.9% with Vue is slightly below at 60.0%. Although it is one of the most popular web frameworks, Angular was considered the most dreaded!
Popularity and growth are important because they can help predict the longevity of each framework. You want to invest in skills and expertise that will be around for the long term.
4. What is the main difference between them?
Anders: Each framework is component-based. However, Vue and React are classed as "view" layer only frameworks.
Angular stands out a little bit from the other two because it is a fully fledged framework. It is also a view layer but comes with the added use of services and modules; a specific way of connecting data within your application.
5. How does this affect which you should choose?
Anders: Which to choose depends on the size of the project. Whether it’s small, medium or large scale. It also depends on the size of the team and how many developers will be working on it.
If you have a large project and a plethora of developers, it's considered safer to have a structured framework such as Angular.
For example, I might have a slightly different approach of writing components to Anthony, but I wouldn't get away with that using Angular. We would have to do things the exact same way. That's one of the benefits of using Angular; it adds another layer of reassurance, particularly for checking or testing.
Of course, it’s also possible to achieve this using Vue or React, but it becomes more important to streamline and enforce the given process within a team.
Anthony: Vue and React are more customisable and freer in terms of how you want to handle data related to the component.
So if you prefer to have your project architecture defined to some degree, you should use Angular, and if you prefer to have more customisation over the architecture, you’d be better off with React or Vue.
6. How else are they different from one another?
Anthony: To understand the differences, it’s useful to compare the syntax between the different frameworks:
- Components: Vue prefers single file components that encapsulate styles, scripts and templates. Angular prefers separating them out file by file. React has no preferred way, allowing you to do either of these methods.
- Syntax: Angular applications are written using "class" syntax for components. React prefers the use of function components but can also be written using classes. Vue has Single File Components that hold scripts, styles and templates.
- Templates: Vue and Angular build on top of the HTML syntax by adding their own attributes to it, while React prefers JSX, which looks very similar to HTML.
- Styles: All frameworks come with standard CSS out-of-the-box and allow for custom configuration of styles with preprocessors (Sass) or post-processors (PostCSS).
- Scripts: All three frameworks leave it up to the developer to use JavaScript or TypeScript. However, Angular heavily encourages the use of TypeScript, which makes writing your components easier with "decorators".
7. Which offers better application frameworks?
Anthony: For each component framework, there are one or two application frameworks available.
As React is the most popular with developers, it has more fully-featured and mature application frameworks such as Next.js and Gatsby.
Vue and Angular have application frameworks available (such as Scully / Nest.js andGridsome / Nuxt.js) that share similar features to the React versions, but they're not fully featured.
So React offers a better experience in terms of application frameworks.
8. How scalable are they?
Anders: They’re all highly scalable. As Anthony mentioned, React has better application frameworks – helpful if you need to scale in the future.
However, Angular does come with core features out of the box that you can use to add new functionality and scale your app.
9. Which is easier to learn or offers a better learning experience?
Anthony: If you aren't familiar with frameworks and are thinking of starting a new project in one of them, Vue or React would be the easiest to pick up from an HTML/CSS background rather than learning Angular.
In the same way, if you are already familiar with the frameworks, say React, the learning curve of moving to Angular would be more challenging than switching to Vue.
10. And finally, which gets your vote and why?
Anders: From a developer's point of view, React offers the best experience, which is why we’re a React house! Since I joined Tangent almost six years ago, we have built a solid team of skilled developers and have a proven track record of successfully launching React projects, such as Reed.com which went live recently. Our own site is also built with React and NextJS - we practice what we preach.
Anthony: On top of that, the community is a big part of React’s appeal for me. Having a framework that is so widely adopted and with a massive community around it means there are more likely to be support articles for potential issues. A bigger community also means more access to community-made content such as libraries and learning resources.
Conclusion: Angular, React or Vue?
Of course, as with all things technical, the answer to the debate of Angular vs React vs Vue is that - it depends.
However, at Tangent, as our projects differ in size, scale and scope, we value the flexibility of React.
Every client and every project is unique, so we want the freedom to tailor our development towards their individual scope of requirements. After all, one size never fits all.