Ez Pz Developement

Posted on Jul 26, 2023 • Originally published at abderrahmanems.Medium on Jul 26, 2023

Ivy the Angular Compiler.

I'm writing this blog post to summarize what I have learned about Ivy, the angular compiler, after reading some blog posts and watching talks by different software engineers and developers. Some of them are in the main team that works on angular.

A compiler for a frontend framework why?

When I first heard about the Ivy Angular compiler it was something weird that I could not understand, after doing some research I found out that there are a lot of other compiled frontend frameworks like Svelte, and Solid.

Based on what I have learned, we can filter these frameworks based on 3 factors which are:

Compiling approaches: some frameworks compile everything , while others require almost no compilation , the last mentioned approach makes the framework do most of the work on runtime, while some other frameworks use a hybrid of these two approaches.
The language used in compilation logic: some frameworks use Javascript or Typescript as logic for their compilation process, while others use Js alternatives like ELM or MINT.
Templating languages: some use an HTML-first approach, according to Ryan Carniato the language treats the source file as an enhancement of HTML, there is also another type of templating language which is JSX.

Another reason why it is a good idea to have a compiler for a frontend framework is the performance that comes with it, it produces more optimized and faster code, a faster dom-manipulation and startup when running compilation, and it also reduces the bundle size.

In addition to the last-mentioned cons, a compiler optimizes and reduces the possibilities for a framework at runtime.

No one can argue that even with all of this optimization, a framework can not be faster than vanilla js, but it is less verbose, and it is easier and faster to write and create complex applications using a framework than using Js alone.

Ivy compiler as an example

Ivy is another rewrite of the Angular compiler and runtime to achieve a better build time, and bundle size, and maybe to get rid of the zone.js when it comes to change detection, and more optimization in the generated code by using some principles like :

Tree shaking: the process of removing unused and unreferenced code using static analysis
Locality: an approach to make build and compilation go faster by compiling each component independently.

So the main goal of Ivy is to turn these templates which use the declarative coding approach and turn it into imperative JS/TS code, this includes generating a code from the templates documents, adding a change detection mechanism, and applying the changes when they happen.

Ivy can do his job using a JIT or AOT approach, both of these approaches have some advantages and disadvantages I recommend checking this post to understand more about JIT, for AOT I recommend this one.

Angular JIT Compiles your application in the browser at runtime it was the default approach until Angular 8, while AOT run _ngc c_ompiles your application and libraries at build time, it is the default starting in Angular 9.

How this compiler work

Ivy compiler architecture was inspired by Ts compiler Architecture, while the typescript compiler has 3 steps (Program creation, type checking, and Emit), and the Angular compiler has two additional steps Analysis and Resolve.

Program creation: in this step angular tries to discover all the file resources to understand the program (app or library), starting from tsconfig.json, and then expand and discover all the other files, in addition to what typescript compiler do angular team has customized this step by adding some more features and code to make it compatible with what an Angular dev need, it is because of this customization developers can use libraries like ng factory.
Analysis: the compiler will go through all the classes in the files, find all the ones that are decorated with an Angular decorator, and try to understand each component and directive in isolation, in this step the compiler does not have an idea about which modules this components belongs to.
Resolve: try to understand everything about the library or the app as a whole, in this step the compiler will try to find each component module, do some optimization, decisions, and handle errors, he also tries to understand the structure of the project.
Type Checking: its type script time to check if there are any errors in our code.
Emit: this step is the most expensive one where the Angular compiler generates code js for each class that has an angular decorator.

Another cool feature that Ivy has is template type checking, what can this feature do is to throw an error and show you the exact place of the error in the template ( by line and columns), according to Alex Rickabaugh this was something tricky to add.

in the end, I recommend watching Alex Rickabaugh's amazing talk about the ivy compiler, to get more about ivy, and go deeper into how the Angular compiler work.