Tweet
Tweet

Slide 1

Slide 1 text

Everything you should know about Angular Ivy @eliraneliassy

Slide 2

Slide 2 text

About mySelf • Founder & developer @ • GDE for Angular & Web Technologies • Angular-IL & AngularUP conf CO-organiser • Writer for AngularInDepth

Slide 3

Slide 3 text

Angular Ivy

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Flashback V2 Template Compiler V4 View Engine V8 Ivy

Slide 6

Slide 6 text

Why Ivy?

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

What can we do?

Slide 11

Slide 11 text

CDN PWA Lazy loading

Slide 12

Slide 12 text

Reduce the bundle!

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

300 375 450 525 600 before Ivy 509 KB

Slide 15

Slide 15 text

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

Slide 16

Slide 16 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 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

How does it work?

Slide 20

Slide 20 text

How does it work?
{{title}}

Slide 21

Slide 21 text

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

Slide 22

Slide 22 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 23

Slide 23 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 24

Slide 24 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 25

Slide 25 text

Tree Shaking

Slide 26

Slide 26 text

Bundle size reduced

Slide 27

Slide 27 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 28

Slide 28 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 29

Slide 29 text

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

Slide 30

Slide 30 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 31

Slide 31 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 32

Slide 32 text

Bundle size reduced Faster CompilaWon

Slide 33

Slide 33 text

Easier to debug

Slide 34

Slide 34 text

Demo Debugging with Ivy

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Debugging with View Engine

Slide 37

Slide 37 text

Debugging with Ivy

Slide 38

Slide 38 text

Templates type checking

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Why Ivy? Faster Compilation Simpler Debugging Improve type checking Backwards Compatible

Slide 41

Slide 41 text

What’s next?

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

“A component must belong to an NgModule” angular.io

Slide 47

Slide 47 text

״NgModules represent applica2ons״ Rob Wormald, Angular Core

Slide 48

Slide 48 text

I’ve only wanted a component…

Slide 49

Slide 49 text

ApplicaWons ≠ Components

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

But!

Slide 52

Slide 52 text

But! NgModules defines injectors, zones, direcWves, pipes, providers

Slide 53

Slide 53 text

Demo 1 Standalone Component Use the ɵrenderComponent, ɵdetectChanges() and ɵɵdirectiveInject() functions

Slide 54

Slide 54 text

Demo 2 Async Pipe Push pipe

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Demo 3 OnPush components ɵmarkDirty(this)

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Demo 4 Dynamic Import import()

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Demo 5 Experimental HOC The unsubscriber HOC

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

Angular 9 Not Only Ivy

Slide 68

Slide 68 text

• 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 is now a generic class • DeprecaZon of entryComponents • Any many other improvements… Angular 9

Slide 69

Slide 69 text

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:

Slide 70

Slide 70 text

• 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!

Slide 71

Slide 71 text

http://bit.ly/all-you-need-to- know-angular-ivy http://bit.ly/the-future-of- angular-components

Slide 72

Slide 72 text

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