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
290
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
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
130
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
270
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
230
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
150
Successful with Signals: 3 Rules for Your Architecture @.NET UserGroup Bern
manfredsteyer
PRO
0
43
Improving Your Architecture with Forensic Analysis
manfredsteyer
PRO
0
100
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
320
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
28
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
390
Other Decks in Programming
See All in Programming
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
2
320
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
190
役立つログに取り組もう
irof
18
5.3k
EventSourcingの理想と現実
wenas
5
1.9k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
350
Server Driven Compose With Firebase
skydoves
0
320
Workflow automationによるインシデント原因調査の自動化
showwin
1
120
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
400
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
110
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.2k
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
0
200
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
4.2k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Optimising Largest Contentful Paint
csswizardry
32
2.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Designing for Performance
lara
604
68k
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