An Angular application consist largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by the Angular compiler.

Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016.

You can compile the app in the browser, at runtime, as the application loads, using the Just-in-Time (JiT) compiler. This is the standard development approach. It’s great .. but it has shortcomings.

JiT compilation incurs a runtime performance penalty. Views take longer to render because of the in-browser compilation step. The application is bigger because it includes the Angular compiler and a lot of library code that the application won’t actually need. Bigger apps take longer to transmit and are slower to load.

Compilation can uncover many component-template binding errors. JiT compilation discovers them at runtime which is later than we’d like.

The Ahead-of-Time (AoT) compiler can catch template errors early and improve performance by compiling at build time.

Ahead-of-time (AoT) vs Just-in-time (JiT)

There is actually only one Angular compiler. The difference between AoT and JiT is a matter of timing and tooling. With AoT, the compiler runs once at build time using one set of libraries; With JiT it runs every time for every user at runtime using a different set of libraries.

Back to top

So, why do AoT compilation?

Faster rendering

With AoT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

Fewer asynchronous requests

The compiler inlines external html templates and css style sheets within the application JavaScript, eliminating separate ajax requests for those source files.

Smaller Angular framework download size

There’s no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

Detect template errors earlier

The AoT compiler detects and reports template binding errors during the build step before users can see them.

Better security

AoT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.
Back to top

Advertisements