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
230
Change Detection - Deep Dive
Rainer Hahnekamp
February 29, 2024
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Test Fest | Angular Unit Tests Distilled
rainerhahnekamp
0
360
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
2
790
Software richtig testen - Ganz praktisch!
rainerhahnekamp
0
95
Quality with Angular: Tools and Processes
rainerhahnekamp
0
340
Evolving Architecture
rainerhahnekamp
3
380
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
200
Zoneless Testing
rainerhahnekamp
0
230
Towards Modern Change Detection
rainerhahnekamp
0
38
Testing in 2024: A "dynamic" Situation
rainerhahnekamp
0
210
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
Operating Operator
shhnjk
1
580
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
120
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7k
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
MobileActOsaka_250704.pdf
akaitadaaki
0
120
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.9k
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
120
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GitHub's CSS Performance
jonrohan
1031
460k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
301
51k
For a Future-Friendly Web
brad_frost
179
9.8k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Thoughts on Productivity
jonyablonski
69
4.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Documentation Writing (for coders)
carmenintech
72
4.9k
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