Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Change Detection - Deep Dive
Search
Rainer Hahnekamp
February 29, 2024
Technology
0
210
Change Detection - Deep Dive
Rainer Hahnekamp
February 29, 2024
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Evolving Architecture
rainerhahnekamp
3
290
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
140
Zoneless Testing
rainerhahnekamp
0
160
Towards Modern Change Detection
rainerhahnekamp
0
16
Testing in 2024: A "dynamic" Situation
rainerhahnekamp
0
120
End of Barrel Files: New Modularization Techniques with Sheriff
rainerhahnekamp
0
430
ESLint: Low Hanging Fruits
rainerhahnekamp
0
410
Refactoring in Angular via Metrics, Modularity & Testing
rainerhahnekamp
0
390
Testing in 2024
rainerhahnekamp
0
340
Other Decks in Technology
See All in Technology
アジャイル開発とスクラム
araihara
0
140
What's New in OpenShift 4.18
redhatlivestreaming
0
1.3k
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
8
1.7k
Larkご案内資料
customercloud
PRO
0
590
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
190
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
260
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
4
940
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
2
190
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
290
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
150
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
5
1.2k
A Hidden Pitfall of K8s DNS with Spring Webflux
musaprg
0
350
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
A Tale of Four Properties
chriscoyier
158
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
Making Projects Easy
brettharned
116
6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Done Done
chrislema
182
16k
Navigating Team Friction
lara
183
15k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
The Cult of Friendly URLs
andyhume
78
6.2k
Transcript
RainerHahnekamp Deep Dive Change Detection Rainer Hahnekamp - 29. February
2024 - ngOslo
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
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Triggers for Change Detection Handled DOM Events Asynchronous Tasks
RainerHahnekamp 1. Change Detection with Default Strategy = OnPush =
Default 1. Waiting for Events 3. Dirty Marking 4. Change Detection zone.js 2. Event Happens
RainerHahnekamp Change Detection: OnPush • Only checks if Component is
dirty • No dirty marking by asynchronous task!
RainerHahnekamp 2. Change Detection: Click Event in Default Component =
OnPush = Default 1. Waiting for Events 3. Dirty Marking 4. Change Detection zone.js 2. Event Happens
RainerHahnekamp 3. Change Detection: Click Event in OnPush Component =
OnPush = Default 1. Waiting for Events 3. Dirty Marking 2. Event Happens 4. Change Detection zone.js
RainerHahnekamp Criteria markForCheck Immutable Property Binding Handled DOM Events async
Pipe Signal Change (Local Change Detection) manually via markForCheck
RainerHahnekamp 4. Local Change Detection: Signal Change in OnPush Component
= OnPush = Default 1. Waiting for Events 3. Dirty Marking 4. Change Detection zone.js 2. Event Happens
RainerHahnekamp Change Detection in the Future • Careful with OnPush
with zone.js • "Acceptable" with upcoming Scheduler • Simple & Easy with upcoming Signal Components
RainerHahnekamp Further Reading and Watching https://medium.com/ngconf/ngrx-signal-store-the-mis sing-piece-to-signals-ac125d804026 https://youtu.be/0PJPZ3rLqrY