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
3 Effective Rules for Success with Signals in ...
Search
Manfred Steyer
PRO
July 17, 2024
Programming
1
250
3 Effective Rules for Success with Signals in Angular
Manfred Steyer
PRO
July 17, 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
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
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
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
2
240
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
610
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
110
ドメイン駆動設計を実践するために必要なもの
bikisuke
3
290
Rustではじめる負荷試験
skanehira
5
1.1k
Meet BrowserEngineKit
swiftty
0
190
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
110
快適な開発と高セキュリティを実現するCryptoKitを活用したCoreDataのデータ暗号化術
grandbig
1
300
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
200
Swift Concurrencyとレースコンディション
objectiveaudio
1
380
Swiftで高速フーリエ変換してオーディオビジュアライザーを作る / iOSDC Japan 2024 Day1 Track D
kyome22
2
460
GoのIteratorに詳しくなってしまう
inatonix
1
170
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Docker and Python
trallard
39
3k
Navigating Team Friction
lara
183
13k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
What the flash - Photography Introduction
edds
67
11k
How to Think Like a Performance Engineer
csswizardry
15
910
How to Ace a Technical Interview
jacobian
275
23k
Facilitating Awesome Meetings
lara
49
5.9k
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.6k
The Cost Of JavaScript in 2023
addyosmani
39
5.1k
Transcript
AngularArchitects.io | @ManfredSteyer 3 Effective Rules for Success with Signals
in Angular Angular Berlin
None
None
None
Agenda • Austrian Desserts • Computed • Rendering Effects •
Business Effects • RxJS Interop • Stores
Result • 3 Rules (of thumb) • 3 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
Demo Branch: 01a-add-signals
Demo Branch: 02a-input-signals
Architecture Rule #1 Synchronously derive state where possible
Rendering Effects
Rendering vs. Business Effects?
Current effect implementation: Mainly for rendering
Demo Branch: 04c-effects
Architecture Rule #2 Avoid (rendering) effects propagating state and Signal
writes
Business Effects
What are Business Effects? Effect triggering (business) logic on Signal
change
Why Signals as Events are Critical? Glitch-free property: Events might
get lost Quickly leads to Effects with Signal Writes Chains of change and cycles?
Alternative Use Event behind Signal Change Event (click, data, etc.)
Signal { … } Logic
Alternative Use Event behind Signal Change Event (click, data, etc.)
Signal { … } Logic
However … Angular APIs are more and more Signal-based Using
Events behind Signal change might feel unnatural <input [(ngModel)]="mySignal" (change)="…">
Demo Branch: 08b-details
Hint #3 Be aware of options and consequences of Business
Effects
RxJS-Interop
Hint #1 Signals play well together with RxJS
Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream
Pancakes
Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream
Pancakes switchMap, mergeMap, concatMap, exhaustMap
Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream
Pancakes switchMap, mergeMap, concatMap, exhaustMap
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() Currently: Main Use Case for Signas Business Effects, Events, RxJS and/or RxJS
Demo Branch: 07-state-service-starter
Architecture Rule #3 Stores make your reactive flow more manageable
Free eBook (6th Edition) angularArchitects.io/ebook
Conclusion Architecture Rule #1 Synchronously derive state where possible Architecture
Rule #2 Avoid (rendering) 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) Hint #3 Be aware of options and consequences of Business Effects
None
AngularArchitects.io Slides & Examples ManfredSteyer