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
110
Successful with Signals: 3 Effective Rules
Manfred Steyer
PRO
June 18, 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
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
340
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
120
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
(非公開スライド追加)座談会 「Strict ConcurrencyとSwift 6が開く新時代: 私たちはどう生きるか?」
shiz
1
140
詳解UIWindow
natmark
3
2k
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
私のEbitengineの第一歩
qt_luigi
0
410
New Order in Cascade Sorting Order
mugi_uno
3
2.5k
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
1
930
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
570
Rubyのobject_id
qnighy
6
1.3k
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
2024 컴포즈 정원사
jisungbin
0
140
複雑さに立ち向かうための ソフトウェア開発入門
shiz
2
580
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
180
Featured
See All Featured
The Language of Interfaces
destraynor
153
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Statistics for Hackers
jakevdp
793
220k
A Tale of Four Properties
chriscoyier
155
22k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Code Reviewing Like a Champion
maltzj
518
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
How STYLIGHT went responsive
nonsquared
93
5.1k
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.6k
RailsConf 2023
tenderlove
26
790
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