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
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
340
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
230
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
17
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
320
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
210
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
220
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
140
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
140
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
150
Other Decks in Programming
See All in Programming
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
230
CloudflareStack でRAGに入門
asahiiwm
0
140
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
710
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
130
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
280
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
230
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
210
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
110
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
490
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1k
return文におけるstd::moveについて
onihusube
1
1.4k
Compose UIテストを使った統合テスト
hiroaki404
0
120
Featured
See All Featured
KATA
mclloyd
29
14k
Code Reviewing Like a Champion
maltzj
521
39k
Rails Girls Zürich Keynote
gr2m
94
13k
Become a Pro
speakerdeck
PRO
26
5.1k
Navigating Team Friction
lara
183
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
RailsConf 2023
tenderlove
29
960
The Cult of Friendly URLs
andyhume
78
6.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
97
17k
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