Benchmarking Angular, React and Vue for small web applications

January 08, 2019 0 Comments

Benchmarking Angular, React and Vue for small web applications

 

 

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.

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.

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

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

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


Tag cloud