Slide 1

Slide 1 text

Bye Bye NgModules @eliraneliassy

Slide 2

Slide 2 text

About mySelf • Founder & developer @ • 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? Faster Compilation Simpler Debugging Improve type checking Backwards Compatible

Slide 7

Slide 7 text

Reduce the bundle!

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

What’s next?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

״NgModules represent applications״ Rob Wormald, Angular Core

Slide 18

Slide 18 text

I’ve only wanted a component…

Slide 19

Slide 19 text

Applications ≠ Components

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

But!

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Demo 2 Async Pipe Push pipe

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Demo 3 OnPush components ɵmarkDirty(this)

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Demo 4 Dynamic Import import()

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Demo 5 Experimental HOC The unsubscriber HOC

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

• Ivy - 3rd generation of Angular complier is around the corner! • Future of Angular: • Standalone components • Smarter change detection • Easier dynamic loading of modules & components • HOC • Angular Elements Summary Give it a try!

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Thank You @eliraneliassy [email protected] eliraneliassy