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 @Fra...
Search
Manfred Steyer
PRO
May 14, 2024
0
240
Successful with Signals: 3 Effective Rules @FrankenJS
Manfred Steyer
PRO
May 14, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Improving Your Architecture with Forensic Analysis
manfredsteyer
PRO
0
16
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
210
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
19
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
280
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
89
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
330
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
280
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
260
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
220
Featured
See All Featured
In The Pink: A Labor of Love
frogandcode
139
22k
From Idea to $5000 a Month in 5 Months
shpigford
380
46k
The Language of Interfaces
destraynor
154
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Happy Clients
brianwarren
96
6.6k
Faster Mobile Websites
deanohume
304
30k
Writing Fast Ruby
sferik
623
60k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Fireside Chat
paigeccino
31
2.9k
Designing with Data
zakiwarfel
98
5.1k
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