What is Ivy in Angular?

Key takeaways:

• Ivy introduces an efficient compilation process that transforms Angular templates into optimized JavaScript.

• The engine employs advanced tree-shaking capabilities to eliminate unused code.

• Its incremental DOM approach ensures minimal updates to the browser’s DOM, improving performance.

• Migration to Ivy is straightforward, with built-in support in Angular 9 and later versions.

• The engine maintains backward compatibility while enabling future innovations.

What is Angular Ivy?

Angular Ivy is the latest compilation and rendering engine for Angular applications. It has revolutionized how the framework compiles and runs web apps. To learn its significance, let’s first understand the concept of a rendering engine.

A rendering engine is a software or program inside a web browser that interprets and displays HTML, CSS, and JavaScript. It transforms web code into the visual elements we see on our screen.

However, browsers cannot render HTML and CSS codes coming from Angular or any other framework because the HTML and CSS are not pure (they may be inside custom templates or components). Therefore, something needs to transform these components into what the browser can render. This is where the Angular rendering engine comes in.

Ivy rendering engine

Ivy is the rendering engine that transforms Angular code (template HTML + TypeScript) into pure HTML and JavaScript that the browser understands. When this transformation is done, the browser can understand and render the resulting HTML and JavaScript to display content, as illustrated in the image above.

Ivy is a complete rewrite of the View Engine—the default engine for building Angular apps from Angular 4 until it was retired in Angular 8. It is the third engine since the creation of Angular in 2016, and Angular has shipped with Ivy since the introduction of Angular 9 till the present day.

How Ivy works

Ivy transforms Angular’s templates into the JavaScript code. This compiled code makes fewer assumptions about how templates work and allow the engine to perform optimizations at runtime.

Here’s a step-by-step breakdown of how Ivy processes templates and renders components:

1. Template compilation: Ivy transforms Angular templates into efficient JavaScript code.

2. Tree shaking: It removes unused code to optimize bundle size.

3. Incremental DOM: It updates only the parts of the DOM that have changed.

4. Locality: It enables better lazy-loading and component-level compilation.

How to enable Angular Ivy

Starting from Angular 9, Ivy is enabled by default. However, to migrating an older Angular application or working with custom configurations, we can ensure Ivy is enabled by following these steps:

1. Check the Angular version: First, make sure we are using Angular 9 or later.

2. Update tsconfig.json: Open the tsconfig.json file and ensure the following configuration is set:

3. Update dependencies: To upgrading from an older version of Angular, make sure to update all the Angular dependencies to the latest versions using the following command:

4. Run the build: After updating, we can build our Angular application using the Ivy compiler by running the command:

  This will build the application with Ivy and leverage all the optimizations it provides.

Benefits of using Ivy

Ivy comes with many improvements, which include the following:

• AOT compilation: Ahead-of-time (AOT) compiles an app before it goes to a runtime environment like a browser. AOT reduces the load on the browser since it precompiles the app before it reaches the browser.

• Smaller bundle size: Bundle size is the amount of code a browser will have to download to load our app. Ivy downsizes the bundle size through AOT and tree-shaking.

• Improved speed: Angular apps load more quickly than before, thanks to a smaller bundle size and the tree-shaking capability of Ivy.

Ivy is much faster than its predecessor because it now ships with ahead-of-time (AOT) compilation by default. AOT enables the browser to load the application quickly without downloading the compiler and building the app itself.

Just-in-time (JIT) compilation was the default compiling mechanism in previous versions of Angular, through which the browser would download the compiler and build the app. However, this process was inefficient because it was slow and burdened the browser.

Note: Angular has just one compiler. AOT and JIT just refer to how and when we use the compiler. With AOT, the compiler runs at build time. With JIT, the compiler runs at runtime.

The Ivy engine is a critical part of Angular. Hence, having a basic idea of what it does is important.

Conclusion

By addressing performance bottlenecks and introducing innovative compilation techniques, Ivy has established itself as a key feature of Angular’s architecture. AOT compilation combines intelligent code optimization through tree-shaking, and demonstrates Angular’s commitment to delivering high-performance applications. These improvements not only benefit end-users through faster load times and better runtime performance but also enhance the developer experience with improved tooling and debugging capabilities.