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
200
Successful with Signals: 3 Effective Rules
Manfred Steyer
PRO
May 27, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
All About Angular's New Signal Forms
manfredsteyer
PRO
0
120
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
170
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
120
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
67
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
40
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
400
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
660
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
530
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
410
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
520
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
明日から始めるリファクタリング
ryounasso
0
140
What's new in Spring Modulith?
olivergierke
1
140
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
500
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
280
CSC305 Lecture 04
javiergs
PRO
0
270
理論と実務のギャップを超える
eycjur
0
130
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
820
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Gamification - CAS2011
davidbonilla
81
5.5k
Speed Design
sergeychernyshev
32
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Documentation Writing (for coders)
carmenintech
75
5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Raft: Consensus for Rubyists
vanstee
139
7.1k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Docker and Python
trallard
46
3.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
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