Deep Dive: Change Detection

At the core of every frontend framework lies the process where the DOM needs to be updated, a defining factor for performance and, consequently, the success of the framework. In Angular, this process seems almost magical. When we modify a property, the change promptly appears in the UI. This is commonly known as change detection. However, numerous other terms are often thrown into the mix, such as zone.js, dirty marking, OnPush, and Signals. Through animations and live coding, I'll break down the inner workings of change detection so that you will be able to customize it to your own needs.

Transcript

1. RainerHahnekamp Deep Dive Change Detection Rainer Hahnekamp 21.5.2024, iJS San Diego
2. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
3. RainerHahnekamp
4. RainerHahnekamp Why: Upcoming Changes Hybrid Mode Zoneless Signal Components
5. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (DOM and Components in Sync)
6. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Component's value changes)
7. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...)
8. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅
9. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅
10. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅
11. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅
12. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅
13. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅
14. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅
15. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅
16. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Detecting Changes...) ✅ ✅ ✅ ✅
17. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅
18. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅ ✅
19. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅ ✅
20. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Updating DOM) ✅ ✅ ✅ ✅ ✅ ✅
21. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection (Done)
22. RainerHahnekamp Triggers for Change Detection Component Tree DOM Submit Cancel Zone.js Handled DOM Events Asynchronous Tasks
23. RainerHahnekamp DOM Updates via Change Detection are already perfect
24. RainerHahnekamp Changes have to be found Runs too often Change Detection Improvements Exclude Components OnPush Issues
25. RainerHahnekamp Don't check it, unless I tell you! ChangeDetectionStrategy.OnPush
26. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Done)
27. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) ✅
28. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) ✅ ✅
29. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) ✅ ✅ ✅
30. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) ✅ ✅ ✅ ✅
31. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Done)
32. RainerHahnekamp Criteria markForCheck Immutable Property Binding Handled DOM Events async Pipe Signal Change manually via markForCheck
33. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Handled DOM Event) Zone.js
34. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Handled DOM Event) Zone.js
35. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (markForCheck) Zone.js
36. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Handled DOM Event triggers Change Detection) Zone.js
37. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) Zone.js ✅
38. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) Zone.js ✅ ✅
39. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) Zone.js ✅ ✅ ✅
40. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) Zone.js ✅ ✅ ✅ ✅
41. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) Zone.js ✅ ✅ ✅ ✅ ✅
42. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Detecting Changes...) Zone.js ✅ ✅ ✅ ✅ ✅
43. RainerHahnekamp Component Tree DOM Submit Cancel Change Detection with OnPush (Done) Zone.js ✅ ✅ ✅ ✅ ✅ ✅
44. RainerHahnekamp Changes have to be found Runs too often Change Detection Improvements Exclude Components OnPush Local CD Signals & OnPush Angular 17 Issues
45. RainerHahnekamp Signal Change with OnPush & without DOM Event Local Change Detection
46. RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection Zone.js
47. RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (asynchronous task ends) Zone.js
48. RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Signal changes) Zone.js
49. RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Special Dirty Marking) Zone.js
50. RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Special Dirty Marking) Zone.js
51. RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Zone.js starts because of asynchronous task) Zone.js Zone.js
52. RainerHahnekamp Component Tree DOM Submit Cancel Local Change Detection (Zone.js starts because of asynchronous task) Zone.js
53. RainerHahnekamp DOM Submit Cancel Local Change Detection (Check runs on one component only) Zone.js Component Tree ✅
54. RainerHahnekamp Changes have to be found Runs too often Change Detection Improvements Exclude Components OnPush Local CD Signals & OnPush Angular 17 Angular 18 Zoneless With zone.js as "Hybrid Mode" Issues
55. RainerHahnekamp markForCheck triggers CD Zoneless Change Detection
56. RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection Zone.js
57. RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection Zone.js
58. RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection (Change happens)
59. RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection ("Somebody/-thing calls markForCheck()) markForCheck()
60. RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection (markForCheck triggers CD) markForCheck()
61. RainerHahnekamp Component Tree DOM Submit Cancel Zoneless Change Detection (Checkend & Done) ✅ ✅ ✅ ✅ ✅ ✅
62. RainerHahnekamp Changes have to be found Runs too often Change Detection Improvements Exclude Components OnPush Local CD Signals & OnPush Signal Components CD on View-Level Angular 17 Angular 18 Angular ? Zoneless With zone.js as "Hybrid Mode" Issues
63. RainerHahnekamp Signal Components (What we know so far…) OnPush Behavior Zone-free No Control Flow Structural Directives Standalone Fine-grained CD Speculation
64. RainerHahnekamp Component Tree DOM Submit Cancel Signal Components
65. RainerHahnekamp Component Tree DOM Submit Cancel Signal Components
66. RainerHahnekamp Component Tree DOM Submit Cancel Signal Components Fine-grained
67. RainerHahnekamp Be ready for the Future Use Signals
68. RainerHahnekamp Further Reading • Matthieu Riegler ◦ Hybrid Change detection in v18 | blog | Matthieu Riegler ◦ Zoneless Change Detection for everybody in preview in Angular 17.1 | blog | Matthieu Riegler ◦ The state of Change Detection in Angular v17 | blog | Matthieu Riegler • Enea Jahollari ◦ A new era for Angular - Zoneless Change Detection - justangular.com ◦ A change detection, zone.js, zoneless, local change detection, and signals story 📚 - justangular.com • Evgeniy Tuboltsev ◦ Preparing our Code for Zoneless Angular | by 🪄 OZ 🎩 | Mar, 2024 | Medium ◦ Angular Change Detection — Today and Tomorrow | by 🪄 OZ 🎩 | Medium
69. RainerHahnekamp Further Watching https://youtu.be/6W6gycuhiN0 https://youtu.be/0PJPZ3rLqrY
70. RainerHahnekamp Thanks