What is AOT and JIT Compiler in Angular

A program written in a high-level language is translated into machine code or a low-level language by a piece of software called a compiler. HTML templates are the primary building blocks of an angular application, and among its components are numerous TypeScript files, unit testing and configuration files are present. The browser cannot immediately read the code when we run over an application, so we must compile our code.

What is an AOT compiler?

Ahead of Time (AOT) is a system-dependent method for converting higher-level or middle-level language into native machine code. The Ahead of Time compiler transforms your code during the building project of your angular application before it is downloaded and executed by our browser. For an ahead-of-time compiler, the default setting for the compiling option is true.

Working of AOT compiler

Our Angular project is built using Typescript, HTML, CSS, and several style files. Our complete code is packed into one folder where all the HTML files and JavaScript files are kept. The command used to pack them into a bundle is ng build -prod or ng build.

Now, Angular builds source code using the angular compiler. Now, Angular builds source code using the angular compiler, and they do so in three stages:

• Code analysis,
• Code generation,
• Template type checking.

The final bundle size will be considerably less than the bundle size produced by the JIT compiler.

Advantages of AOT compiler

• Because the browser can render an application immediately without waiting for the code to be compiled, it can render components more quickly than if the code were to be compiled at runtime.
• Every time we build a new component in our project, we don't need to export the complete HTML templates again.
• It might make your application smaller in size.
• The compiler that runs ahead of time finds template errors earlier. Before users can see them, it finds and reports template binding issues during the build process.
• AOT offers superior security. Long before they are given to the client display, it converts HTML elements and templates into JavaScript files. No HTML or JavaScript expression is needed, and there are no templates to read. This will lessen the likelihood of injection-related assaults.

What is JIT compiler?

The just-in-time compiler (JIT) provides compilation during runtime, just before program execution. In simple words, code gets compiled as desired rather than at build time. Each file is individually compiled by the just-in-time compiler, which is primarily done in the browser. After making code changes, we don't need to rebuild your project. A just-in-time compiler works well when our application is being developed locally.

It will take less time to compile because the majority of the work is done on the browser side. Not all code is immediately compiled while using Just in time. The function or component will then be compiled if it is required by our project and is not present in the source code.

This procedure will help your app render more quickly and lessen the load on the CPU.

Comparison of AOT and JIT compiler

• Because your application needs to be compiled at runtime, JIT loading takes longer than AOT loading. At the same time, AOT loads significantly more quickly than the JIT because your code has already been compiled there at build time.
• JIT works better in development mode, whereas In the case of Production mode, AOT is very useful.
• The compiler is generally downloaded by JIT and before display or rendering on the screen it compiles the code first. And if we talk about AOT, then AOT doesn't need to compile at runtime because it already did so while our application was being built.
• For JIT, the syntax is ng build OR ng serve, and for AOT syntax is ng build --aot.
• In JIT, the bundle size is larger than in AOT. Whereas AOT's bundle size was optimized, and as a result, it is now half as big as JIT's.
• In JIT, at the moment of the display, template binding errors might be detected. But in AOT, the template problem can be found when creating your application.