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
120
Successful with Signals: 3 Effective Rules
Manfred Steyer
PRO
May 27, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
32
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
280
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
220
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
250
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
200
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
200
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
110
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
340
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.4k
New Order in Cascade Sorting Order
mugi_uno
3
2.5k
null or undefined
susisu
20
4k
複雑さに立ち向かうための ソフトウェア開発入門
shiz
2
580
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
570
プログラマのための音楽入門
cheebow
4
540
ゲームボーイアドバンスでSwiftを動かそう
k_koheyi
0
510
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
2.5k
開発を加速する共有Swift Package実践
elmetal
PRO
0
300
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
2
240
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
110
Featured
See All Featured
Music & Morning Musume
bryan
46
6k
How to Think Like a Performance Engineer
csswizardry
15
910
Building Adaptive Systems
keathley
36
2.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
35
6.8k
How to name files
jennybc
75
97k
The Pragmatic Product Professional
lauravandoore
30
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
785
250k
GitHub's CSS Performance
jonrohan
1029
450k
Done Done
chrislema
180
16k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Infographics Made Easy
chrislema
239
18k
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