Everything you need to know about Angular Ivy

Smaller bundles, faster compilations, better debugging, dynamic loading of module and components and the ability to change components through Higher-order components.

After a long time of waiting, it’s finally coming for real — Ivy is HERE!

In this talk, Eliran will demonstrate why Angular Ivy is truly a game-changer, what's the benefits of it, how it makes Angular much more dynamic and breaks the concept of NgModules.
We will understand how we can leverage the Ivy renderer to create higher-order components (HOC), what is incremental DOM and how to import non-routable components dynamically to make our application much faster and much flexible.

Transcript

1. Everything you should know about Angular Ivy @eliraneliassy
2. About mySelf • Founder & developer @ • GDE for Angular & Web Technologies • Angular-IL & AngularUP conf CO-organiser • Writer for AngularInDepth
3. Angular Ivy
5. Flashback V2 Template Compiler V4 View Engine V8 Ivy
6. Why Ivy?
8. 63% of all US online traffic comes from smartphones and tablets.
9. Nearly 80% of internet usage is expected to have been mobile in 2019
10. What can we do?
11. CDN PWA Lazy loading
12. Reduce the bundle!
14. 300 375 450 525 600 before Ivy 509 KB
15. Opt-in Ivy { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ] } tsconfig.app.json
16. Opt-in Ivy { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ], "angularCompilerOptions": { "enableIvy": true } } tsconfig.app.json
17. 300 375 450 525 600 before Ivy After Ivy 432 KB 509 KB
18. 300 375 450 525 600 before Ivy After Ivy 77 KB 432 KB 509 KB 15%
19. How does it work?
20. How does it work? <div> <span>{{title}}</span> <app-child *ngIf="show"></app-child> </div>
21. Demo Use the ngc command to generate the transpiled code $ node_modules/.bin/ngc
22. No more factory files! The factory became a static method inside the component def All Angular decorators now have their static function inside the component class: @Component —> ngComponentDef @Injectable —> ngInjectableDef @Directive —> ngDirectiveDef
23. Transpiled code - View Engine export function View_AppComponent_0(_l) { return i1.ɵvid(0, [ (_l()(), i1.ɵeld(0, 0, null, null, 4, "div", [], null, null, null, null, null)), (_l()(), i1.ɵeld(1, 0, null, null, 1, "span", [], null, null, null, null, null)), (_l()(), i1.ɵted(2, null, ["", ""])), (_l()(), i1.ɵand(16777216, null, null, 1, null, View_AppComponent_1)), i1.ɵdid(4, 16384, null, 0, i4.NgIf, [i1.ViewContainerRef, i1.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_1 = _co.show; _ck(_v, 4, 0, currVal_1); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.title; _ck(_v, 2, 0, currVal_0); }); }
24. Transpiled code - Ivy template: function AppComponent_Template(rf, ctx) { if (rf & 1) { i0.ΔelementStart(0, "div"); i0.ΔelementStart(1, "span"); i0.Δtext(2); i0.ΔelementEnd(); i0.Δtemplate(3, AppComponent_app_child_3_Template, 1, 0, "app-child", _c0); i0.ΔelementEnd(); } if (rf & 2) { i0.Δselect(2); i0.ΔtextBinding(2, i0.Δinterpolation1("", ctx.title, "")); i0.Δselect(3); i0.Δproperty("ngIf", ctx.show); }
25. Tree Shaking
26. Bundle size reduced
27. Transpiled code - View Engine export function View_AppComponent_0(_l) { return i1.ɵvid(0, [ (_l()(), i1.ɵeld(0, 0, null, null, 4, "div", [], null, null, null, null, null)), (_l()(), i1.ɵeld(1, 0, null, null, 1, "span", [], null, null, null, null, null)), (_l()(), i1.ɵted(2, null, ["", ""])), (_l()(), i1.ɵand(16777216, null, null, 1, null, View_AppComponent_1)), i1.ɵdid(4, 16384, null, 0, i4.NgIf, [i1.ViewContainerRef, i1.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_1 = _co.show; _ck(_v, 4, 0, currVal_1); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.title; _ck(_v, 2, 0, currVal_0); }); }
28. Transpiled code - View Engine export function View_AppComponent_0(_l) { return i1.ɵvid(0, [ (_l()(), i1.ɵeld(0, 0, null, null, 4, "div", [], null, null, null, null, null)), (_l()(), i1.ɵeld(1, 0, null, null, 1, "span", [], null, null, null, null, null)), (_l()(), i1.ɵted(2, null, ["", ""])), (_l()(), i1.ɵand(16777216, null, null, 1, null, View_AppComponent_1)), i1.ɵdid(4, 16384, null, 0, i4.NgIf, [i1.ViewContainerRef, i1.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_1 = _co.show; _ck(_v, 4, 0, currVal_1); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.title; _ck(_v, 2, 0, currVal_0); }); }
29. ng_if.ts @Directive({ selector: '[ngIf]' }) export class NgIf { constructor( private _viewContainer: ViewContainerRef, templateRef: TemplateRef<NgIfContext>) { this._thenTemplateRef = templateRef; } ... }
30. Transpiled code - Ivy template: function AppComponent_Template(rf, ctx) { if (rf & 1) { i0.ΔelementStart(0, "div"); i0.ΔelementStart(1, "span"); i0.Δtext(2); i0.ΔelementEnd(); i0.Δtemplate(3, AppComponent_app_child_3_Template, 1, 0, "app-child", _c0); i0.ΔelementEnd(); } if (rf & 2) { i0.Δselect(2); i0.ΔtextBinding(2, i0.Δinterpolation1("", ctx.title, "")); i0.Δselect(3); i0.Δproperty("ngIf", ctx.show); }
31. Transpiled code - Ivy template: function AppComponent_Template(rf, ctx) { if (rf & 1) { i0.ΔelementStart(0, "div"); i0.ΔelementStart(1, "span"); i0.Δtext(2); i0.ΔelementEnd(); i0.Δtemplate(3, AppComponent_app_child_3_Template, 1, 0, "app-child", _c0); i0.ΔelementEnd(); } if (rf & 2) { i0.Δselect(2); i0.ΔtextBinding(2, i0.Δinterpolation1("", ctx.title, "")); i0.Δselect(3); i0.Δproperty("ngIf", ctx.show); }
32. Bundle size reduced Faster CompilaWon
33. Easier to debug
34. Demo Debugging with Ivy
35. Debugging <input (input)="search($event)"> export class AppComponent { title = 'angular-ivy-lazy-hoc-talk'; show: boolean; }
36. Debugging with View Engine <input (input)="search($event)">
37. Debugging with Ivy <input (input)="search($event)">
38. Templates type checking
40. Why Ivy? Faster Compilation Simpler Debugging Improve type checking Backwards Compatible
41. What’s next?
46. “A component must belong to an NgModule” angular.io
47. ״NgModules represent applica2ons״ Rob Wormald, Angular Core
48. I’ve only wanted a component…
49. ApplicaWons ≠ Components
51. But!
52. But! NgModules defines injectors, zones, direcWves, pipes, providers
53. Demo 1 Standalone Component Use the ɵrenderComponent, ɵdetectChanges() and ɵɵdirectiveInject() functions
54. Demo 2 Async Pipe Push pipe
58. Demo 3 OnPush components ɵmarkDirty(this)
61. Demo 4 Dynamic Import import()
63. HOC A function which gets a component and returns a component And also affecting the component in between…
64. Demo 5 Experimental HOC The unsubscriber HOC
67. Angular 9 Not Only Ivy
68. • FormControlName accept numbers • TestBed.get() —> TestBed.inject() • ViewChild() staZc flag now have default value (false) • Be\er localisaZon support with @angular/localize package • Typescript 3.6 support • ModuleWithProviders<ModuleName> is now a generic class • DeprecaZon of entryComponents • Any many other improvements… Angular 9
69. Angular 9 - ng update ➜ ~ ng update @angular/cli@next @angular/core@next ➜ ~ ng update @angular/cli @angular/core Once it will release: If you want to try it right now:
70. • Ivy - 3rd generaZon of Angular complier is just around the corner! • Future of Angular: • Standalone components • Smarter change detecZon • Easier dynamic loading of modules & components • HOC • Angular Elements Summary Give it a try!
71. http://bit.ly/all-you-need-to- know-angular-ivy http://bit.ly/the-future-of- angular-components
72. Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy