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
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
58
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
67
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
150
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
84
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
58
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
160
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
100
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
230
人には人それぞれのサービス層がある
shimabox
3
470
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
1
130
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
960
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.2k
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
衛星の軌道をWeb地図上に表示する
sankichi92
0
250
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
600
TSConfigからTypeScriptの世界を覗く
planck16
2
1.3k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Site-Speed That Sticks
csswizardry
7
590
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Cult of Friendly URLs
andyhume
78
6.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
It's Worth the Effort
3n
184
28k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
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