Introduction: The most popular frameworks: React, Vue, and Angular
When it comes to starting a project there’s always a question in our heads… What framework to use? In this article, we have selected three different frameworks thanks to their characteristics and popularity.
We selected Angular, React, and Vue because they are popular, have a fanbase, and have tools and support, that differentiate them from other front end development frameworks. Using Google Trends we can see how popular they are compared with each other – React is in first place, followed by Angular and Vue.
According to the Stack Overflow 2018 survey of more than 50,000 developers, Angular and React are the second and third most popular frameworks.
Understanding each framework
I want to provide a short overview of each of the frameworks, plus some of their advantages and disadvantages based on my experience with them.
React is a library created by Facebook for front end development. One of the key elements of React is that everything is a component, which helps when creating user interfaces (as this excellent GitBook explains, it’s important to start thinking “in components”). This serves both the development of single page applications as well as for mobile development.
Advantages of React
- React offers lightweight and easy component creation.
- It’s a very popular library with a large number of followers and is widely used by startups.
- There are a large number of third-party extensions created by the community which makes it easy to implement solutions.
Disadvantages of React
- Thanks to its focus on creating user interfaces, you have to include third party extensions to generate suitable solutions. Although there are many of these, it can become tedious when choosing which one to use.
Very simply, Angular is a platform created by Google for the creation of single page applications.
Advantages of Angular
- Provides a more “out of the box” experience than React or Vue. It has more tools, and better guides to create efficient solutions.
- It’s an “opinionated” language – by that I mean that there is “the Angular way” of doing things, which provides a set of rules and good practices to solve different problems.
- It focuses on the creation of applications, so it’s very popular in organizations.
- It has the best CLI of the three frameworks. This includes TypeScript (for better control of the code and an easier passage to front end development for those with backend orientation), easy and efficient creation of different Angular components (modules, services, etc) through the terminal that manages to create a greater abstraction for repetitive tasks, Jasmine and Karma for unit testing, a totally configurable Webpack, and support for ES6 and Sass, as well as others.
- It borrows conventions from .Net developers.
Disadvantages of Angular
- It’s the API with the highest learning curve due to its great content.
- The code may seem complex and repetitive compared to React and Vue.
- Big files and slow performance compared to Vue and React.
- It’s not “composable”. Angular may state that it’s based on components, but it’s not. It’s all based on modules.
Vue is a framework oriented to the creation of user interfaces, with very easy integration with libraries and existing projects.
Advantages of Vue
- Provides the shortest learning curve of all of them. Thus it’s the easiest for developers who have just started with front end development.
- It’s not as inclusive as Angular but it has more “out of the box” content than React, which makes it a popular option for those just beginning.
- You can use your knowledge of HTML and CSS since it works with templates.
- It’s known for its good documentation.
- Official state management library (Vuex) as well as router (Vue-router) backed by the same creators of Vue.
- It’s scalable, so it’s useful for small and big applications (hence one reason why the retail giant Alibaba uses it).
- Simplicity – its codebase is easy to maintain.
- Best performance in this benchmark.
- Useful for animation and interactive websites.
Disadvantages of Vue
- Vue is a new framework, so it does not have such a large community.
- It could be the case that it’s impossible to find a solution to a certain problem.
- Fewer extensions than React.
Comparing the frameworks against each other
React and Vue have a focus on creating user interfaces, while Angular on the other hand is oriented to creating applications, so it’s larger, more complex, and has a more difficult learning curve. While React and Vue are smaller in the beginning, they can grow as the project grows.
The three frameworks have CLIs (command line interface), which facilitates the creation of projects, local development, and preparing applications for deployment. In addition, they have great support with code editors, such as Visual Studio Code.
In terms of performance, they are very similar.
When selecting a framework, Angular, React, and Vue, are all very good choices. So it’s necessary to identify which one will best adapt to the development team and the requirements of your specific project.
Angular is a very robust framework with a lot of control over the code thanks to the rules and principles dictated by the community. This makes it a good choice for larger projects, but at the same time it has a large learning curve.
React is one of the most popular libraries on the market, and works in both small and large applications thanks to the fact that it can grow along with them. However, its main problem is the need to select extensions. In addition, thanks to its great freedom, React can cause a variety of problems, since the choice of a solution is not always the most efficient (I strongly recommend that the person responsible for the project, is knowledgeable about React, in order to guide the project).
Vue is a library that is growing in popularity day by day, but it’s still relatively new, which can mean that you may not find solutions to a certain problem. It’s also a great choice for beginners thanks to its easy use, documentation and simplicity; which can also lead to problems because there are many “magic” solutions which the developer needs to learn.
Sources and recommended reading
React.js training https://rangle-io.gitbooks.io/react-training/content/
Angular 2 training https://angular-2-training-book.rangle.io/