the Ivy rendering engine in Angular - cover image

Ivy Rendering engine in Angular

With the release of Angular 6, Google has officially announced that it is also recreating the rendering engine.

Ivy is the next generation rendering pipeline for Angular.

Why rebuild the Angular rendering engine?

Ivy is being built to solve the most common problems of developers. Google has been hearing the same & same reviews & the issues that the angular developers face while developing angular applications & working on these issues in the Ivy project. The Ivy rendering engine aims at providing:

  • Smaller bundle sizes
  • Faster application loads & performance (even on slow mobile connections)
  • Simpler application architecture that is easy to debug even when the application grows larger

The major priority of Ivy developers is the backward compatibility. The Ivy engine should seamlessly render older angular projects with 0% modifications.

How are they upgrading to Ivy?

With the aim of providing backward compatibility to the existing angular applications to render with Ivy, Google will be using the Ivy rendering engine internally to its own over 600 angular apps. When they will see all running smoothly, they will be making the Ivy engine the default rendering engine.

Tree Shaking in Ivy

Ivy engine is designed to be tree shakable¬†… but what does this term mean?

Tree Shakable means that you only pay for the code that you are using. In other words, if you are not using angular pipes in your angular app, the pipes module will not be included in the final bundle. Ivy developers are working on intelligently removing the dead code from the final bundles.

Faster & Simpler applications

Ivy has the ability to hot reload only the component that is changed. With a change in the component, there will be no rebuilding of the complete application, instead only the individual component will be compiled in isolation & reloaded. The final bundle produced will also be created in chunks thus making the first load faster.

Google has claimed to reduce the bundle size (along with gzip compression when transferred over internet) of an older Angular Hello World app from 35kb to around 3kb.

Earlier, the angular code was compiled with the flow:
Older Angular rendering pipeline block diagram

Now, Ivy will be compiling the template code with the following flow:
Angular Ivy rendering pipeline block diagram

As we can see, the compilation pipeline is also smaller than the earlier one. As a result, the compile performance will increase.

Meanwhile, the developers can try the Ivy engine in their Angular apps by adding enableIvy: true to src/tsconfig.app.json


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.