What changes did Ivy bring compared to View Engine?

Ivy fundamentally re-architected Angular's rendering engine, replacing View Engine to deliver significant improvements across compilation, bundle size, performance, and developer experience. It became the default rendering engine in Angular 9.

Core Principles and Key Advantages

Ivy focuses on making Angular applications smaller, faster, and easier to debug. It achieved this through a new compilation pipeline that generates more optimized, tree-shakable code.

• Smaller Bundle Sizes (Tree Shaking): Ivy generates output code that is much more tree-shakable, meaning unused parts of Angular can be more effectively removed during the build process. This leads to significantly smaller application bundles.
• Faster Compilation (AOT - Ahead-of-Time): Ivy's compilation process is designed to be more efficient, especially for incremental builds. It also supports 'localize' for faster internationalization builds.
• Improved Debuggability: The generated code is more human-readable, making it easier to debug applications using browser developer tools. It provides better stack traces and insight into components.
• Better Type Checking: Ivy introduces stricter type checking for templates, catching more errors at build time rather than runtime.
• Backward Compatibility: Ivy was designed to be largely backward compatible with existing Angular applications, facilitating a smoother transition from View Engine.
• localize for Internationalization: Ivy enables the localize function for i18n, making it possible to build an application once and generate multiple locale-specific bundles without recompiling for each language.
• Angular Compatibility Compiler (NGCC): NGCC was introduced to process existing View Engine libraries, transforming them into an Ivy-compatible format so they could be used in Ivy applications.

Underlying Architectural Changes

View Engine compiled templates into JavaScript factory functions that created DOM elements. Ivy, in contrast, compiles templates into a series of tree-shakable, lower-level instructions that directly manipulate the DOM. This instruction-based approach is a significant departure.

For example, instead of creating a monolithic renderer, Ivy provides a set of small, composable rendering instructions. This modularity means only the instructions actually used by your application are included in the final bundle, further contributing to smaller sizes.

/* Simplified example of Ivy's instruction-based approach */
// Instead of a large runtime, Ivy generates calls to specific rendering instructions:
// i0.ɵɵdefineComponent(...)
// i0.ɵɵelementStart(0, 'div');
// i0.ɵɵtext(1, 'Hello ');
// i0.ɵɵtextInterpolate(ctx.name);
// i0.ɵɵelementEnd();

This new architecture also improved the way Angular handles change detection and dependency injection, leading to more predictable behavior and easier debugging of these core mechanisms.