Comments

React, Angular or Vue: What to Choose for Your Next Project?

ES10

It’s 2019, and the StackOverflow Developer survey results for this year are out. Guess what? For the seventh year in a row, JavaScript has been voted as the most popular programming language. In this post, we are going to compare the three most popular JS frameworks.

If you would rather watch a video to learn about this, checkout this video by Mosh, comparing React, Angular and Vue. It will help you decide which framework to choose for your next project.

https://insights.stackoverflow.com/survey/2019#key-results

With JavaScript being the most used programming language in the world, JavaScript Web frameworks and libraries like React, Angular and Vue are thriving. In this post, we are going to look at the most popular web framework in 2019.

And the Winner is..

React is the most loved and most wanted web framework by developers in 2019.

https://insights.stackoverflow.com/survey/2019#key-results

React tops the list and has been voted as the most “wanted “and most “loved” web framework. It is closely followed by Vue this year. Angular seems to be losing its popularity compared to the previous years.

Most Popular Web Framework

https://insights.stackoverflow.com/survey/2019#key-results

React is at the top with 21.5%, followed by Vue at 16.1%, and Angular at 12.2%.

Three Most Popular Web Frameworks Today

AngularReactVue

Angular is a full blown web framework. It has been around the longest among the three. Angular was developed by Google and first released in 2010. It is a TypeScript based JavaScript framework. Angular (version 2 and above), originally released in September 2016, is a complete rewrite of AngularJS (released in October 2010).

React is a JavaScript library that is used to build frontend applications. React is backed by Facebook and was open sourced by Facebook in 2013. Ever since then, it has consistently gained popularity and today ranks as the most popular web library in the world. React is used far more at Facebook than Angular is at Google if it’s any indication as to how big Facebook is betting on this technology. They also have a dedicated team of developers working on React.

Vue is the new kid on the block. Unlike React and Angular, Vue is not backed by any corporation like Facebook or Google. Vue was developed by a group of passionate developers. It has elements of both React and Angular, and in my opinion contains the best of both worlds.

Why is React the most popular?

I did a quick search on Google trends to compare the search terms “React”, “Angular” and “Vue”. And it has the same results as the StackOverflow survey.

Most Popular Web Framework

So why does everyone like React so much? Let’s study some differences and commonalities between the three most wanted web frameworks/libraries and see why React is everyone’s favorite.

Use of the Virtual DOM for Faster Performance

Angular:

Before React came into existence, Angular was the go to JavaScript framework for building modern web applications. Angular used the real DOM for UI manipulation.

The DOM in simple words represents the UI of your application. Everytime there is a change in the state of your application UI, the DOM gets updated to represent that change. Now the catch is, frequently manipulating the DOM affects performance, making it slow.

The more UI components you have, the more expensive the DOM updates could be, since they would need to be re-rendered for every DOM update.

React:

Now, React uses the Virtual DOM which performs significantly better than the real DOM. The use of a virtual DOM is one of its core features that makes it so blazingly fast. The virtual DOM is only a virtual representation of the DOM. If you want to learn about the React Virtual DOM and why it is faster, you can read this blog post I had written to get a better understanding.

This significant improvement in performance, contributed to the rise of React in comparison to the other frameworks and libraries.

source: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

Vue:

You may now ask, what does Vue do? Vue came after React, and it took the concept of virtual DOM and essentially has a similar approach like React.

In this aspect, React and Vue are comparable. But Angular takes the hit in performance on large UI applications with the use of the real DOM.

Flexibility

Angular:

Angular is a full blown framework, whereas React is only considered a JavaScript library. It offers strong opinions as to how your application should be structured. It also has much more functionality “out-of-the-box”. You don’t need to decide which routing libraries to use or other such considerations – you can just start coding. However, a drawback is that you have less flexibility with Angular.

React:

React on the other hand is not an opinionated library. This could be good and bad depending on your perspective. I personally like that React offers a lot of flexibility and developers can choose their path.

For instance, React does not offer routing options, instead we can go with a third party solution for routing. React router which is a popular routing option is not a part of the official React library. Advanced state management can also be done with third party library support. You could use Redux, MobX or any other library for state management. This shows that React is flexible with the way you want to route your application, manage state etc.

But to a new developer this maybe a bit overwhelming since they have to shop for options instead of getting these out of the box. Experienced developers love this flexibility since they can leverage multiple options that are out there.

Vue:

Vue is also a flexible framework. But, Vue is more opinionated than React. Unlike React, Vue offers Vuex for state management, Vue Router for routing,  Vue Server-Side Renderer for server-side rendering all as a part of the official VueJs GitHub page. The Vue.js framework by itself comes bare-bones just like React, but they have all the add on items on their official page as a part of the Vue Ecosystem.

React is the most flexible solution

The flexible nature of the library, could be another reason that contributes towards React being the developer’s favorite framework.

Framework Size

Here is the list of various frameworks/libraries and their size.

Source: https://medium.com/dailyjs/javascript-framework-battle-hello-world-in-each-cli-cfdba8bf5e4b

Angular:

Angular as you can see is large. It has everything you need from routing, templates, testing utilities and so on. The framework size is therefore huge and not suitable for lightweight applications.

React:

