A Comprehensive Guide On Angular vs React vs Vue : Which Framework To Choose in 2020?

By ongraph
April 27, 2020 | 2385 Views

Latest Industry insights to keep you updated on the latest happenings.

A few years ago, developers were majorly debating on which framework they should be using for their projects : Angular vs React vs Vue. However, over the course of 2018 and 2019, there happened to be a growth of interest in a third framework known as Vue.js. Going forward into 2020, here we will have a detailed discussion on which is perhaps the best solution for you : Angular vs React vs Vue.

If you are a developer who is starting out on a project and is confused as to which JavaScript framework to choose, then this guide should help you make a better decision. We would cover various aspects of the three frameworks to see how they fit best as per your needs. 

As per the State of JavaScript Survey 2019, React was considered as one of the top choices of JavaScript framework and also received an overwhelming response from the developers.

State of java script

 Source: State Of JavaScript

In the same survey, Vue surprisingly grabbed the second position, leaving Angular behind at the third position.

We know that each and every developer has a different skill level, knowledge, unique project requirements, complexities, deadlines, and so on. Thus, if React happened to be the top choice of 20,000 developers, it is not mandatory that it will fit your project requirements as well. 

So, let’s dive deeper into the trends and compare these top three frameworks to make the best choice. We will compare the three JavaScript frameworks based on the following criteria:

  • Overview
  • Popularity
  • Performance
  • Learning curve
  • Single-page apps§
  • Multi-page apps
  • Known Projects

So, let’s get started…

  • Brief Overview

Angular: Initially released in 2010 by Google developers, this framework’s first version was called AngularJS. It is the oldest framework out of the three. Based on the AngularJS, the Angular Team from Google released another framework in September 2016, known as Angular, but this one was created in Typescript. The last released version of Angular is 8, which was introduced in November 2019. 

React.js: It was created in 2013 by Facebook developers and quickly won the hearts of programmers. It is a component-based UI library for creating user interfaces. The current release is 16.x and the announcement of the release of 17.x is still in waiting. Facebook makes use of React.js a lot in their products such as Facebook or Instagram.

Vue.js8: It is the youngest framework of the three which was released in 2014. In Spite of this, the framework has a huge popularity, and the community of supporters is still growing. The framework was developed by Evan You, and is not supported by any big company, rather is sponsored by donations.

  • Popularity

Now, you are aware about the history of the three frameworks. It’s now time to check about the popularity of each framework. We are going to look at this point from two different prospects, by developer’s interest and by Google trends.

Developer’s interest

To have a closer look at the popularity of the three frameworks among the developers, let’s start from Github statistics. Have a look at the number of forks and stars for each framework, and the winners here are VueJS and ReactJS.

Developers stats

Another place where we are going to check the popularity of the three frameworks is Google Trends. This will tell us which framework is searched the most often in Google Search.

Angular vs React vs Vue

This shows that ReactJS happened to be the most popular framework in Google Search during the year, which implies that the popularity of the technology is still rising. 

Angular happened to be the second and VueJS the last one, as per the Google Search. Although, we must consider the fact that VueJS being the youngest framework is doing great.

  • Performance 

Here, we would like to focus more on the technical aspects of the three frameworks. Thus, we would have a look at the performance of ReactJS, VueJS, and Angular.

In order to check the loading time and bundle size of the three frameworks, three identical and very simple apps were created using Angular, React, and VueJS, run them and see the result. One must keep into consideration that the apps have been taken as without any additional care about performance. Furthermore, one should also remember that Angular comes with everything ready for development such as routing, etc. On the other hand, ReactJS and VueJS require a bunch of additional libraries. 

Let’s have a look at the bundle sizes:

From the above table, we can see that ReactJS has the smallest bundle size, VueJS has twice that size, while the biggest bundle is from Angular. 

Below, you can have a look at the screens from Chrome DevTools performance, and can observe the loading time. Here, the loading time has the best result for VueJS, which is about 936ms. React and Angular have similar results with about 3300ms. 

Angular – Performance from Chrome Dev Tools

Angular js

React – Performance from Chrome Dev Tools

ReactJs

Vue – Performance from Chrome Dev Tools

VueJs

  • Learning Curve 

As per their background, developers will have varied points of views on which framework of the three is the easiest to learn.

Easiest learning Curve: VueJS

As per our opinion, VueJS is the most straightforward framework for most web developers to learn. As it is closest to HTML and JavaScript basics, it will feel familiar. Getting started with VueJS is as easy as adding one import to an HTML document. As you create more complex apps, VueJS does get more complicated. This needs working with .vue files, which needs a more complex project setup (although the Vue CLI can make this much simpler) and you will have to immerse into more complex patterns. 

Steepest learning curve: Angular

As Angular uses TypeScript, which is a subset of JavaScript, its learning curve happens to be steep. The components, syntax, and modules that you use can appear quite different from the JavaScrip syntax that you are used to. Though, angular has a lot of robust, built-in features which lead developers into certain coding patterns that can prove to be quite helpful in creating applications.  

Medium learning curve: ReactJS

ReactJS has, what we say, a medium-to-steep learning curve. Though it uses an ‘everything is JavaScript’ approach, there are two conditions to ReactJS. First is that it works best with ES6 syntax, which can prove to be challenging for a beginner developer. The second is the use of JSX, which is a syntax hybrid of HTML and JavaScript, and not used for typical JavaScript projects. Because JSX looks like HTML, it can be difficult at first, but is still JavaScript, leading to some confusion in understanding the code.

So, the learning curve winner happens to be VueJS.

  • Single-Page Apps (SPAs)

SPAs are highly reactive, mobile-like web applications having no page reloading wait times. The page is based on a single HTML file while JavaScript manages everything that the user sees in the browser. When a button is pressed or a new window emerges on the page, there’s no request made to a server. Rather, the JavaScript is modified and instantly rendered.

Single-page applications’ popularity is due to the fact that they load so fast. So, how do the three frameworks, Angular, VueJS, and ReactJS stack up in relation to developing SPAs? Angular was developed by Google explicitly for building SPAs. The use of TypeScript and all of the built-in tools and services of Angular make SPA development with Angular an amazing experience for a developer. Tools such as routing, form validation, and state-management solution allow for a fresh and up-to-date development experience. Use of VueJS or ReactJS for larger SPAs may bring bigger complexities as compared to when using Angular, like the availability of necessary packages for form support.

So, the Single-Page App winner is Angular.              

  • Multi-Page Applications (MPA)

MPA is a typical website like your favorite media site or ecommerce. Each time the site wants to send data to a server or to display new data, a request is sent to the server, which is exhibited in the browser.

When ReactJS is used to improve the existing HTML of the page, it works just fine for these projects. One can also import ReactJS so as to add robust JavaScript-based components to the page. However, for creating ReactJS components with JSX, one will still require some type of frontend build workflow. Though, in MPAs,VueJS is very straightforward. In order to start incorporating its components and features to your page, just import the VueJS library and there’s no requirement of special setup. Overall, both ReactJS and VueJS work well to add JavaScript functionality to Multi-Page applications. 

Here, we can consider VueJS to be a little better as compared to ReactJS as there’s no need to use some special syntax (JSX) that needs a build step. 

When creating an MPA, we would not recommend Angular. The all-in-one approach of the same to components and its use of TypeScript doesn’t make it the right framework here. Importing Angular packages into your HTML would prove to be complicated unnecessarily. If you try to compile TypeScript within an HTML-driven application such as an MPA, it will impact the performance and will also prove to be an annoyance to you as well as your development team. Overall, Angular was built to help you create SPAs. Though, it might become a more feasible option for MPAs in the future, we presently are not there yet. 

So, the Multi-Page Application winner here is a tie between ReactJs and VueJS. 

  1. Known Projects

As the last criteria in this list, we would like to mention some well-known projects developed using each of the three frameworks, to show you that it is possible to develop big things with any of the technology.

  • React.js

Facebook

Instagram

Netflix

  • Angular

Forbes

Santander Bank

BMW Price Calculator

  • Vue.js

FontAwesome

9GAG

Alibaba

Conclusion:

In this study, we compared three of the most popular front-end frameworks, ReactJs, Angular, and VueJS.

We started with a brief overview of each framework and later compared the popularity of the three. This aspect tells you that if you wish to find a useful framework to learn, then the best solution will be ReactJS. When the popularity was checked based on the Github statistics and Google Search, both VueJS and ReactJs have a strong supporters community. 

When the performance was compared by running three identical apps on each of the three frameworks, then ReactJS was found to be having the smallest bundle size. However, the loading time was found to be the best in the case of the VueJs app.

Considering all the information you could read in this study, the choice of the most suitable framework out of Angular vs ReactJS vs VueJS as per your project requirements shall be easier now. 

Hope you find this study useful to find the best framework in 2020 for your project. If you have any other query regarding the same, just drop us an email. Our team will respond back to you as soon as possible.

RECOMMENDED

Monthly industry insights to keep you updated on latest happenings

Follow us on Twitter
Follow us on Facebook
Follow us on Linkedin