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
Next Generation Angular
rainerhahnekamp
0
7
2025-09-05_Hold_the_Line.pdf
rainerhahnekamp
0
130
Test Fest | Angular Unit Tests Distilled
rainerhahnekamp
0
420
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
2
910
Software richtig testen - Ganz praktisch!
rainerhahnekamp
0
130
Quality with Angular: Tools and Processes
rainerhahnekamp
0
400
Evolving Architecture
rainerhahnekamp
3
410
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
210
Zoneless Testing
rainerhahnekamp
0
260
Other Decks in Technology
See All in Technology
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
800
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
100
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
200
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
160
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
710
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
150
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
11
8.7k
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
210
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
160
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2.2k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
RailsConf 2023
tenderlove
30
1.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Code Reviewing Like a Champion
maltzj
526
40k
Thoughts on Productivity
jonyablonski
70
4.9k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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