While we were comparing Vue to React, we forgot to add Angular there. But that was a mistake because this framework is changing so fast, that you can’t really keep up with all its new updates. For instance, what do you know about Ivy engine in Angular?
Ivy is a new backwards-compatible Angular renderer focused on further speed improvements, size reduction, and increased flexibility. It is currently not feature complete, but on its way and is going to be battle-tested at Google.
What do you know about Ivy engine in Angular?
Let’s explore the key points of new runtime, compilation and change detection processes in Ivy.
- Ivy runtime is based on Incremental DOM (in contrast to Virtual DOM used in React). Incremental DOM updates is the main part of change detection in Angular so this concept can be conveniently applied in the framework.
- The compiler in Ivy takes metadata provided by a component decorator and produce a component definition. The definition provides information about the type of a component, the selectors it matches, and a factory function used to instantiate a component class.
- Ivy lets you easy debug change detection. Just put a breakpoint inside the template function and — you’re effectively debugging a change detection run for the current component.
- In the new Ivy compiler, a component definition will be attached to a component class through static fields. No separate file will be created during compilation.
- Also, this new Angular compiler will apply a bunch of independent TypeScript class transforms to an AST representing a component class.
- Internally the change detection run in Ivy is performed by calling the
detectChangesfunction and passing in a component class.
- Earlier is was so-called ‘interpreter’ for taking a view and executing all change detection operations. Ivy replaced most of it by a call of the
templatefunction. This template function holds a bunch of instructions that execute change detection related operations, like the text and input bindings update.