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
44
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
210
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
86
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
150
Successful with Signals: 3 Effective Rules @FrankenJS
manfredsteyer
PRO
0
210
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
130
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
270
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
90
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
150
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
Server-Side目線で見る、Kotlin Festの楽しみ方
n_takehata
0
170
宇宙一早くAmazon Bedrock 生成AIアプリ開発入門の献本が届いたので 感想をしみじみ語る
ymd65536
1
140
CSC307 Lecture 01
javiergs
PRO
0
250
2024/7/11発刊!開発生産性の教科書がざっとわかるスライド 2024/06/20 / A Brief Overview of the Textbook on Development Productivity
ma3tk
0
110
Kotlin Standard Library Gems
antonarhipov
2
220
並行処理を学びGuzzleと仲良くなる
shimabox
2
310
Adding Tests to Untestable Legacy Code
afilina
PRO
0
180
dbt v1.8で追加された単体テストを触ってみた
k_data_analyst
2
250
Web 開発における Deno Fresh の活用例:ペアプロタイマー timer.team の開発
lef237
1
590
What's new in Xcode 16 ダイジェスト
enomotok
0
140
Railsでクリーンアーキテクチャを考えてきた
suzukimar
5
1.1k
about #67401 //go:linkname
andpad
1
18k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Faster Mobile Websites
deanohume
300
30k
Become a Pro
speakerdeck
PRO
14
4.7k
Product Roadmaps are Hard
iamctodd
PRO
46
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
128
32k
BBQ
matthewcrist
80
8.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
7.1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Web Components: a chance to create the future
zenorocha
307
41k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
13
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
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