Return to site

ANGULAR INTERVIEW QUESTION: What is AoT versus JiT compilations?⚙️

· ngInterview,fullstack

 

First, an Angular Application is composed of components and templates that a browser can't interpret directly (interpolations, *ngIf...), because it is not native JavaScript.

So, an Angular project must be first compiled before being executed in the browser.

And there are two kinds of compilation with Angular: AoT and JiT.

 

broken image

 

The compilation Ahead-of-Time (AoT) goal is to compile the components in one shot during the build 👷‍♂️ processes.

 

The compilation Just-in-Time (JiT) is used during coding. Angular compiles all the components in JavaScript's functions, during the application runtime 🏃‍♂️.

 

The advantages of AOT compilation:

👉 Faster ⏩: a lighter🪶 output and stronger performances, because the templates' compilation stage is not necessary since everything is done during the build.

👉Fewer errors❌: templates syntax errors are detected sooner (ex: method does not exist, variable not defined, etc.). Furthermore, AoT is a stricter compilation.

👉 More secure🔐: before the application be executed in the browser, the compiler AoT will transform the HTML templates in JS functions. In the end, there will be no more HTML to interpret, making the app more secure.

Nevertheless, this kind of compilation takes more time⌛ to finish.

During coding👨‍💻, we recompile the Angular app at every edit, and such compilation execution duration would be rebuking.

So during coding, you use Just-In-Time (JiT), used when you run "𝒏𝒈 𝒔𝒆𝒓𝒗𝒆".

You would use Ahead-of-Time (AoT), when you create the production build with the command "𝒏𝒈 𝒃𝒖𝒊𝒍𝒅".

 

𝐓𝐨 𝐜𝐨𝐧𝐜𝐥𝐮𝐝𝐞, 𝐰𝐢𝐭𝐡 𝐭𝐡𝐞 𝐀𝐨𝐓 𝐜𝐨𝐦𝐩𝐢𝐥𝐞𝐫, 𝐲𝐨𝐮𝐫 𝐀𝐧𝐠𝐮𝐥𝐚𝐫 𝐚𝐩𝐩 𝐢𝐬 𝐜𝐨𝐦𝐩𝐢𝐥𝐞𝐝 𝐝𝐮𝐫𝐢𝐧𝐠 𝐭𝐡𝐞 𝐛𝐮𝐢𝐥𝐝 𝐬𝐭𝐚𝐠𝐞👷‍♂️, 𝐦𝐚𝐤𝐢𝐧𝐠 𝐭𝐡𝐢𝐬 𝐜𝐨𝐦𝐩𝐢𝐥𝐚𝐭𝐢𝐨𝐧 𝐛𝐞𝐭𝐭𝐞𝐫 𝐟𝐨𝐫 𝐩𝐫𝐨𝐝𝐮𝐜𝐭𝐢𝐨𝐧 𝐞𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭.

𝐄𝐥𝐬𝐞, 𝐲𝐨𝐮𝐫 𝐚𝐩𝐩𝐥𝐢𝐜𝐚𝐭𝐢𝐨𝐧 𝐢𝐬 𝐜𝐨𝐦𝐩𝐢𝐥𝐞𝐝 𝐝𝐢𝐫𝐞𝐜𝐭𝐥𝐲 𝐢𝐧 𝐭𝐡𝐞 𝐛𝐫𝐨𝐰𝐬𝐞𝐫 𝐰𝐢𝐭𝐡 𝐉𝐢𝐓 𝐜𝐨𝐦𝐩𝐢𝐥𝐚𝐭𝐢𝐨𝐧, 𝐦𝐚𝐤𝐢𝐧𝐠 𝐭𝐡𝐢𝐬 𝐥𝐚𝐭𝐭𝐞𝐫 𝐜𝐨𝐦𝐩𝐢𝐥𝐚𝐭𝐢𝐨𝐧 𝐛𝐞𝐭𝐭𝐞𝐫 𝐟𝐨𝐫 𝐜𝐨𝐝𝐢𝐧𝐠.