React is a JavaScript library and not a framework. This means you don’t get much out of the box, and have to use other libraries for routing and other needs. This makes React suitable for lightweight applications.

Vue:

Vue is even smaller and also suitable for light-weight applications. If you are looking for an extremely lightweight option, then Preact is smaller than Vue, and it is basically React, with some features stripped out.

Again, compared to Angular, there is a significant decrease in the size of the bundle making React more suitable.

Mobile Solutions

Angular:

Ionic

Ionic is a framework for developing hybrid mobile applications. It uses a Cordova container that is incorporated with Angular. Ionic provides a robust UI component library that is easy to set up and develop hybrid mobile applications with. However, the resulting app on a device is simply a web app inside of a native webview container. Because of this, the apps can be slow and laggy.

NativeScript  + Angular

NativeScript lets you build native mobile apps on both iOS and Android. It can be used with a variety of frameworks. If you know Angular, then you can use NativeScript with Angular to build native mobile apps.

The NativeScript core team works with the Angular team at Google to ensure NativeScript and Angular are integrated. With this you can create native mobile apps with good performance. The only drawback here is that NativeScript has to constantly be in sync with the latest developments in the Angular world. Since NativeScript and Angular are two different solutions coming from two different companies, we never know when NativeScript may stop support for building apps with Angular.

React: 

React Native

The mobile solution that was born out of React is React Native. It is used to build native mobile apps using JavaScript and React. Today many fortune 500 companies are using it for their mobile space.

It is backed by Facebook, and was open sourced a few years ago. It is essentially React code. A React developer can easily pick up React Native, since the code is all written in JavaScript and React. The only difference is that instead of web components, it comes with native mobile components for iOS and Android.

This is a promising solution to build native mobile apps

Vue:

Vue-Native

Vue has Vue-Native. The interesting thing about it is that, it is essentially a wrapper around React Native. Under the hoods, you need to setup React Native. This is not a stand-alone solution and cannot be used without React Native.

NativeScript + Vue

Just like NativeScript can be used with Angular, it can also be used with Vue. It enables you to build native mobile apps using NativeScript and Vue. Again, the drawback here is that NativeScript needs to constantly be updated to the latest development in Vue. And since they are coming from different teams and companies, we never know how long this support may last.

Today, React is the best choice, if you want to build mobile apps. React Native is ahead of the other options that are available to us from Angular and Vue.

Corporate Backing

Angular is developed and maintained by Google. Google uses Angular in several internal products as well as the Google Adwords application. This is one of the reasons, why Angular is trusted in the developer community.

React is backed by Facebook and was open sourced by Facebook in 2013. Facebook has a dedicated team of engineers who are working on React and making React better everyday. Since Facebook is heavily invested in React, many internal Facebook products are coded in React. With Facebook’s heavy involvement in React, the library has gained a lot of trust over the years.

Vue is not backed by any big corporation like React. Although Vue is not backed by big names, it has gained a huge name in the open source community. It is fairly new compared to React and is backed by a group of open source contributors.

Both Angular and React are backed by tech giants, which builds trust in the developer community.

Community and Developer Involvement

Let’s take a look at the open source community involvement in all the three frameworks to get a better idea on popularity, frequency of releases, etc. Take a look at this table below that compares them based on GitHub stats.

Something interesting to note here is that Vue, has the most number of stars among the three on GitHub. But it also has the least number of contributors. This means, people are interested in Vue, but it has still not gained the momentum that React and Angular has gained in the Open source community. React  has around 126k stars, which is a lot for an open source library. This shows people like React as well. In comparison to that, Angular has only about 40k stars.

React also has a significant number of contributors. There are over 1290 contributors who are contributing to React, which is much more than Vue and Angular.

The final statistic on weekly downloads is quite intriguing.  React has the most number of weekly downloads with a whopping number of 5,211,991. What is interesting is, Vue which is although new, comes second with 986,335 weekly downloads. You can notice here that Angular downloads are far less in comparison.

Based on the community and growth of frameworks, React is at the very top. Vue is liked by the community and upcoming. Angular on the other hand seems to be losing its spark and slowing down.

Verdict

JavaScript frameworks and libraries are evolving everyday. There is a lot to look forward to in the coming years. With respect to 2019, React is still at the top. And learning React will help you find a front-end job. Vue is upcoming, but it is young. Finding a job with Vue skills may take a while. Angular is still out there, and used by many companies and enterprises. Finding jobs with Angular skills will also be easy, but it is losing its spark. Developers are not eager to learn Angular, as much as much as they would like to learn React or Vue.

End of the day, you need solid understanding of any of these frameworks and JavaScript, to build solid front end applications. If you are new to React, and want to master it, I highly recommend Mosh’s course on Mastering React. This course will cover everything you need to be proficient at React.

If you enjoyed this post, please share it. And check back this space for more.

 

Adhithi Ravichandran is a Senior Software Engineer based in Kansas City. She is currently working on building mobile apps using React Native for critical healthcare scenarios. Adhithi is a regular conference speaker at various tech conferences. Adhithi graduated with a Masters degree in Computer Science from the University of Kansas and has been in the tech industry for over 7 years. She has worked on several technologies over the years, and one of her recent favorite is React Native.
Tags: , , ,

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts