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
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
Other Decks in Programming
See All in Programming
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
250
GraphQLにおけるページネーションベストプラクティス
estie
0
150
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
2
770
いまあるチームにフィットさせる Serverless そして Platform Engineeringへの挑戦 / Serverless Fits the Team You Have and Platform Engineering
seike460
PRO
2
1.1k
Prolog入門
qnighy
4
1.1k
Shinjuku.rb#95:心の技術書紹介
free_world21
1
120
グローバルなソフトウェアテスト組織における課題と戦略 / Challenges and Strategies in a Global Software Testing Organization #mf_techday
imtnd
0
100
LLMと音声基盤モデルを用いた音声認識
spiralai
PRO
0
120
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
140
DroidKaigi 2024 - You will 💜 Becoming a fullstack developer with your Android skills
brah
0
110
CSC305 Lecture 01
javiergs
PRO
0
130
GraphQLでいい感じの検索APIを作りたい
estie
0
140
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
309
42k
Why Our Code Smells
bkeepers
PRO
334
57k
Optimizing for Happiness
mojombo
375
69k
Navigating Team Friction
lara
183
13k
Building Adaptive Systems
keathley
36
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Docker and Python
trallard
40
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
A Tale of Four Properties
chriscoyier
155
22k
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