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
760
Migrating to Signals: A Practical Workshop
Manfred Steyer
PRO
March 21, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
470
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
150
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
350
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
tool ディレクティブを導入してみた感想
sgash708
1
160
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
230
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
980
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
testingを眺める
matumoto
1
130
AI時代に学習する意味はあるのか?
tomoyakamaji
0
100
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
200
Ruby Parser progress report 2025
yui_knk
1
250
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
270
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Statistics for Hackers
jakevdp
799
220k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
How STYLIGHT went responsive
nonsquared
100
5.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Ace a Technical Interview
jacobian
279
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
RailsConf 2023
tenderlove
30
1.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
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