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
180
Successful with Signals: 3 Effective Rules
Manfred Steyer
PRO
May 27, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
67
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
68
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
280
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
89
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
94
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
950
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
160
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
XP, Testing and ninja testing
m_seki
3
190
童醫院敏捷轉型的實踐經驗
cclai999
0
190
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Why Our Code Smells
bkeepers
PRO
337
57k
Writing Fast Ruby
sferik
628
61k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
What's in a price? How to price your products and services
michaelherold
246
12k
Thoughts on Productivity
jonyablonski
69
4.7k
How to Ace a Technical Interview
jacobian
277
23k
It's Worth the Effort
3n
185
28k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
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