HOMEarrowBLOGarrowAngularJS to Angulararrow

Angular vs AngularJS: Performance Comparison

Angular vs AngularJS: Performance Comparison

AngularJS to Angular

September 24, 20212 min read

614dfc3ccbe5ba1059dcc555_6073d5297b1e6def995d0bee_037d7278-403c-4142-8838-6f8e3c8049d4.webp

Are you looking for a performance comparison of AngularJS and Angular? Should you make the migration? In this article we will try to answer the question is new Angular version performs better than old AngularJS.

Preparation

Test app

To get a clear picture of which angular performs better we need a test application written on a different version of angular framework. Also we need to cover next requirements to make our experiments close to real life experience.

  1. Real World App -
  2. Standardized -
  3. Trusted by community

Fortunately for us such a project is already done and being tested for several years by Eric Simons. His RealWorld shows you how the exact same real world blogging platform is built using all popular frontend and backend frameworks. As they use the same API spec it could be used as a perfect solution for testing performance of real applications. The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication. For comparison were taken 3 versions from the Real World repository: Angular 9, Angular 7 and AngularJS. Our goal is to find out if the Angular team achieved better performance with the newer versions of Angular.

Collect metrics

After considering an application to test we need to define what metrics we look at and how to collect them. To measure the performance we will use sitespeed.io. It is an open source pack of tools that helps to automize and standardize the process of collecting benchmark data from websites.

Performance overview

First visual change

The time when content of a page is visible to the user for the first time. Lower is better. The faster the page is rendering the more chances to attract end users to stay on the page.

First visual change Angular

First visual change Angular 9

First visual change Angular

First visual change Angular 7

First visual change Angular

First visual change AngularJS

Speed index

The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on the size of the view port. It was created by Pat Meenan and you can check the full documentation here.

Speed index Angular

Speed index Angular 9

Speed index Angular

Speed index Angular 7

Speed index Angular

Speed index AngularJS

Total page transfer size

The total transfer size of all assets on a page.

Total page transfer size Angular

Total page transfer size Angular 9

Total page transfer size Angular

Total page transfer size Angular 7

Total page transfer size Angular

Total page transfer size AngularJS

Javascript content size

The javascript size unpacked. Winner is Angular 9, the last version of Angular on the current moment, which use new render compilier Ivy that highly decrease the bundle size.

Javascript content size Angular

Javascript content size Angular 9

Javascript content size Angular

Javascript content size Angular 7

Javascript content size Angular

Javascript content size AngularJS

Visual readiness

Visual readiness is the time between the first visual change and the last visual change within the viewport. It is calculated by analyzing a video recording of the screen.

Visual readiness

Visual readiness angular

Angular 9Visual readiness

Visual readiness angular

Angular 7Visual readiness

Visual readiness angular

AngularJS

Visual readiness (detailed)

Visual readiness Angular

Visual readiness (detailed) Angular 9

Visual readiness Angular

Visual readiness (detailed) Angular 7

Visual readiness Angular

Visual readiness (detailed) AngularJS

Summary

total summary

Total Summary of Performance comparison of Angular 9/Angular 7/AngularJS

Overall testing shows that newer versions of Angular performs better in most cases. The most important result is the Speed Index in which Angular 9 achieves under 1s. This metric is very important for user experience, because users will prefer to use light and fast apps to those that work slow. Also Angular team did a great job on optimizing the final size of the bundle, despite optimizations like zipping which available on both AngularJs and Angular - new Angular gives us various tools during development such as lazy loaded modules. This helps to keep the code base clean and scalable. ‍

If you are looking for top developers for angular migration or just angular development - feel free to contact us.

author

ABOUT THE AUTHOR

Alex Vasylenko

CEO at The Frontend Company, Founder of Digital Business Card

Alex Vasylenko is the founder of The Frontend Company, DBC and several other successful startups. A dynamic tech entrepreneur, he began his career as a frontend developer at Deloitte and Scandinavia's largest banking company. In 2023, Alex was honored as one of 'Top 10 Emerging Entrepreneurs' by USA Today.

Follow the expert:linkedininstagramx

RATE

Rate this article please

This will help us provide more useful information.

empty star
empty star
empty star
empty star
empty star

74 ratings, average 5 out of 5

LEARN MORE

The latest articles