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
130
Successful with Signals: 3 Effective Rules
Manfred Steyer
PRO
June 18, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
180
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
160
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
130
Successful with Signals: 3 Rules for Your Architecture @.NET UserGroup Bern
manfredsteyer
PRO
0
41
Improving Your Architecture with Forensic Analysis
manfredsteyer
PRO
0
86
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
310
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
25
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
Competitionsだけじゃない! Kaggle Notebooks Grandmasterのすすめ
corochann
2
920
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
380
CSC509 Lecture 07
javiergs
PRO
0
130
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
230
Debugging: A Few Things You Should Know
jmatsu
1
130
UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs
aoseyuu
2
380
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
150
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
670
(Deep|Web) Link support with expo-router
mrtry
0
190
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
0
280
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
160
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
130
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Automating Front-end Workflow
addyosmani
1365
200k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
630
Teambox: Starting and Learning
jrom
132
8.7k
For a Future-Friendly Web
brad_frost
174
9.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
How to Think Like a Performance Engineer
csswizardry
18
1k
Designing the Hi-DPI Web
ddemaree
280
34k
Visualization
eitanlees
143
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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