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
Successful with Signals: 3 Effective Rules
Search
Manfred Steyer
PRO
May 27, 2024
Programming
0
190
Successful with Signals: 3 Effective Rules
Manfred Steyer
PRO
May 27, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
250
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
580
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
450
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
140
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
200
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
340
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
220
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
120
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
AWS Serverless Application Model入門_20250708
smatsuzaki
0
140
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
120
CSC305 Summer Lecture 12
javiergs
PRO
0
130
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
310
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
302
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Thoughts on Productivity
jonyablonski
69
4.8k
Practical Orchestrator
shlominoach
190
11k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing Experiences People Love
moore
142
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Docker and Python
trallard
45
3.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building an army of robots
kneath
306
46k
Transcript
AngularArchitects.io | @ManfredSteyer Successful with Signals: 3 Effective Rules Angular
Warsaw
None
None
None
Agenda • Austrian Desserts • Computed • Effects • RxJS
Interop • Stores
Result • 3 Rules (of thumb) • 2 Hints
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
Computed
Simple Reactivity with Signals Signal 4711 Consumer read set notify
4712
Signal Eventually Zone-less!
flights = signal<Flight[]>([]); const flights = await this.flightService.findAsPromise(from, to); this.flights.set(flights);
<div *ngFor="let f of flights()"> <flight-card [item]="f" /> </div>
from = signal('Paris'); to = signal('London'); flightRoute = computed(() =>
this.from() + ' to ' + this.to());
Demo Branch: 01a-add-signals
Architecture Rule #1 Synchronously derive state where possible
Effects
Demo Branch: 04-effects-starter
Architecture Rule #2 Avoid effects propagating state and signal writes
RxJS-Interop
Demo Branch: 05-rxjs-interop-starter
Hint #1 Signals play well together with RxJS
Hint #2 Avoid Race Conditions (e.g. RxJS and/or loading flag)
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
Free eBook (2nd Edition) angularArchitects.io/modern
More: Angular Architecture Workshop • Maintainable Architectures with Modern Angular
• Strategic Design with Nx & Sheriff • Micro Frontends with Module Federation • Signals and Your Architecture: CD & Zone-less, NGRX & Signal Store, RxJS-Interop German Version in June: Online & Interactive angulararchitects.io/workshop-de
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
Conclusion Hint #1 Signals play well together with RxJS Hint
#2 Avoid Race Conditions (e.g. RxJS and/or loading flag)
None
ManfredSteyer AngularArchitects.io Slides & Examples