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
180
Change Detection - Deep Dive
Rainer Hahnekamp
February 29, 2024
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Refactoring in Angular via Metrics, Modularity & Testing
rainerhahnekamp
0
280
Testing in 2024
rainerhahnekamp
0
260
Modern Angular
rainerhahnekamp
0
130
Deep Dive: Change Detection
rainerhahnekamp
0
240
Testing Angular in 2024
rainerhahnekamp
0
91
Towards Modern Change Detection
rainerhahnekamp
0
290
Cypress or Playwright?
rainerhahnekamp
0
240
Powerduo Nx and Sheriff
rainerhahnekamp
0
98
NgRx Signal Store
rainerhahnekamp
0
240
Other Decks in Technology
See All in Technology
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
簡単に始めるSnowflakeの機械学習
nayuts
1
190
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Featured
See All Featured
Done Done
chrislema
179
15k
Navigating Team Friction
lara
181
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
4 Signs Your Business is Dying
shpigford
178
21k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Facilitating Awesome Meetings
lara
46
5.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
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