Ivy – A New Rendering Engine for Angular

Ivy is among the most important step taken in Angular history in terms of view engine. It totally changed the way angular framework works internally, without changing the way angular applications are written. We can say that Angular Ivy is the new revolution.

Introduced with Angular 8, Ivy is a new view engine and rendering pipeline. In other words we can say that the view engine of Angular translates our written Templates and Components into the simplified HTML and Javascript that can easily be read and displayed by a browser, i.e, the variables in template and data bindings get rendered to the page without any issue with correct data.

Angular 2+ Engine Incarnations

There has been a lot changes in Angular compiler. In version 4 of Angular, compiler was replaced with a view engine. Version 8 of Angular introduced Ivy, a new view engine that is smaller, faster and simpler.

Not just the bundle size but the compilation process is also smaller, faster and simpler and this is because of Locality and tree-shaking.

We can say that Angular Ivy is completely a new compiler (and runtime) that can help achieve:

● Better incremental compilation leading to improved build times
● Improved build sizes, which is possible through generated code which is more compatible with tree-shaking.
● Reveal innovative potential features that include

1. Higher code components or Metaprogramming.
2. Lazy loading of component not modules.
3. Novel change detection system that is not based on zone.js.

What is Locality?

Angular 8.0 Ivy compiles one file at a time and this process is termed as Locality. The output generated is only based on component and its template, dependencies are not considered.

Compilation of one file at a time means tiny sets of instructions, which also allows you to do incremental builds. This was not possible with Renderer2 because it required to do a static analysis of complete code and based on which it generates metadata.json file that then was used to generate the compilation instructions. The template data generated was then sent to the Angular interpreter where it will be translated into DOM readable data. Ivy makes this lengthy process faster; it compresses the above steps and then the template HTML is converted into instructions that DOM can read.

How Locality is Beneficial?

● Speedy compilation and eradication of metadata.json step

● The Ivy simplified process enables library creators to ship AoT code to npm as a standalone library.

● It brings equality between AoT (Ahead of time) and JIT (just in time); earlier the template code that worked well with JIT could not be compiled with AoT, which is possible now.

● Ivy gives more opportunity for meta-programming, like generating higher order components, ability to dynamically generate components, modules, or pipes. Not every developer will need these advanced functionalities initially, but it is a step to make Angular a more refined platform for future.

Tree-Shaking

The new view engine Angular Ivy has been designed with tree-shaking in mind. Now you must be wondering what does “Tree-shaking” means? Here we go, tree-shaking is the removal of unused pieces of code that leads to smaller bundles and quicker load times.

Tree-shaking makes use of static analysis that means it actually does not run your code. Now, the benefit of this is that it considers all possible scenarios and includes everything needed in the bundle.

Let’s understand the tree-shaking through an example. Suppose you have imported a function, which is hidden behind a false conditional. This function is never called, but will still get included in the bundle. Tree-shaking removed that hidden function which is anyway never called and is of no use.

Ivy ensures that anything that you are not using something in Angular, doesn’t get included in the bundle.

Angular’s tree-shaking features include:

Template Syntax	Dependency injection	Content projection	Structural Directives
Lifecycle Hooks	Pipes	Queries	Listeners

After understanding, the Locality and tree-shaking and the benefits they bring along we can say that they are game-changers. When both are combined, we get:

● Smaller builds
● Quicker rebuild times
● Faster development
● Simplified pipeline
● Code in human readable format

This drastic simplification of Ivy pipeline makes templates a part of the stack trace. You don’t have to deal with cryptic error messages due to broken template syntax. You will know the exact line number where the error is. You can easily be able to set breakpoints in your templates for debugging. Doesn’t this sounds a great relief for developers?

The Bottom Line

Angular 8.0 is still evolving and might bring more potential features that will be loved by developers. The Angular Ivy performance is making developer community happy. By now you must be familiar with Ivy and its benefits. Do you want to give it a try now?