Ivy is COMING!

Deck of my talk from Angular UP conference:

"After eight great seasons (well, maybe the first one wasn’t that good, at least they killed it in the end), it’s finally coming for real - Ivy is HERE!

But, now what? What are the benefits? Will my bundle shrink in size? Are my builds going to be faster?

In this talk, I will demonstrate why Angular Ivy is truly a game changer. We will understand how we can leverage the Ivy renderer to create higher order components (HOC), how to import non-routable components dynamically, how it reduces our bundle size, how it helps us with much easier debugging tools and how our build process becomes much faster."

Transcript

3. Ivy is HERE @eliraneliassy
4. About mySelf • Experienced FE developer, specialised in B2C applications • FE consulter & trainer @ 500Tech • Angular-IL & AngularUP conf CO-organiser
5. Building powerful Angular community
6. Angular Ivy
7. Flashback V2 Template Compiler V4 View Engine V8 Ivy
8. Why Ivy?
10. 63% of all US online traffic comes from smartphones and tablets.
11. Nearly 80% of internet usage is expected to have been mobile in 2019
12. What can we do?
13. CDN PWA Lazy loading
14. Reduce the bundle!
16. 300 375 450 525 600 before Ivy 509 KB
17. Opt-in Ivy { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ] } tsconfig.app.json
18. Opt-in Ivy { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ], "angularCompilerOptions": { "enableIvy": true } } tsconfig.app.json
19. 300 375 450 525 600 before Ivy After Ivy 432 KB 509 KB
20. 300 375 450 525 600 before Ivy After Ivy 77 KB 432 KB 509 KB 15%
21. How does it work?
22. How does it work? <div> <span>{{title}}</span> <app-child *ngIf="show"></app-child> </div>
23. Demo 1 Use the ngc command to generate the transpiled code $ node_modules/.bin/ngc
24. 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
25. 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); }); }
26. 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); }
27. Tree Shaking
28. Bundle size reduced
29. 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); }); }
30. 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); }); }
31. ng_if.ts @Directive({ selector: '[ngIf]' }) export class NgIf { constructor( private _viewContainer: ViewContainerRef, templateRef: TemplateRef<NgIfContext>) { this._thenTemplateRef = templateRef; } ... }
32. 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); }
33. 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); }
34. Bundle size reduced Faster Compilation
35. Easier to debug
36. Demo 2 Debugging with Ivy
37. Debugging <input (input)="search($event)"> export class AppComponent { title = 'angular-ivy-lazy-hoc-talk'; show: boolean; }
38. Debugging with View Engine <input (input)="search($event)">
39. Debugging with Ivy <input (input)="search($event)">
40. Bundle size reduced Better template debugging Faster Compilation
41. Dynamic loading
42. Demo 3 Dynamic Loading
44. Bundle size reduced Better template debugging Faster Compilation Better dynamic loading
45. HOC A function which gets a component and returns a component And also affecting the component in between…
46. Demo 4 Experimental HOC
47. Higher Order Components Bundle size reduced Better template debugging Faster Compilation Better dynamic loading
48. • Ivy - 3rd generation of Angular complier is around the corner! • Backwards compatible • With Ivy: • Small bundles • Easier to debug • Faster compilations • Easier dynamic loading of modules & components • Future of Angular: HOC, Angular Elements and more! Summary
49. http://bit.ly/all-you-need-to-know-angular-ivy @eliraneliassy
50. Special Thank @itayoded
51. Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy