Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation in Angular

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

JIT - Compile TypeScript just in time for executing it.

• Compiled in the browser.
• Each file compiled separately.
• No need to build after changing your code and before reloading the browser page.
• Suitable for local development.

AOT - Compile TypeScript during build phase.

• Compiled by the machine itself, via the command line (Faster).
• All code compiled together, inlining HTML/CSS in the scripts.
• No need to deploy the compiler (Half of Angular size).
• More secure, original source not disclosed.
• Suitable for production builds.

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 been compiled for angular as well. Now, this compiled js code is compiled by the browser again so that the html can be rendered. But, the catch here is that the features of angular have already been taken care of 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

JIT (Just-in-Time Compilation)

Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at runtime.

ng build
ng serve

AOT (Ahead-of-Time Compilation)

Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time.

ng build --aot
ng serve --aot

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,

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

At the end fo the day, AOT(Ahead-of-Time) and JIT(Just-in-Time) do the same things. They both compile your Angular code so it can run in a native environment (aka the browser). The key difference is when the compilation happens. With AOT, your code is compiled before App downloaded in Browser. With JIT, your code is compiled at runtime in the browser.

Here is comparison:

Benefits of AOT:

• Faster startup as Parsing and Compilation doesn’t happen in the Browser.
• Templates gets checked during development(which means all the errors which we see in the javascript console in the running apps otherwise will then be thrown in our build process).
• Smaller File Size as unused Features can be stripped out and the Compiler itself isn’t shipped.

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.

JIT compiler we use during development of the angular project. In this compilation(TS to JS conversion) happens during the runtime of the application. Where as AOT is used during building the application code for the deployment of the application in production, that time we build our application code using ng build --prod command which generates a folder called webpack, webpack contains the bundle of all the files(HTML, CSS and typescript) in compressed javascript format.

The size of the webpack folder generated for the production is far less than the folder generated for the development environment (using command ...ng build), because It does not contain the compiler inside the webpack folder, It improves the performance of the application.