Compilation in Angular Part-I

Need and Methods

Hello everyone! As most programming language use a compiler, so in this blog series we are going to understand how compilation works in Angular, it’s architecture, features, types, compilation model etc. In the part-I we will understand why Angular needs a compiler and it’s type on a high level, and in upcoming articles we will cover further points and understand more about it.

In a simple language,

A compiler is a special program that translates a programming language’s source code into machine code or another programming language.

Why does Angular have a compiler ?

The main job of a compiler is to translate the template we write into the code that runs at runtime. In Angular we write the templates declaratively, we specify what should happen, the components, selector for that component, the bindings etc, but not how it should happen.

Declarative Syntax

Imperative Syntax

Browsers however do not understand declarative Angular syntax. So we have to change it to something that the browser can understand. Then the question in your mind might arise, if this imperative code is needed anyway, why do we not directly write the code the browser can understand, and save the trouble of going through the compiler entirely ?

Reasons:

1. Less boilerplate, the less we have to think about how things work under the hood, how it renders, the more time we can focus on business logic.
2. Optimize the things, the code, the time.

So the compiler’s job is, to take declarative Angular instructions, both the templates & decorators that we write and translate them into imperative code. In short, the compilation in Angular meaning, converting the Angular code into plain JavaScript.

Compilation Methods in Angular

Our compiler can do this transformation in one of two different ways:

1. JIT (Just In Time)
2. AOT (Ahead Of Time)

Just In Time Compilation (JIT)

This is used in development mode of Angular. When we build an application in JIT mode, we take TypeScript code & compile using TypeScript compiler(tsc) and it gets translated into JS code. But here, all of the angular decorators that we have written actually end up in that bundled JS and they run in the browser. When those decorators execute in the browser, it calls our compiler and translates our templates, other Angular features into imperative code.

JIT

Ahead Of Time (AOT)

In this mode instead of running plain TypeScript compiler, it runs Angular compiler(ngc). Now let’s understand what is the difference between tsc and ngc compilers. ngc does the same thing as tsc compiler, it takes TS code and translates it into JS, but also it takes the Angular decorators which we have written & pre-compiled them into the imeprative instructions to render in a browser. So it would save the cost and time to compile those decorators at runtime unlike JIT. It also detects and reports template binding errors during the build steps before users can see them.

The compilation type JIT or AOT depends on the value of the aot property in the build configuration specified in angular.json. By default, aot is set to true from Angular-9.

AOT

JIT vs AOT

I hope these contents are helpful to understand the compiler, Angular compiler, JIT vs AOT. In the next blog, we will understand the architecture and features of the compiler.

Thanks for reading. Stay tuned !