Ivy Rendering engine in Angular

July 30, 2019

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?

  • 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 backward compatibility. The Ivy engine should seamlessly render older angular projects with 0% modifications.

How are they upgrading to Ivy?

Tree Shaking in Ivy

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

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:

Now, Ivy will be compiling the template code with the following flow:

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

You Might Also Like