Benchmarking Angular, React and Vue for small web applications
Abhay SrivastavBlockedUnblockFollowFollowing
Jan 8
Introduction
If you are a front end developer, at some point in your career you might have chosen a javascript framework, for your project. And most probably the options would have been below three
- Angular
- React
- Vue
There are lot of articles and expert talks on this topic, and everyone has their verdict. But in this article i’ll take more practical approach to compare these 3 frameworks by creating a simple application using each of them.
- Tip : Combine your component-based framework with tools like Bit to turn your components into building blocks you can easily share, use and sync across your projects and apps- to build faster. Give it a try.
Sample application (Movies of 2018)
“Movies of 2018" Application https://abhay07.github.io/movieAppVue/
Project description Application makes an api call, to get the movies having the word “Love” in their title, in the year 2018 and displays them in tabular format. You can sort the movies according to year and name. Below are the links to the application hosted on Github.
Angular
Link: https://abhay07.github.io/movieAppAngular/
React
Link: https://abhay07.github.io/movieAppReact/
Vue
Link: https://abhay07.github.io/movieAppVue/
Comparison criteria
We’ll compare these application on below criteria
- JS bundle size: Javacript bundle size is the only resource that differs for the application in each framework. Images, CSS, and other resources are same.
- First Contentful paint: First Contentful Paint (FCP) measures the time from navigation to the time when the browser renders the first bit of content from the DOM.
More info on FCP: https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint
Let’s get on to the comparison.
JS bundle size
Angular’s js bundle size is almost double of React and Vue.
React and Vue’s bundle sizes are very close but with Vue having the most light weighted bundle, Vue is the winner.
First Contentful Paint (using Lighthouse)
In layman terms, it is the time taken to actually see something on the screen. Below are the comparison. These are taken using lighthouse audit.
CPU and Network throttling settings : Fast 3G, 4x CPU slowdown
Angular
Angular Lighthouse audit
React
React Lighthouse audit
Vue
Vue lighthouse audit
Vue and React performed much better with 1.0 s as First Contentful Paint time than Angular ’s 1.5 s
More about Lighthouse https://developers.google.com/web/tools/lighthouse/#devtools
Load time performance (using Chrome dev tools)
It is the time taken for the first render, without the api wait time.
CPU and Network throttling settings : Fast 3G, 4x CPU slowdown
Angular recording summary
React recording summary
Vue recording summary
Excluding idle time from the chart, following is the time taken for first render
React and Vue are very close, but Angular took almost double time for first paint. Here React is the marginally winning over Vue by 10 ms.
More about load performance analysing with Chrome dev tools: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#record-load
Learning curve
Adding one more criteria for comparison. This is solely my opinion as a developer. Vue is easiest to learn, React takes a little time to learn, and Angular has the steepest learning curve. If I had to order in terms of ease of learning. They’ll be as below.
Vue > React > Angular
Conclusion
Taking each metric into account, i choose Vue as the winner having lightest bundle size, faster “first contentful paint time” and easiest to learn.
If you want to make your own analysis, below are the source codes and links to the application.
Angular
Code: https://github.com/Abhay07/movieAppAngular
Website: https://abhay07.github.io/movieAppAngular/
React
Code: https://github.com/Abhay07/movieAppReact
Website: https://abhay07.github.io/movieAppReact/
Vue
Code: https://github.com/Abhay07/movieAppVue
Website: https://abhay07.github.io/movieAppVue/
Please feel free to comment below and ask me anything! I’d be happy to talk. Thanks for reading 
