Angular — What is AOT vs. JIT compilation, and how it works?
This blog discusses the Angular Compiler and evaluates the Just In Time (JIT) and Ahead Of Time (AOT) compilers and the best use cases for each. We are keeping this short journey of reading to the most accessible level so beginners can have a good grasp on understanding the compilers we’re discussing. First, however, some basic understanding of angular build is recommended.
Introduction:
Simply put, Angular Compiler (aNGular Compiler or ngc) is the tool that compiles angular programs and their libraries.
Ahead Of Time Compiler (AOT):
The Ahead Of Time Compiler converts all your Angular HTML and Typescript code to Javascript. That code is then downloaded by the browser and executed. In this type of compilation, the code is already compiled before it is executed for running in the browser. This compiling of the application provides a faster rendering in the browser.
Just In Time Compiler (JIT):
Just in time compiler converts the HTML and the typescript code at runtime; Instead of compiling the entire code at once, it compiles each code when the relative/respective component or a specific part of the application is called and is interpreted by the browser’s interpreter. So, in a way, we can say that JIT compiles the application as it is being executed in the browser.
What settings come out of the box:
You can manually choose what Compiler you want to use. By default:
You can change the compiler option through the angular.json file. Based on your angular version, aot property is set to true by default. However, you can turn it to false to enable the JIT compiler.
How AOT Works:
For a moment, let’s consider Angular as the home of our project. In this home, we have some rooms (HTML) where the entire structure of our house is set. Then, to give this room some aesthetics, we have our decor (styling), and finally, to help this entire view stand on a structure, we’ve got the building structure (components).
We use typescript, HTML, and stylesheet to develop our angular project. To build this application, we use ng build to build our source code into multiple bundles that consist of various JS files, an index.html file, and an assets folder.
Now our compiler starts building the source code. This process has three steps:
- code analysis,
- code generation and
- template type checking.
At the end of this process, we’ll have our build ready that has the bundles and asset files discussed previously.
Once this build is complete, you’d want your clients to access it, so naturally, you deploy it to some domain.
Once the client reaches out to that domain, all of these generated files are downloaded into their browser and loaded at once, and then the client goes through your application.
All the files are ultimately rendered, and the client can browse through your application with everything pre-loaded.
How JIT works:
Like AOT, the same process is for building the application, but once the client opens the domain on their browser, the JS files, & assets are retrieved from the server, and the initial components are loaded in the browser at run time. Once the browser has the core files it needs to run the application, it compiles the JS code into a binary format, which the browser’s interpreter executes. In this way of compilation, the application is rendered as it is delivered to the browser.
In simple words, the JIT compiler is just a feature of the runtime interpreter that will compile the bytecode into the machine code instructions of the running machine. Unlike AOT, not all code is compiled at the initial time. Instead, only necessary components that are responsible at the start of the application are rendered, and the rest are rendered (interpreted) by the browser as you go to each of the respective components.
AOT vs. JIT
Performance:
While working with AOT compilation, the browser neither has to go through the process of compiling any Angular code nor downloading any compiler. The browser can directly jump on reading the files from the server and displaying them. This makes the browser load the application quickly, ultimately improving the performance.
Moreover, AOT reduces the code that is shipped. With JIT, the angular compiler is shipped along with the JS bundles. That increases the size and makes the payloads heavier, resulting in a slower app. AOT doesn’t need to ship the angular compiler since it already has compiled everything during the build that provides us with smaller bundles due to which the script time is drastically reduced as well, so not only do the pages load fast, but they operate quickly too.
Conclusion:
While working with Angular Compiler, we have two options: Ahead Of Time (AOT) compilation and Just-In-Time compilation (JIT). Both have their pros and cons and are ideally suited for different scenarios.
JIT is mainly preferred in the development environment since it gives the liberty of quickly debugging and implementing features because of mapping files. At the same time, AOT does not have to map anything since it’s already compiled when it’s loaded in the browser. On the other hand, AOT gives a significant advantage by reducing bundle size and making the application rendering faster, which is recommended for the production environment.
References:
[1] Just in Time Compilation Explained: https://www.freecodecamp.org/news/just-in-time-compilation-explained/
[2] AOT Compiler: https://angular.io/guide/aot-compiler
