re 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 - not just an “Hello world” example, but a working application with a couple of features and screens.
2. Standardized - A project that has the same level of complexity and functionality. Use the same APi, has the same markup, styles etc.
3. Trusted by community - Ideally this project should be built as open source and approved by other developers to show the impartiality of the experiment.

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.

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.

Total page transfer size

The total transfer size of all assets on a page.

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.

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 (detailed)

Summary

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.