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
510
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
96
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
170
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
95
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
270
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
100
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
AHC035解説
terryu16
0
730
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
小さな開発会社を作った理由
polidog
0
1.9k
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Namespace on read
tagomoris
2
370
CSC307 Lecture 08
javiergs
PRO
0
330
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
英語
s_shimotori
1
220
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Navigating Team Friction
lara
181
13k
Fireside Chat
paigeccino
25
2.8k
Designing Experiences People Love
moore
136
23k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
The Pragmatic Product Professional
lauravandoore
29
6.1k
It's Worth the Effort
3n
181
27k
Writing Fast Ruby
sferik
623
60k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Code Reviewing Like a Champion
maltzj
517
39k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
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