Contents
More than 125,000 websites are currently using Angular as their framework. Gmail, Forbes, UpWork, and PayPal are some of the most popular. While most relied only on the Just in Time (JIT) compilation, thanks to the angular CLI, developers can now use the Ahead-of-time (AOT) compilation to help optimize their Angular applications much faster.
AOT compilation has a few advantages over JIT compilation in Angular, such as a faster rendering process and smaller application size. But that’s not all. Keep reading to find out more about the main benefits of AOT compilation in Angular development.
Just-in-Time (JIT) vs Ahead-of-Time (AOT) compilation
To run Angular apps in your browser, you must compile them into JavaScript code, one of the most commonly used programming languages. To do this, you can use two approaches – Just-in-time (JIT) compilation and Ahead-of-time (AOT) compilation. What’s the main difference between the two?
Even though both compile JavaScript into a binary code, JIT is performed while you run the code in your browser, and AOT, as its name suggests, is performed before you run the program in your browser.
Moreover, AOT is often linked to the process of compiling higher-level programming languages, like C++, into lower-level language codes.
To get a better overview of the main differences between JIT and AOT compilation, let’s take a look at this table:
| JIT | AOT |
| Slower loading time since it has to compile the app during runtime | Quicker loading time since it already compiled the code during build time |
| More suitable for development mode | More suitable for production mode |
| Larger bundle size (~1.2 MB) | Smaller bundle size (~400 KB) |
| To run the app in JIT, you have to use the following command: ng build OR ng serve | To run the app in AOT, you have to use the following command: ng build –aot OR ng serve — |
| It catches template error at display time | It catches template error at building time |
What gives AOT compilation an upper hand over JIT compilation?
As you can see from the table, AOT compilation has a few advantages over JIT:
AOT creates smaller apps
When you use AOT compilation, the size of the Angular framework becomes two times smaller, which means that your application will also be much smaller. Additionally, since the app is already compiled, you don’t have to download the Angular compiler.
AOT offers faster rendering speed
Developers will also save rendering time using AOT instead of JIT compilation. Namely, the rendering process will be much faster because the browser downloads an already compiled version of the app.
AOT can catch errors earlier
AOT compilation will detect template errors at an earlier stage, i.e., during the build time, which will result in better code quality. On the other hand, JIT might skip some code that seems to work well even when not optimized. This could lead to detrimental output in the later stages.
AOT adds more security
AOT compilation offers better security since it evaluates TypeScript and HTML before running the program in the browser. This reduces the chance for hackers to insert malicious code into the app.
How does AOT compilation work?
Since most developers focus solely on JavaScript and C++, you’ll have more chances of nailing the coding job interview by understanding how AOT works. On that note, the AOT compiler uses three compilation phases:
- Code analysis
- Code generation
- Template type checking
Code analysis
The compiler parses Angular-specific metadata at this stage, like @Component() and @Input(). This gives Angular the necessary information to build the app. After the parsing process is complete, it produces this information in .metadata.json files.
Type definition files are the main outposts of this phase. They come with the extension .d.ts., and the AOT compiler uses them to generate an app code.
Keep in mind that while the AOT compiler supports most JavaScript syntax, such as Literal object ({key1:value1, key2:value2}), null, and string literal ([item1, item2, item3]), it doesn’t support the arrow function.
Code generation
In this phase, the compiler interprets the .metadata.json files and checks whether the metadata’s semantics conform to the compiler’s rules. Another key step that occurs at this stage is Metadata rewriting.
In other words, if metadata expressions contain arrow functions, the code generation will rewrite them by making them compiler-friendly.
Template type checking
This phase is related to files containing HTML code or templates. At this stage, the compiler will type-check these templates to ensure they don’t cause errors or runtime crashes.
To compile the application in the AOT compiler, you must add –AOT at the end of the ng build command.
AOT compilation limitations
As you can see, there are many advantages of using AOT compilation in Angular development. However, there are cons for every pro. On that note, the main disadvantages of AOT are:
- It only works with HTML and CSS.
- It requires more disc space and memory.
- It doesn’t support arrow functions and function expressions (aka lambda functions).
- It only understands a subset of JavaScript. If you use an expression with unsupported syntax, you’ll receive an error node in the .metadata.json file.
The Future of AOT compilation in Angular development
Developers can benefit from AOT compilation, especially if they use HTML and CSS for templates and styles.
Namely, AOT compilation can improve the performance of your application by reducing rendering time, detecting template errors during the build time, lowering the size of the Angular framework, and adding a higher level of security.
Therefore, we recommend using JIT compilation in development mode and AOT compilation in production mode.