Change detection in the world of Ivy

Angular is changing, and with the upcoming release of Ivy, it becomes much leaner and dynamic than before.
But how the change detection mechanism should work in the world of ivy and dynamic components?

Join me for a live coding session to understand how change detection works, and how it will look like when Ivy will be released.

Transcript

1. Change Detection In the world of Ivy
2. About mySelf • Experienced FE developer, specialised in B2C applications • Founder & developer @ e-square.io • Angular-IL & AngularUP conf CO-organiser • Writer for AngularInDepth
3. Building powerful Angular community
5. Why we need the change Detection?
6. Change Projection!
7. What cause the change? Events - click, submit…. XHR - Fetching data from server Timers - setTimout(), setInterval()
8. How Angular knows?
9. Zones!
10. But…let’s understand JS first
11. Stack, Web API, Event loop, Task Queue
12. So…Zones can preform an operation each time code enter or exits at task
13. foo(); setTimeout(() => doSomethimg(), 0); bar();
14. Zone.run(() => { foo(); setTimeout(() => doSomethimg(), 0); bar(); });
15. zone.fork({ name: 'loggerZone', onEnter: () => {console.log('start')}, onLeave: () => {console.log('end')} }) .run(() => { foo(); setTimeout(() => doSomethimg(), 0); bar(); });
16. And that’s exactly what Angular does… NgZone is a forked zone with additional APIs based on observable onMicrotaskEmpty(), onError()
17. So, What’s ticks Angular? this.zone.onMicrotaskEmpty() .subscribe(()=> this.zone.run(()=> this.tick)); tick(){ this.changeDetectionRefs .forEach(element => { element.detectChanges(); }); }
18. 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
19. And How does it work?
20. And How does it work? Event!
21. And How does it work? CD CD CD CD CD CD CD
22. Sounds inefficient?
23. You right!
24. You right!
25. Where the problem begins? Mutable objets
26. Changing mutable object don’t change the reference…so Angular have to check for changes
27. Immutable for the rescue! With…onPush strategy!
28. Angular can now skip entire Change Detection subtree when input properties don’t change
29. @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], })
30. @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) Tick change detection only when input change
31. And How does it work? onPush
32. Live coding?
33. Summary Zone.js - automatic change detection Manual Change detection async pipe and markForCheck The future of Angular with zone less components
34. Thank You @EliranEliassy eliran.eliassy@gmail.com eliraneliassy https://eliassy.dev https://e-square.io