we generate when your ngc AOT compiler against your template - NgFactory File - Angular code import from core, browser support compile at runtime - Runtime - Angular gets a lot of feedback from companies, developer relations and so on. - They want Angular to be simpler, easier to pick up and understand, build faster, smaller bundles and advance features such as HOC. - Current rendering architecture (View Engine) is limited. - Ivy is new back-end for compiler with new runtime. - Backward Compatible with View Engine 4.0
code and runtime code Incrementality → faster compilation, simpler libraries reduce complex meta data on NPM Flexibility → more powerful foundation new features
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); From research → One of the fastest way to create dom structure in the browser Get feedback → Too verbose, Too many bytes, Too much overhead to bundles Different Approach to represent template with less overhead -> View Engine 4.0
structure Data structure is interpreted at runtime Generate small, optimal structures (optimize template size and not to sacrifice performance during rendering)
}) 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) { … }, }); Your code Compiled by Ivy Static Field Contain metadata - tell ivy about information about component such as selector, two directives child component, ngIf Template Function - rendering template DOM & Change Detection
{ 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)); } } Imperative calls like Template Compiler 2.0 Create div, span, child template with ngIf First if block render the first time insert into DOM Second block run change detection, running two binding interpolation and condition for ngIf
http: HttpClient, @Inject(CONFIG) config: any, ) { … } } - Auth Guard check when navigate in - Injecting Router, HTTPClient, config object - Check permission in config for current url → HttpClient calls for user permission → router navigate away if no permission - In Ivy @Injectable -> ngInjectableDef
@Inject(CONFIG) config: any, AuthGuard.ngInjectableDef = ng.ɵdefineInjectable({ factory: function AuthGuard_Factory() { return new AuthGuard( ng.ɵinject(Router), ng.ɵinject(HttpClient), ng.ɵinject(CONFIG), - ngInjectableDef has factory function. Factory function is to create the instance. - For every dependency needing to be injected. Factory function call ivy inject instruction. Give token and get back instance of the dependency - Once those instances have been created factory function calls constructor. - If no dependency, no inject instruction
via tree-shaking Ivy let us leverage a JS tools that optimize code especially Tree Shaking. Not use feature in app, don’t pay the cost of bytes at runtime
Optimizer looks to prove a certain code is not used at runtime, and remove the code from bundle and make it smaller. How do I write code that I do not use?
often include code you don’t use Including Angular! import from @angular/material. ES6 import all by default Tree-shaker does understand code enough you use only button. The rest is thrown away.
big interpreter into smaller functions, separated instructions get compiled in your template Ex. Not use i18n, content projection or SVG no instruction in compiled template
traverse and interpreted them. The interpreter has to handle whatever template. It doesn’t know ahead of time you use content projection, i18n or SVG. While optimizing interpreter small and optimal, the tree-shaker could not remove part of it. Interprets generated NgFactories at runtime Must support every Angular feature Impossible to tree shake or split up
cases (e.g. NgElement) My app is not hello world but you definitely pay what you use. Angular Element is not complex as an app, Ivy shakes them down to where they work.
Tool) Optimizers are a work in progress (new tools is invented everyday) Ivy is ready for future optimizers too (Ex. Closure eventually commonly uses, Ivy will be ready.)
already compiled when it’s installed Template Compiler & View Engine 4.0+ used global compilation (rebuild dependency, libraries ) - typescript, ngc It’s fairly difficult to get that. To do it, ivy implemented a rule call “locality”
Compiling them requires only local information Safe to ship code in NPM Can compile them without needing to know too much about those dependencies using DTS file without extra medata about code. Ivy add information to DTS files for public API like selector and purely rely on TypeScript.
work. When component or directive changes, we have to regenerate this code to assume “field” changed. We don’t know when they publish a new patch. Angular today relies on global compilation. <div directive [property]="value"> function updateBindings(directive: any, value: any) { directive.field = value; } Private name
and new value, looks up directive or component then writing value out. <div directive [property]="value"> ng.elementProperty(1, "property", ng.bind(ctx.value));
NgIf to be injected - private API of ngIf. Angular Team updates ngIf, inject something, it might break code we generate and that’s why we generate code at the end of app bundle. NgIf.ngDirectiveDef = i0.ɵdefineDirective({ factory: function NgIf_Factory(t) { return new NgIf( i0.ɵinject(ViewContainerRef), i0.ɵinject(TemplateRef) ); }, ... }); Constructor parameters go into factory function. This code is safe to ship to NPM. ngIf has information encoded on it. Just call factory function.
compiled code to NPM ng build only builds your app No big monolithic global compilation → build libs & apps separately Not only build faster, but also simplify how libraries packaged using public API no metadata
Not focused on new features (for now) Never been about delivering exciting new features on the day that we ship ivy, instead, it’s about make Angular better, faster compiles, small bundles, better debuggability. However, during undertaking big effort to make our design give us a foundation for building cool features users wanted - good technical direction. Ivy Instruction sets make us very extensible - New instructions, no remove instructions - existing apps still work.
with JIT such as $compile Angular.js, cost of shipping compiler to browser) No .ngfactory complications (still generate apps because still import, but shims, in the future, bootstrapping API simpler) Lazy loading without the Router (Now lazy-load Angular only CLI) Dynamic import & deployment
Ecosystem on top of Ivy (empower the library from ivy low-level APIs) Higher order components (function wrap component, function adds behavior or does something else)
NgFactory file, simplify bootstrapping, improve lazy-loading, get rid of user stumbling block Instruction set makes templates optimizable, and make framework itself tree-shakeable. Global to incremental compilation, build faster Reduce requirement on libraries
perjerz
ssssota
xuwei_k
datanalyticslabo
yoshifumi_ishikura
daisukeshinoku
mackee
dunglas
rainerhahnekamp
javiergs
onihusube
lamodatech
l2hyunwoo
danielanewman
eitanlees
honnibal
soudai
andyhume
holman
lauravandoore
quramy
reverentgeek
brad_frost
vanstee
denniskardys
