Understand JIT and AOT in Angular

Are you able to explain JIT and AOT difference properly in your angular interviews,

Lets understand below:
JIT — Just in time compilation
AOT- Ahead of time compilation

This is compilation strategy which angular follows.
To explain this, we need to understand what is code compilation ?

Code compilation refers to converting your angular application template and typescript code into JavaScript code that browser can understand.

JIT (Just-In-Time) Compilation

When does compilation happen ?

• At runtime, in the browser, while the application is running.

How it works ?

• During development, Angular sends uncompiled HTML templates and TypeScript code to the browser.
• The Angular compiler (built into the app) compiles the templates into JavaScript in the browser when the app loads.

Pros:

• Faster build times (no compilation during the build process).
• Useful for quick iterations during development.

Cons:

• Larger bundle size (compiler is included in the app).
• Slower application startup, as the browser compiles templates on load.

It is generally used in development mode for faster builds and debugging.

// commands

ng build
ng serve

AOT (Ahead-of-Time) Compilation

When does compilation happen ?

• During build time, before the application is deployed.

How it works ?

• Angular compiles your templates and TypeScript code into JavaScript during the build process.
• The resulting code is optimized and doesn’t require the Angular compiler in the browser.

Pros:

• Faster application startup (precompiled templates).
• Smaller bundle size (because Angular compiler is excluded, code is already compiled).

Cons:

• Longer build times compared to JIT.

It is recommended for production builds for better performance and smaller bundles.

ng build --prod

Summary:

• In JIT, the Angular app ships with the compiler to compile code in the browser during runtime.
• In AOT, all templates and code are precompiled into JavaScript at build time, ensuring faster, smaller, and more secure applications.

Thanks for reading !!

I hope you learnt something today, Reach me out here for more discussion related to angular.

www.linkedin.com/in/bittukumar-web