Ivy: New Angular Compiler

Ivy: New Angular Compiler

tudip-logo

Tudip

22 July 2020

Angular Ivy is the code used for Angular’s next-generation compilation and rendering pipeline. With the version 9 release of Angular, the new compiler and their runtime instructions are used by default instead of the older compiler and runtime, known as View Engine. Firstly, we take a look:

How does the compiler work?

Architecture:

  • Regular typescript compilation works as:
    Ivy_New_Angular_Compiler_01
  • Angular compilation works as:
    Ivy_New_Angular_Compiler_02

Compilation Model:

  • When the compiler runs, then it converts typescript code into javascript code just like lib.ts into the lib.js file.
  • And, this JS file has no type information. It’s ready to execute in a browser.

Feature of compilation:

  • NgModule Scopes:
    Ivy_New_Angular_Compiler_03
  • Partial Evaluation:
    The compiler will evaluate

    • Literals (Objects and Arrays),
    • Constant/Variables,
    • Binary/ternary/logic Expressions
    • String Templates
    • Function calls
    • Property chains
    • Imports/Exports
  • Template Type Checking:
    The significant challenge is that the Typescript compiler doesn’t support checking the HTML code. That’s why the approach is:

    • Transform angular expression code into TS code.
    • Set up a typescript program and feed it with this ‘type check blocks’.
    • Gather any error and map them back to the original template

Type checking:

Ivy_New_Angular_Compiler_04

  • <account-view> should be a selector component with an ‘account’ @input.
  • getAccount() should take two arguments and should return and Observables/Promises.
  • ‘user’  should be an object with an ‘id’ property.
  • [account] should accept null values.

Advantages

  • Smaller bundle sizes
  • Faster testing
  • Better debugging
  • Improved CSS class and style binding
  • Improved type checking
  • Improved build errors
  • Improved build times, enabling AOT(true) on by default
  • Improved Internationalization
Ivy_New_Angular_Compiler_05

Small Apps: 30% decrease in bundle size, Medium Size apps: Decreases Minimally, Large Apps: 25-40% decrease in bundle size.

How does it work?

It is “tree-shaking friendly,” which means that it automatically removes unused code (including unused Angular features!), shrinking your bundles. Another feature is that it compiles each file separately, reducing rebuild times. In short — you get minified builds, faster rebuild times and simpler generated code.

Running Ivy

  • Created the new angular Project
    Ivy_New_Angular_Compiler_06
  • Enabling Ivy by adding the following lines
    Ivy_New_Angular_Compiler_07
  • Run the compiler by executing ngc commandIvy_New_Angular_Compiler_08
  • Let’s look at the template of the AppComponent
    Ivy_New_Angular_Compiler_09
  • Code generated for this template inside the dist/out-tsc/src/app/app.component.js
    Ivy_New_Angular_Compiler_10

Understanding the Generated Code

If we look on the top of the generated file we get the following statement:

Ivy_New_Angular_Compiler_11

  • iɵ is actually just the core Angular module, and these are the all functions exported by Angular
  • The letter ɵ indicates that some method is private to the framework and must not be called directly by the user.
  • Similarly, ɵT stands for text, and ɵe for elementEnd

References

Request a quote