Just In Time vs Ahead Of Time Compilation

A very big advantage which we can gain from an Angular app is Ahead of Time compilation. What is Ahead of Time compilation? Basically Angular offers two approaches for compiling our code JIT(Just in Time) and AOT(Ahead of Time). Here, compiling the code does not mean compiling Typescript to Javascript because that is done by the CLI but Angular also needs to compile our templates. As we write our templates in HTML code in the template files and Angular parses these files and compiles our HTML code into Javascript. The only reason for compiling our templates is that accessing Javascript is faster than accessing the DOM in the browser. So, the main reason for this is performance improvement. Besides, we gain some other benefits too but the main purpose is performance boost. Now, Angular can do this compilation in two different places using two different approaches.

Just in Time Compilation

Just in Time is the default compilation followed by Angular. Here, we develop our code then we ship it which is preformed when we run “ng-serve”, there it constantly gets compiled and served on our development server which is same as to ship it to production and then we view it in the browser and the app gets downloaded and once it is downloaded Angular bootstraps the application and in this step, it also parses and compiles the templates because that’s the first time it has time to do so, before that our app never ran. That is the default approach that Angular follows while compiling our code. But the good thing is that Angular allows us to change this procedure by using AOT compilation.

Ahead of Time Compilation

While using AOT compilation we still have a development step but after development we allow the Angular to compile the templates because after we are done developing our code, our templates are finished too and our templates will also contain dynamic content but Angular will know where we use string interpolation and so on and it will compile these features into javascript too so we don’t loose the dynamic nature of our templates. In other words we can say that we only allow Angular to understand our templates at a earlier point of time. Now, our code is already compiled before shipping it to production and then we download it to the browser and run it there. So we compile at a earlier point of time “Ahead of Time” when we run the app in the browser. Now this approach has a couple of advantages.

Advantages of AOT compilation

• 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.