Angular

Angular is one of the most popular frameworks in the world, but it is not widely used in China due to the many libraries and compilation knowledge to learn in the framework. Also due to long load times, the larger project files generated by Angular are outweighed by the better packaging size and development experience of React and Vue. But if we understand the principles of Angular, we can develop Web apps that perform just as well as React apps. Prior to Angular 8.0, the View Engine compiler was used to compile Angular project files, resulting in large packages and bug tracking. So the Angular team launched the Ivy compiler.

What is theIvycompile

Ivy is the next generation template compilation engine and rendering pipeline tool, which is very advanced and provides advanced features and faster compilation times that have not been available before. Ivy is a complete rewrite of Angular’s previous rendering engine, specifically the fourth rewrite. Ivy builds components independently, and supports hot updates better. Rewriting the application involves compiling only the components that have changed.

Here’s a comparison of the volume changes before and after Angular compiled with Ivy:

You can see what happenedIvyOptimization, packaging volume reduced a lot.

treeshakable

Another important point of Ivy is treeshaking for project files, which means removing unused code during the compilation and packaging process. This can also be done with tools such as Rollup and Uglify. During the build process, the Treeshaking tool uses static analysis to eliminate unused and unreferenced code. Due to the static analysis of code dependencies and references, the tool can fail to correctly identify the existence of code when it is conditionally logical.

local

Locality refers to the process of compiling each component independently using native code, which can significantly improve build speed by recompiling modified parts rather than recompiling the entire project file. In previous Angular code, each component had its parent information, which led to compilation dependencies that increased the number of files compiled. In Ivy, each component only generates information about itself, minus the nouns for declarable dependencies and the package names.

Ivy compiles the sample

Try writing the following code in Angular:

    <div>
        <p>ivy works</p>
        <app-child></app-child>
    </div>
Copy the code

App-child here represents the child component of a reference. Ivy.component.js compiled by Ivy is shown below

And we pass again in unopenedIvyThis time, you get the following directory structure:

Pick two main files hereivy.component.jsandivy.component.ngfactory.jsTo showView EngineThe compiled file:As you can see, the type of files and the amount of code compiled compare toIvyThe compilation has become a lot more.

AOT compilation and JIT compilation

An Angular application consists primarily of components and their HTML templates. Components are written in the Typescript language and defined using decorators. Since the components and templates provided by Angular are not directly understood by the browser, Angular applications need to be compiled before they run in the browser.

Here’s oneangularThe compilation process diagram of

The Angular AOT compiler converts your Angular HTML and TypeScript code into efficient JavaScript code before the browser downloads and runs the code. Compiling an application at build time makes rendering in the browser faster. Some of the reasons for using AOT are given in the official documentation:

  • Faster rendering
  • Fewer asynchronous requests
  • smallerAngularFrame download size
  • Detect template errors early
  • Higher security (AOTIn theHTMLTemplates and components are compiled toJavaScriptFile. No templates to read, no potentially risky client-side HTML orJavaScript eval, there are fewer chances of being attacked by injection.)

Prior to earlier Versions of Angular8, Angular did not use AOT compilation. Instead, it used JIT(Just-in-time compilation) compilation to generate applications, which compiled your application in the browser at runtime. A common JIT coding step is to first compile Typescript code (including user-written code, as well as Angular framework and Angular compiler code) into JavaScript code. It then deploys the code to the server and the browser makes a request to download the code to execute, and Angular launches, and Angular calls the Angular compiler. Each component class, ngModule, Pipe, etc., needs to be compiled. Typescript code is compiled to the metadata saved by javascript code, and the metadata is compiled to the NgFactory file shown in the preceding diagram of javascript code that can be executed by the browser. The NgFactories file is then used to build the concrete components of the entire application.

AOT and JIT compilation: Angular compilation mechanisms AOT and JIT

Turn on Ivy compilation

Ivy builds with AOT by default. Previously, Angular has mostly used JIT compilation. To use Ivy, you need to add angularCompilerOptions and enable enableIvy in tsconfig.app.ts.

{
   "compilerOptions": {... },"angularCompilerOptions": {
    "enableIvy": true}}Copy the code

The second thing to make sure is that aot is set to true in the Angular configuration file Angular. json.

Ivy runtime

The new runtime engine is based on the Increnmental DOM concept. This is a way to express and apply updates to the DOM tree using instructions. DOM updates are a major part of change detection in Angular, so the concept can be easily applied to the framework. Learn more about it in this article, which explains the reasoning behind the concept and compares it to the Virtual DOM in React. Incremental DOM also happens to be a library, but instead of using it, the new Ivy engine implements its own version of incremental DOM.

Until now, Angular’s main implementation logic was to instantiate components, create DOM nodes, and detect changes, all in a small atomic unit. The compiler simply generates meta data about the component and the elements defined in the component. The following figure

And the newIvyThe steps for the engine are as follows:You can see that template directives are where the logic is for instantiating components, creating DOM nodes, and running change detection. But it has been moved from the overall interpreter to a single instruction. whileIvyAnother advantage is debugging for change detection. The newIvyYou can debug component change detection by placing breakpoints directly in template functions in a compilation environment.

The new compiler also compiles a set of separate Typescript Class transforms into aN AST representing a Class component. These conversions are implemented as a pure function that takes the Meta data representing the decorator and adds that definition to the component class as a static field.

That’s the introduction to the Ivy compile engine, and the new Ivy will also bring changes to the original change detection, which will be summarized in the next article on change detection.

Reference article:

  • The Ivy Engine in Angular: First in-depth look at compilation, runtime, and change detection
  • 5 minutes to learn about Ivy
  • Understanding Angular Ivy Library Compilation
  • Renderer and ViewContainerRef over directly manipulating the DOM
  • Eliran Eliassy — Get Ready for Ivy — Angular 3rd Generation Renderer Engine

I highly recommend Eliassy for his introduction to Ivy and for showing off the dirty tricks of debugging Angular apps!