[COMPARISON] Angular vs Vue.js vs React.js - which one you should choose in 2020?

Duomly - Jan 16 '20 - - Dev Community

This article was originally published at Vue.js vs React.js vs Angular


Since a few years, the popularity of different front-end frameworks grew significantly. That’s why those days probably lots of us can’t image front-end development without using one. While starting a new project, we have to decide which framework to choose to make development fast and easy and to have a great final result.

Since Google developers released Angular, and Facebook programmers created React.js, developers started to discuss which one is better. When the front-end community divided into Angular and React supporters, the new serious player appeared on the market. In 2018 Vue.js became a significant competition to its older brothers.

As you see, choosing a front-end framework for a project or to learn is more complicated then it may seem. In this article, I would like to compare those three frameworks in different planes, like the number of jobs on the market, performance, learning curve, popularity, etc. I hope this will help you to make your choice or convince you that each of them is worth some attention.

Let’s start!

1. Brief overview

In the beginning, I would like to describe some necessary information about those three frameworks to give you a brief overview of what we are going to compare.

Angular was initially released by Google developers in 2010, and the first version of this framework was called AngularJS, which makes it the oldest framework in this list. In September 2016, the Angular Team from Google released another framework that was based on the AngularJS, but this one was built in Typescript, and it’s known as Angular. The last released version of Angular is 8 and was introduced in November 2019.

React.js was created by Facebook developers in 2013, and it won the hearts of programmers very quickly. React is a component-based UI library for building user interfaces. The current release is 16.x, and we are waiting for the announced 17.x release. Facebook uses React.js a lot in their products like Facebook or Instagram.

Vue.js8 was released in 2014, and it’s the youngest framework on this list. Despite this, the popularity of the framework is huge, and the community of supporters is still growing. The framework was built by Evan You, and it’s not supported by any big company, but it’s sponsored by donations.

2. Popularity

Now, you know a little bit about the history of each framework. It’s time to check how about the popularity. I want to take a look at this point from two different prospects, by the number of job offers on the market and by developers’ interest.

Amount of job offers

I collected data about job offers with the selected framework on four job boards in the USA. Let’s take a look at the results:

Vue vs React vs Angular

You can see that React.js and Angular are the most in-demand frameworks on the job market in the USA. If you are currently facing the choice of framework you would like to learn to get a job, these two may be a great solution.

Developers’ interest

At this point, I would like to take a closer look at the popularity of three described frameworks among the developers.

I want to start from Github statistics, where the situation is a little bit different than on the job boards. I took a look at the number of forks and stars for every framework, and here the winners are VueJS and ReactJS.

React vs Vue vs Angular - Popularity

Another place where I’m going to check the popularity of the framework is Google Trends. It will show us which framework is searched in Google Search the most often.

React vs Vue vs Angular - Popularity

It shows us that React.js was the most popular framework in during the year in Google Search, which means the popularity of the technology is still growing. The second is Angular, and the last one, according to Google Search, is VueJS, but we have to take into consideration what VueJS is the youngest framework it’s doing great.

3. Performance

At this point, I would like to focus more on the technical aspects of the frameworks. That’s why here I’m going to take a look at the performance of VueJS, React.js, and Angular.

To check the loading time and bundle size of the frameworks, I decided to create three identical, very simple apps using VueJS, Angular, and React, run them and see what’s the result. Please keep in mind that the apps are taken as is without any additional care about performance. Also, it's worth to remember that Angular comes with everything ready for development like routing, etc, while Vue.js and React.js need bunch of additional libraries.

Let’s take a look at the bundle sizes:

Vue - Angular - React - bundle sizes

From the table above, we can see that React.js has the smallest bundle size, Vue.JS is twice that size, and the biggest bundle is from Angular.

Below you can see the screens from Chrome DevTools performance, and here we can see the loading time. In this case, the loading time has the best result for Vue.js, and it’s about 936ms. Angular and React have similar results with about 3300ms.

Angular - Performance from Chrome Dev Tools
Angular - Performance from Chrome Dev Tools

React - Performance from Chrome Dev Tools
React - Performance from Chrome Dev Tools

Vue - Performance from Chrome Dev Tools
Vue - Performance from Chrome Dev Tools

4. Learning curve

The easiness or difficulty of learning any framework is a very personal thing, and some people will find technology A easier; others will rate as very difficult. In this case, I’m going to share my experience and thought on this subject.

In my opinion, if you started to learn front-end properly from mastering Javascript and understanding it’s concepts, all three should be equally easy to learn. Angular may cause some more problems because it’s good to know Typescript to write Angular apps (although it’s not necessary).

According to the information I found, beginners see React.js and VueJS as a framework with a more smooth learning curve. But once again, it’s a very individual thing.

5. Known projects

As the last point in this article, I would like to mention some well-known projects created using each of these frameworks, to show you that it’s possible to build big things with any technology.

React.js

  • Facebook
  • Instagram
  • Netflix

Angular

  • Forbes
  • Santander Bank
  • BMW Price Calculator

Vue.js

  • FontAwesome
  • 9GAG
  • Alibaba

Conclusion

In this article, I compared three of the most popular front-end frameworks, VueJS, React.js, and Angular.

I started from a brief overview of every framework; later, I compared the popularity based on the number of job offers on the market. This part tells you that if you want to find a useful framework to learn and get an excellent job, the best solution will be React.js. While checking the popularity of the frameworks based on the number of searches in Google Search and Github statistics, both React.js and VueJS have strong supporters community.

While comparing the performance by running three identical apps on each of these frameworks, we found out that React.js has the smallest bundle size, but the loading time is the best in the case of the Vue.js app.

Taking into consideration all the information you could read in this article, the choice of the most suitable framework for your purpose should be easier now.

I hope you will find this article useful for 2020. Also, if you have made any comparison or have any experiments showing the advantages or disadvantages of any front-end framework, share it with us in the comments.

Thank you for reading,
Anna from Duomly


Duomly - Programming Online Courses

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .