Angular 9: What is Locality principle for Ivy?

Two main ideas that played a major role when engineering Ivy — locality and tree shaking.

Let’s take an example with our PonyComponent that declares its input like this:

@Input('pony') ponyModel: PonyModel;

When a component uses PonyComponent in its template, it looks like:

<ns-pony [pony]="myPony"></ns-pony>

The generated code in Ivy looks like:

// ...
  if (renderFlags & RenderFlags.Update) {
    select(0);
    // updates the public `pony` property
    property('pony', component.myPony);
  }
},
directives: [PonyComponent]

But with View Engine, it looked like:

// ...
elementDef(0, 'ns-pony'),
// updates the private `ponyModel` field
directiveDef('PonyComponent', { ponyModel: [0, 'ponyModel'] }
// ...

This is the locality principle. To compile an AppComponent that uses PonyComponent in its template, Ivy doesn’t need to know anything about the pony component. The output of the Ivy compiler for Appcomponent depends exclusively on the code of AppComponent.

That was not true in ViewEngine, where the code generated for the AppComponent also depended on the code of the PonyComponent.

It has consequences on the rebuild time as the Ivy compiler can do better than to recompile everything as the View Engine did.