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
420
Migrating to Signals: A Practical Workshop
Manfred Steyer
PRO
March 21, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
40
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
31
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
84
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
80
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
290
VS Code をプロダクトにどう取り込むか
onomax
1
370
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
260
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
210
Goのmultiple errorsについて (2024年4月版)
syumai
4
940
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
970
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
Fast JSX: Don't clone props object #28768
yossydev
1
130
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
What the flash - Photography Introduction
edds
64
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building Adaptive Systems
keathley
31
1.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
How to Ace a Technical Interview
jacobian
272
22k
Clear Off the Table
cherdarchuk
84
310k
Writing Fast Ruby
sferik
621
60k
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