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
3 Effective Rules for Success with Signals in ...
Search
Manfred Steyer
PRO
July 17, 2024
Programming
1
340
3 Effective Rules for Success with Signals in Angular
Manfred Steyer
PRO
July 17, 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
550
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
440
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
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
180
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
6
840
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
650
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
310
CSC305 Summer Lecture 12
javiergs
PRO
0
110
TanStack DB ~状態管理の新しい考え方~
bmthd
2
330
CSC305 Summer Lecture 06
javiergs
PRO
0
100
コーディングエージェント時代のNeovim
key60228
1
100
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
480
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Designing for humans not robots
tammielis
253
25k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Done Done
chrislema
185
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Transcript
AngularArchitects.io | @ManfredSteyer 3 Effective Rules for Success with Signals
in Angular Angular Berlin
None
None
None
Agenda • Austrian Desserts • Computed • Rendering Effects •
Business Effects • RxJS Interop • Stores
Result • 3 Rules (of thumb) • 3 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
Demo Branch: 01a-add-signals
Demo Branch: 02a-input-signals
Architecture Rule #1 Synchronously derive state where possible
Rendering Effects
Rendering vs. Business Effects?
Current effect implementation: Mainly for rendering
Demo Branch: 04c-effects
Architecture Rule #2 Avoid (rendering) effects propagating state and Signal
writes
Business Effects
What are Business Effects? Effect triggering (business) logic on Signal
change
Why Signals as Events are Critical? Glitch-free property: Events might
get lost Quickly leads to Effects with Signal Writes Chains of change and cycles?
Alternative Use Event behind Signal Change Event (click, data, etc.)
Signal { … } Logic
Alternative Use Event behind Signal Change Event (click, data, etc.)
Signal { … } Logic
However … Angular APIs are more and more Signal-based Using
Events behind Signal change might feel unnatural <input [(ngModel)]="mySignal" (change)="…">
Demo Branch: 08b-details
Hint #3 Be aware of options and consequences of Business
Effects
RxJS-Interop
Hint #1 Signals play well together with RxJS
Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream
Pancakes
Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream
Pancakes switchMap, mergeMap, concatMap, exhaustMap
Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream
Pancakes switchMap, mergeMap, concatMap, exhaustMap
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() Currently: Main Use Case for Signas Business Effects, Events, RxJS and/or RxJS
Demo Branch: 07-state-service-starter
Architecture Rule #3 Stores make your reactive flow more manageable
Free eBook (6th Edition) angularArchitects.io/ebook
Conclusion Architecture Rule #1 Synchronously derive state where possible Architecture
Rule #2 Avoid (rendering) 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) Hint #3 Be aware of options and consequences of Business Effects
None
AngularArchitects.io Slides & Examples ManfredSteyer