What are AOT & JIT Compiler in Angular ?

#angular #typescript #javascript

In this article, we will cover just-in-time and ahead-of-time compilation. We will look at it in the context of an Angular project, but the principles can be applied to any front-end framework.

What is JIT
How does JIT work
What is AOT
How does AOT work
JIT and AOT Comparison

What is JIT

According to Wikipedia:

In computing, just-in-time (JIT) compilation (also dynamic translation or run-time compilations) is a way of executing computer code that involves compilation during execution of a program — at run time — rather than prior to execution.

Or stated more simply, it is that the code gets compiled when it is needed, not before runtime.

How JIT works

In the beginning, a compiler was responsible for turning a high-level language into object code (machine instructions), which would then be linked into an executable.

A just-in-time (JIT) compiler is a feature of the run-time interpreter, that instead of interpreting bytecode every time a method is invoked, will compile the bytecode into the machine code instructions of the running machine, and then invoke this object code instead.

Flow in an Angular Project

Use Typescript, HTML, CSS (SCSS or SASS) to develop an Angular application.
Use ng build to build source code into bundles. This includes assets, JS files (modules in the case lazy load and js map, vendor, and polyfill), index.html, and CSS.
Then we build this into a war file to deploy by jboss or deploy directly by using heroku or another hosting that supports Node. Then we map this host to our domain by a CNAME.
The end-user accesses our web application via the domain. The browser will download all assets, including the HTML, CSS, and JavaScript that is needed for the default view.
Angular bootstraps the application
Angular will go through JIT compilation process for each component in the application. Then the application gets rendered.

Note

In JIT, not all the code is converted into machine code initially. Only code that is necessary (used immediately) will be converted into machine code. Then if a method or functionality called and is not in machine code, then that will also be turned into machine code. This reduces the burden on the CPU and makes the app render faster because it only uses what is needed.
You can debug in the browser during implementation because the code was compiled at JIT mode with a map file. This help you can see and link to source code directly on inspector.

What is AOT

According to Wikipedia:

In computer science, ahead-of-time compilation (AOT compilation) is the act of compiling a higher-level programming language such as C or C++, or an intermediate representation such as Java bytecode or .NET Framework Common Intermediate Language (CIL) code, into a native (system-dependent) machine code so that the resulting binary file can execute natively.

This seems complicated and hard to understand. He is how you can think about it:

An ahead-of-time (AOT) compiler converts your code during the build time before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

How AOT works

Use Typescript, HTML, CSS (SCSS or SASS) to develop an Angular application.
Use ng build --prod to build source code bundles which includes assets, JS files (main, vendor, and polyfills), index.html, and CSS. In this step, Angular uses the Angular compiler to build source code and they do it in 3 phases which are code analysis, code generation, and template type checking. In this step, the bundle size will be smaller than bundle size when we build by JIT mode.
Then we build this into war file to deploy by jboss or deploy directly by using heroku or another hosting that support Node. Then we map this host to our domain using a CNAME.
The end-user accesses our web application via the domain. The browser will download all assets the including the HTML, CSS, and JavaScript that is needed for the default view.
Angular bootstraps and the application gets rendered.

JIT and AOT Comparison

The main differences between JIT and AOT in Angular are:

Just-in-Time (JIT), compiles your app in the browser at runtime.
Ahead-of-Time (AOT), compiles your app at build time on the server.

JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands. This is for development.

For AOT compilation, include the --aot option with the ng build or ng serve command. Another ways is using --prod which by default production mode is configured in Angular.json with AOT is set to true.

Summary

JIT and AOT are two ways to compile code in an Angular project. We use JIT in development mode while AOT is for production mode.

We can easily implement features and debug in JIT mode since we have map file while AOT does not. However, The big benefit when we use AOT for production are reducing bundle size for faster rendering.