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
Migrating to Signals: A Practical Workshop
Search
Manfred Steyer
PRO
March 21, 2024
Programming
0
660
Migrating to Signals: A Practical Workshop
Manfred Steyer
PRO
March 21, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
62
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
100
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
88
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
840
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
480
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
26
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
450
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
390
Other Decks in Programming
See All in Programming
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
130
Learning Kotlin with detekt
inouehi
1
200
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
130
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
260
ML.NETで始める機械学習
ymd65536
0
240
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
9
1.5k
AIレビュー導入によるCIツールとの共存と最適化
kamo26sima
1
810
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.1k
CloudRun, Spanner に対する負荷試験の反省と オブザーバビリティによるアプローチ
oyasumipants
1
170
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
640
iOSでQRコード生成奮闘記
ktcryomm
2
130
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
For a Future-Friendly Web
brad_frost
176
9.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Cult of Friendly URLs
andyhume
78
6.2k
Practical Orchestrator
shlominoach
186
10k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Typedesign – Prime Four
hannesfritz
41
2.5k
Making Projects Easy
brettharned
116
6k
Designing for Performance
lara
605
68k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Code Reviewing Like a Champion
maltzj
521
39k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Transcript
AngularArchitects.io | @ManfredSteyer Migrating to Signals: A Practical Workshop
None
None
None
Agenda • Austrian Desserts • Signals & Computed • Input
Signals & Model Signals • Signals & Change Detection • Effects • RxJS-Interop • Stores • BONUS: NGRX Signal Store
About me… Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and Consulting
Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer
Austrian Desserts: Example App
Demo
None
None
None
None
None
Your Options a) Just watch the live coding b) Check
out the solution branches c) Do labs later d) Do labs during live coding
Demo
Demo https://angularArchitects.io/ng-conf-24
Signals & Computed
Simple Reactivity with Signals Signal 4711 Consumer read set notify
4712
Demo Branch: 01-signals-starter
Architecture Rule #1 Synchronously derive state where possible
Input Signals & Model Signals
Demo Branch: 02-sub-comp-starter
Signals & Change Detection
Demo Branch: 03-cd-starter
Effects
Demo Branch: 04-effects-starter
Architecture Rule #2 Avoid effects propagating state and signal writes
RxJS-Interop
Demo Branch: 05-rxjs-interop-starter
Demo Branch: 06-unsubscribe-experiment-starter
Stores
None
None
None
Stores Streamline Reactive Flow Component Store "Intention" Signal sync/ async
computed() computed()
Demo Branch: 07-state-service-starter
Architecture Rule #3 Stores make your reactive flow more manageable
BONUS: NGRX Signal Store
Demo Branch: 08-signal-store-starter
Demo Branch: 09-custom-feature-starter
Demo Branch: 09b-generic-feature
Free eBook (6th Edition) angularArchitects.io/ebook
Conclusion Architecture Rule #1 Synchronously derive state where possible Architecture
Rule #2 Avoid effects propagating state and signal writes Architecture Rule #3 Stores make your reactive flow more manageable Component Store
None
ManfredSteyer AngularArchitects.io