Angular 2 : Just-in-Time (JiT) vs Ahead-of-Time (A

Question

I was referring this documentation and came across the compilation concept. One can use either JIT or AOT compilation. However, I found it very brief and need to know following points in details,

• Differences between those two techniques
• Recommendation about when to use what

Answer 1

JIT (Just-in-Time Compilation)

AOT (Ahead-of-Time Compilation)

Answer 2

Found a pretty good explanation here ..

TLDR;

Essentially we are compiling the code twice with angular2 apps, once when we convert TS to JS and then when the browser converts JS to binary.

While we cannot control the latter, we can however control when the compilation from TS to JS is performed.

With angular2, if you go with JIT (which is default), both the compiles happen after the code is loaded in the browser (i.e. TS -> JS -> binary). Not only is it an additional overhead to do the TS -> JS compilation on the fly on the browser, but also, the angular2 compiler is almost half the size of the angular2 package so if we avoid this, we can reduce the size of the payload significantly.

AOT precomplies TS code to JS, reducing the compilation time as well as the size of the code, by eradicating the need for the angular compiler which makes up 50% of the code

Answer 3

JiT (Just in Time) Compilation

The name itself describes the working, It compiles the code just in the time of loading the page in browser. The browser will download the compiler and build the application code and renders it.

It will be good for development environment.

AoT (Ahead of Time) Compilation

It compiles all the code at the time of building the application. So the browser doesn't want to download the compiler and compile the code. In this method browser can easily render the application by just loading the already compiled code.

Can be used in the production environment

We can compare the JiT and AoT compilation as below

Answer 4

There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries.

Answer 5

Although there are some answers but I would like to add some of my findings as well, because I was really confused with what actually is being compiled as in all the cases, TS --> JS conversion happens. I am taking some para from Jeff's blog as a reference.

JIT

The TS code written by the developer is compiled to JS code. Now, this compiled js code is compiled by browser again so that the html can be rendered dynamically as per the user action and accordingly codes for angular ( for components, change detection, Dependency Injection) are also generated at runtime .

(The browser compiler is what takes an application’s directives and components, along with their corresponding HTML and CSS, and creates component factories to quickly stamp out instances with all of their view creation logic.)

When an Angular 2 application is bootstrapped in the browser, the JIT compiler performs a lot of work to analyze the components in the application at runtime and generate code in memory. When the page is refreshed, all the work that has been done is thrown away, and the JIT compiler does the work all over again.

AOT

The TS code written by the developer is compiled to JS code ,this js has already has been compiled for angular as well. Now, this compiled js code is compiled again by browser again so that the html can be rendered. But, the catch here is that the features of angular has already been taken care by AOT compiler and hence the browser don't have to worry much about component creation, change detection, Dependency Injection. So, we have :

Faster rendering

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

Fewer asynchronous requests

The compiler inlines external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.

Smaller Angular framework download size

There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

Detect template errors earlier

The AOT compiler detects and reports template binding errors during the build step before users can see them.

Better security

AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

---

Remaining differences are already covered in bullet points of Benyamin, Nisar & Gaurang .

Feel free to correct me

Answer 6

Benyamin and Nisar mentioned some good points here. I will add to it.

While theoretically, AOT looks an attractive option than JIT for production purpose but I had my doubt whether AOT really worth it!

Well, I found nice stats by Jeff Cross and it does prove that AOT significantly reduces the bootstrapping time of the app. Below snap from Jeff Cross' post will give you quick idea about it,