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
130
Successful with Signals: 3 Effective Rules
Manfred Steyer
PRO
May 27, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
210
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
190
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
140
Successful with Signals: 3 Rules for Your Architecture @.NET UserGroup Bern
manfredsteyer
PRO
0
42
Improving Your Architecture with Forensic Analysis
manfredsteyer
PRO
0
90
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
320
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
27
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
370
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
100
Other Decks in Programming
See All in Programming
今日で分かる!カスタムコップの作り方
krpk1900
2
270
LangChain & LangServeでAPIを爆速作成
kijitorabuti
2
360
Piniaの現状と今後
waka292
2
520
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
920
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
670
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
160
perl for shell, awk and sed programmers
mackee
2
1k
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
160
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
2.1k
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2.1k
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
5
2k
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
1.2k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
131
8.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Building Adaptive Systems
keathley
38
2.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
RailsConf 2023
tenderlove
28
860
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Why Our Code Smells
bkeepers
PRO
334
57k
Adopting Sorbet at Scale
ufuk
73
9k
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