Renderer2: Angular View Engine

What is a View Engine ??

View Engine is responsible for compiling the components so that they can be consumed by the browser. In Angular, we write our components using TypeScript and it cannot be run directly in browsers and for this purpose we require View Engines which would convert TS into JS.

What is Renderer2 ??

Renderer2 is Angular’s View Engine, it was introduced starting with Angular v4 to boost performance of Angular applications. It is responsibility of view engine to compile components to JS and HTML.

Responsibilities of View Engine

1. Template Parsing
2. Tree-Shaking
3. Compilation

Template Parsing

Every angular component has to go through a 4 step process to be rendered in the DOM by browser.

Firstly, all the decorators are stripped and their configurations are stored in metadata.json file.

The template HTML is then converted into JavaScript instructions that are then used by the Angular Interpreter to understand how to display them in the DOM.

Example:

Here the HTML is processed to generate instructions that contains all the details about the HTML.

All the nodes are observed to check presence of listeners, pipes, directives, etc. and then corresponding actions are attached to the rendered elements.

Tree Shaking

Tree Shaking is a process to remove dead code from the bundle. Renderer2 does a static analysis of the code, i.e., it doesn’t actually execute the code and then determine which part of code to be included in the bundle, but rather include all that has been mentioned in the code at least once.

Example:

When above code is analysed by Renderer2, getSomeData() will be part of the final bundle, while logically it should not be because, getSomeData() will never be called due to falsy condition.

Let’s take another case into consideration:

Flow until Angular v5

• Library Module imports Library Service (for exposing interface and providing implementation)
• Application Component imports Library Service (for consuming interface)
• Application Module imports Application Component
• Application Module imports Library Module (for configuring which implementation to inject)

In above case, LibService will be included in the bundle even if no component uses it because it has been included in providers of LibModule.

Flow starting from Angular v6

• Library Service imports Library Module
• Application Component imports Library Service
• Application Module imports Application Component
• Application Module imports Library Module

In new flow, LibService will not be included in bundle until it is being required by any Component because the scope of service is specified by the service itself not by the module.

Compilation

Renderer2 offers two variants of code compilation:

1. Ahead Of Time Compilation (AOT)
2. Just In Time Compilation (JIT)

In JIT, the source code and Angular compiler are sent to browser and the whole template parsing process takes place in the browser environment.

In AOT, the template parsing process takes place at the developer end and thus causing a much smaller and faster build.

Some points of difference between AOT and JIT compilation:

You can also use “ng build — aot” or “ng serve — aot”. But, it doesn’t really make any sense to use AOT in ng serve or ng build. “ng build — prod” by default creates an AOT build.

That’s it, folks. Thanks for reading this far.

Follow me on Medium: https://medium.com/@immanubhardwaj

Follow me on LinkedIn: https://www.linkedin.com/in/imanubhardwaj