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
330
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
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
53
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
120
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
280
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
180
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
83
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
94
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
71
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
1
150
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
840
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
360
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
220
Is Xcode slowly dying out in 2025?
uetyo
1
170
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
540
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
240
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
1.9k
Using AI Tools Around Software Development
inouehi
0
1.2k
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
120
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Agile that works and the tools we love
rasmusluckow
329
21k
Designing for humans not robots
tammielis
253
25k
We Have a Design System, Now What?
morganepeng
52
7.6k
How to Ace a Technical Interview
jacobian
277
23k
Bash Introduction
62gerente
614
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Six Lessons from altMBA
skipperchong
28
3.8k
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