Slide 1

Slide 1 text

Change Detection In the world of Ivy

Slide 2

Slide 2 text

About mySelf • Experienced FE developer, specialised in B2C applications • Founder & developer @ e-square.io • Angular-IL & AngularUP conf CO-organiser • Writer for AngularInDepth

Slide 3

Slide 3 text

Building powerful Angular community

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Why we need the change Detection?

Slide 6

Slide 6 text

Change Projection!

Slide 7

Slide 7 text

What cause the change? Events - click, submit…. XHR - Fetching data from server Timers - setTimout(), setInterval()

Slide 8

Slide 8 text

How Angular knows?

Slide 9

Slide 9 text

Zones!

Slide 10

Slide 10 text

But…let’s understand JS first

Slide 11

Slide 11 text

Stack, Web API, Event loop, Task Queue

Slide 12

Slide 12 text

So…Zones can preform an operation each time code enter or exits at task

Slide 13

Slide 13 text

foo(); setTimeout(() => doSomethimg(), 0); bar();

Slide 14

Slide 14 text

Zone.run(() => { foo(); setTimeout(() => doSomethimg(), 0); bar(); });

Slide 15

Slide 15 text

zone.fork({ name: 'loggerZone', onEnter: () => {console.log('start')}, onLeave: () => {console.log('end')} }) .run(() => { foo(); setTimeout(() => doSomethimg(), 0); bar(); });

Slide 16

Slide 16 text

And that’s exactly what Angular does… NgZone is a forked zone with additional APIs based on observable onMicrotaskEmpty(), onError()

Slide 17

Slide 17 text

So, What’s ticks Angular? this.zone.onMicrotaskEmpty() .subscribe(()=> this.zone.run(()=> this.tick)); tick(){ this.changeDetectionRefs .forEach(element => { element.detectChanges(); }); }

Slide 18

Slide 18 text

And How does it work? In Angular every Component have his own ChangeDetectionRef ChangeDetectionRef works on the DOM from top to bottom like a tree

Slide 19

Slide 19 text

And How does it work?

Slide 20

Slide 20 text

And How does it work? Event!

Slide 21

Slide 21 text

And How does it work? CD CD CD CD CD CD CD

Slide 22

Slide 22 text

Sounds inefficient?

Slide 23

Slide 23 text

You right!

Slide 24

Slide 24 text

You right!

Slide 25

Slide 25 text

Where the problem begins? Mutable objets

Slide 26

Slide 26 text

Changing mutable object don’t change the reference…so Angular have to check for changes

Slide 27

Slide 27 text

Immutable for the rescue! With…onPush strategy!

Slide 28

Slide 28 text

Angular can now skip entire Change Detection subtree when input properties don’t change

Slide 29

Slide 29 text

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], })

Slide 30

Slide 30 text

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) Tick change detection only when input change

Slide 31

Slide 31 text

And How does it work? onPush

Slide 32

Slide 32 text

Live coding?

Slide 33

Slide 33 text

Summary Zone.js - automatic change detection Manual Change detection async pipe and markForCheck The future of Angular with zone less components

Slide 34

Slide 34 text

Thank You @EliranEliassy [email protected] eliraneliassy https://eliassy.dev https://e-square.io