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
170
Change Detection - Deep Dive
Rainer Hahnekamp
February 29, 2024
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Towards Modern Change Detection
rainerhahnekamp
0
270
Cypress or Playwright?
rainerhahnekamp
0
200
Powerduo Nx and Sheriff
rainerhahnekamp
0
66
NgRx Signal Store
rainerhahnekamp
0
190
Signals Unleashed: The Full Guide
rainerhahnekamp
0
470
NgRx Signal Store
rainerhahnekamp
0
83
Basta Spring 2024 - Cypress und Playwright
rainerhahnekamp
0
300
Powerduo Nx and Sheriff
rainerhahnekamp
0
80
Match Made in Heaven: NgRx SignalStore
rainerhahnekamp
0
36
Other Decks in Technology
See All in Technology
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
0
130
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
320
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
280
拓展QA日常工作的邊界
line_developers_tw
PRO
0
550
Taking Flight with Tailwind CSS
opdavies
0
4.3k
5分で分かる(かもしれない) Vector engine for OpenSearch Serverless
tsukuboshi
1
390
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2.9k
AWS CLIの起動が重くてつらいので aws-sdk-client-go を書いた / kamakura.go#6
fujiwara3
4
1.8k
スムーズなエントリーで滞在を心地よくスタート_team 1@NOT A HOTEL
satomifukuda
0
100
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
320
【TSkaigi】2024/05/11 当日スライド
kimitashoichi
14
3.9k
DevRelによる信頼構築とデータ駆動で変わるエンジニア採用 / DevRel Trust Building to Data Driven Engineering Hiring
bobtani
1
130
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
13
2.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
What's new in Ruby 2.0
geeforr
338
31k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
Agile that works and the tools we love
rasmusluckow
325
20k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
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