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:
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
We do ~not~ sow or Ivy is coming
By Nikita Malik
We do ~not~ sow or Ivy is coming
- 1,281