Angular Ivy is a stepping stone for the future of framework.  In Angular.js 9 Ivy is the standard engine for rendering your content. In Angular 8 it was an engine you can manually opt to use. Angular Ivy can be called an overwritten version of Angular’s rendering engine. There was other rewrite versions of Angular’s rendering engine but they failed to make an impact like Ivy. Ivy can be used to compile components more independently of each other. When recompiling the application will only involve compiling only changed components so the development times are improved. Ivy can make bigger improvements in your application. Ivy pays more attention to tree-shaking. Tree shaking is done by looking into the code, suggesting the libraries needed to eliminate unused codes. This will reduce the loading time of your application and improve the performance. 

Here is an example code for understanding the differences between Ivy and pre-Ivy code.

PonyComponent with a template:

<figure>
  <img [src]="getPonyImageUrl()">
  <figcaption>{{ ponyModel.name }}</figcaption>
</figure>

function View_PonyComponent() {
  return viewDef([
    elementDef(2, 'figure'),
    elementDef(0, 'img', ['src']),
    elementDef(1, 'figcaption'),
    textDef()
  ], (checkBinding, view) => {
    var component = view.component;
    const currVal_0 = component.getPonyImageUrl();
    checkBinding(view, 1, currVal_0);
    const currVal_1 = component.ponyModel.name;
    checkBinding(view, 4, currVal_1);
  });
}

class PonyComponent {
  static ecmp = defineComponent({
    type: PonyComponent,
    selectors: [['ns-pony']],
    factory: () => new PonyComponent(),
    // number of elements, templates, content, bound texts to allocate...
    decls: 4,
    vars: 2,
    template: (renderFlags: RenderFlags, component: PonyComponent) => {
      if (renderFlags & RenderFlags.Create) {
        elementStart(0, 'figure');
        element(1, 'img');
        elementStart(2, 'figcaption');
        text(3);
        elementEnd();
        elementEnd();
      }
      if (renderFlags & RenderFlags.Update) {
        advance(1);
        property('src', component.getPonyImageUrl());
        advance(2);
        textInterpolate(component.ponyModel.name);
      }
    }
  });
}