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
June 18, 2024
Programming
0
160
Successful with Signals: 3 Effective Rules
Manfred Steyer
PRO
June 18, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
11
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
7
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
3
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
840
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
470
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
24
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
440
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
380
Other Decks in Programming
See All in Programming
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
270
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
Rubyと自由とAIと
yotii23
6
1.8k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
楽しく向き合う例外対応
okutsu
0
660
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
680
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
920
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
RailsConf 2023
tenderlove
29
1k
A Tale of Four Properties
chriscoyier
158
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Gamification - CAS2011
davidbonilla
80
5.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Typedesign – Prime Four
hannesfritz
40
2.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Transcript
AngularArchitects.io | @ManfredSteyer Successful with Signals: 3 Effective Rules
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