We do not sow

OR

Ivy is coming

Nikita Malik

Senior Software Developer

at DataArt

Angular in 2019

History

<div>
  <span>{{title}}</span>
  <child-cmp *ngIf="show"></child-cmp>
</div>

Example Template

2.0 Template Compiler

const parentRenderNode:any = this.renderer.createViewRoot(this.parentElement);
this._text_0 = this.renderer.createText(parentRenderNode,'\n  ',null);
this._el_1 = ng.createRenderElement(this.renderer,parentRenderNode,'div',ng.EMPTY_INLINE_ARRAY,null);
this._text_2 = this.renderer.createText(this._el_1,'\n  ',null);
this._el_3 = ng.createRenderElement(this.renderer,this._el_1,'span',ng.EMPTY_INLINE_ARRAY,null);
this._text_4 = this.renderer.createText(this._el_3,'',null);
this._text_5 = this.renderer.createText(this._el_1,'\n  ',null);
this._anchor_6 = this.renderer.createTemplateAnchor(this._el_1,null);
this._vc_6 = new ng.ViewContainer(6,1,this,this._anchor_6);
this._TemplateRef_6_5 = new ng.TemplateRef_(this,6,this._anchor_6);
this._NgIf_6_6 = new ng.Wrapper_NgIf(this._vc_6.vcRef,this._TemplateRef_6_5);
this._text_7 = this.renderer.createText(this._el_1,'\n',null);
this._text_8 = this.renderer.createText(parentRenderNode,'\n',null);

4.0+ View Engine

function View_RootCmp_0(_l) {
  return ng.vid(0, [
    (_l()(), ng.eld(0, 0, null, null, 4, "div", [], null, null, null, null, null)),
    (_l()(), ng.eld(1, 0, null, null, 1, "span", [], null, null, null, null, null)),
    (_l()(), ng.ted(2, null, ["", ""])),
    (_l()(), ng.and(16777216, null, null, 1, null, View_RootCmp_1)),
    ng.did(4, 16384, null, 0, ng.NgIf, [ng.ViewContainerRef, ng.TemplateRef], {ngIf: [0, "ngIf"]}, null)
  ], ...);
}

8.0 Ivy (backwards compatible)

function RootCmp_Template(rf, ctx) {
  if (rf & 1) {
    ng.elementStart(0, "div");
    ng.elementStart(1, "span");
    ng.text(2);
    ng.elementEnd();
    ng.template(3, RootCmp_child_cmp_Template_3,
      1, 0, null, [1, "ngIf"]);
    ng.elementEnd();
  } if (rf & 2) {
    ng.textBinding(2, ng.interpolation1("",
      ctx.title, ""));
    ng.elementProperty(3, "ngIf",
      ng.bind(ctx.show));
  }
}

Pipelining

View Engine rendering pipeline

View Engine rendering pipeline:

Ivy rendering pipeline:

Ivy Compilation Model

@Component({
  selector: 'root-cmp',
  template: `
    <div>
      <span>{{title}}</span>
      <child-cmp *ngIf="show"></child-cmp>
    </div>`,
})
export class RootCmp { … }
export class RootCmp { … }
RootCmp.ngComponentDef = ng.ɵdefineComponent({
  type: RootCmp,
  selectors: [["test-cmp"]],
  consts: 4,
  vars: 2,
  factory: function RootCmp_Factory(t) {
    return new (t || RootCmp)();
  },
  directives: [ChildCmp, ng.NgIf],
  template: function RootCmp_Template(rf, ctx) { … },
});

Ivy Compilation Model

@Injectable()
export class AuthGuard {
  constructor(
    router: Router,
    http: HttpClient,
    @Inject(CONFIG) config: any,
  ) {
    …
   }
}

AuthGuard.ngInjectableDef =
    ng.defineInjectable({
  factory: function AuthGuard_Factory() {
    return new AuthGuard(
      ng.inject(Router),
      ng.inject(HttpClient),
      ng.inject(CONFIG),
    );
  },
}

Benefits

Optimizability!

Ivy is designed for Tree Shaking

  • dependency injection
  • <ng-template> and <ng-container>
  • View and Content Queries
  • Animations
  • Pipes
  • i18n
  • Core framework services

~4.5kB

Hello World app

(minified & compressed)

Incrementality!

Faster compilation

  • Locality principle
  • Compiling components / directives / etc. requires only local information

Simpler libraries

  • AOT npm modules
  • ng build – only builds your app
  • when Ivy app depends on angular npm module, it is already compiled when it's installed

Flexibility!

More powerful foundation

  • faster compilers
  • smaller bundles
  • better debugability
  • a huge refactoring, removing a lot of internal complexity

Ivy features

  • i18n in runtime
  • improved stacktraces
  • better JIT/AOT interop
  • no .ngfactory compilations
  • lazy loading without the Router
  • dynamic import and deployment

Summary

  • simplifies compilation, deployment, dependencies
  • sets a new quality standard
  • focuses on improving DX and UX at the same time

Architecture-level enhancements

  • how we compile apps
  • how we package, bundle and ship libraries
  • how we link those parts together and depend on each other in runtime
  • really optimized resources
  • more powerful foundation

Brand new Web is coming

Questions

Made with Slides.com