Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Ivy is HERE @eliraneliassy

Slide 4

Slide 4 text

About mySelf • Experienced FE developer, specialised in B2C applications • FE consulter & trainer @ 500Tech • Angular-IL & AngularUP conf CO-organiser

Slide 5

Slide 5 text

Building powerful Angular community

Slide 6

Slide 6 text

Angular Ivy

Slide 7

Slide 7 text

Flashback V2 Template Compiler V4 View Engine V8 Ivy

Slide 8

Slide 8 text

Why Ivy?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

63% of all US online traffic comes from smartphones and tablets.

Slide 11

Slide 11 text

Nearly 80% of internet usage is expected to have been mobile in 2019

Slide 12

Slide 12 text

What can we do?

Slide 13

Slide 13 text

CDN PWA Lazy loading

Slide 14

Slide 14 text

Reduce the bundle!

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

300 375 450 525 600 before Ivy 509 KB

Slide 17

Slide 17 text

Opt-in Ivy { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ] } tsconfig.app.json

Slide 18

Slide 18 text

Opt-in Ivy { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ], "angularCompilerOptions": { "enableIvy": true } } tsconfig.app.json

Slide 19

Slide 19 text

300 375 450 525 600 before Ivy After Ivy 432 KB 509 KB

Slide 20

Slide 20 text

300 375 450 525 600 before Ivy After Ivy 77 KB 432 KB 509 KB 15%

Slide 21

Slide 21 text

How does it work?

Slide 22

Slide 22 text

How does it work?
{{title}}

Slide 23

Slide 23 text

Demo 1 Use the ngc command to generate the transpiled code $ node_modules/.bin/ngc

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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); }); }

Slide 26

Slide 26 text

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); }

Slide 27

Slide 27 text

Tree Shaking

Slide 28

Slide 28 text

Bundle size reduced

Slide 29

Slide 29 text

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); }); }

Slide 30

Slide 30 text

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); }); }

Slide 31

Slide 31 text

ng_if.ts @Directive({ selector: '[ngIf]' }) export class NgIf { constructor( private _viewContainer: ViewContainerRef, templateRef: TemplateRef) { this._thenTemplateRef = templateRef; } ... }

Slide 32

Slide 32 text

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); }

Slide 33

Slide 33 text

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); }

Slide 34

Slide 34 text

Bundle size reduced Faster Compilation

Slide 35

Slide 35 text

Easier to debug

Slide 36

Slide 36 text

Demo 2 Debugging with Ivy

Slide 37

Slide 37 text

Debugging export class AppComponent { title = 'angular-ivy-lazy-hoc-talk'; show: boolean; }

Slide 38

Slide 38 text

Debugging with View Engine

Slide 39

Slide 39 text

Debugging with Ivy

Slide 40

Slide 40 text

Bundle size reduced Better template debugging Faster Compilation

Slide 41

Slide 41 text

Dynamic loading

Slide 42

Slide 42 text

Demo 3 Dynamic Loading

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Bundle size reduced Better template debugging Faster Compilation Better dynamic loading

Slide 45

Slide 45 text

HOC A function which gets a component and returns a component And also affecting the component in between…

Slide 46

Slide 46 text

Demo 4 Experimental HOC

Slide 47

Slide 47 text

Higher Order Components Bundle size reduced Better template debugging Faster Compilation Better dynamic loading

Slide 48

Slide 48 text

• 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

Slide 49

Slide 49 text

http://bit.ly/all-you-need-to-know-angular-ivy @eliraneliassy

Slide 50

Slide 50 text

Special Thank @itayoded

Slide 51

Slide 51 text

Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy