Angular vs React vs Vue _ Which Framework To Choose in 2020

Category: Others/ Misc

Presentation Description

A comprehensive comparison for developers to choose the best front-end framework between Angular vs React vs Vue as per their project requirements.


Presentation Transcript

slide 1:

A Comprehensive Guide On Angular vs React vs Vue : Which Framework To Choose in 2020 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

slide 2:

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.    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

slide 3:

happened to be the top choice of 20000 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

slide 4:

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

slide 5:

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.    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.

slide 6:

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:

slide 7:

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    React – ​Performance from Chrome Dev Tools

slide 8:

Vue – ​Performance from Chrome Dev Tools    ● 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

slide 9:

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.

slide 10:

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.

slide 11:

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 MPAsVueJS 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

slide 12:

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.   7. 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

slide 13:

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

slide 14:

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.

authorStream Live Help