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
120
Successful with Signals: 3 Effective Rules
Manfred Steyer
PRO
June 18, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
10
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
16
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
71
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
320
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
250
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
250
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
200
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
350
Other Decks in Programming
See All in Programming
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
160
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
170
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
340
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
470
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
910
Rustではじめる負荷試験
skanehira
5
1.2k
Prolog入門
qnighy
4
1k
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
140
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
425
64k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
How to train your dragon (web standard)
notwaldorf
85
5.6k
Teambox: Starting and Learning
jrom
131
8.7k
Automating Front-end Workflow
addyosmani
1365
200k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Thoughts on Productivity
jonyablonski
66
4.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Code Review Best Practice
trishagee
62
16k
GitHub's CSS Performance
jonrohan
1029
450k
Optimizing for Happiness
mojombo
375
69k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
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