Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 eliran.eliassy@gmail.com eliraneliassy https://eliassy.dev https://e-square.io