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
Migrating to Signals: A Practical Workshop
Search
Manfred Steyer
PRO
March 21, 2024
Programming
0
420
Migrating to Signals: A Practical Workshop
Manfred Steyer
PRO
March 21, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
40
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
31
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
84
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
80
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
Apache Hive 4 on Treasure Data
ryukobayashi
0
350
Site Reliability Engineering for GMO
pyama86
8
1k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
430
Goのエラースタックトレースの歴史と今後
sonatard
9
1.6k
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
Code Reviews
bkuhlmann
4
890
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
820
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
970
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Music & Morning Musume
bryan
41
5.6k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Writing Fast Ruby
sferik
621
60k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Being A Developer After 40
akosma
57
580k
Optimizing for Happiness
mojombo
370
69k
Transcript
AngularArchitects.io | @ManfredSteyer Migrating to Signals: A Practical Workshop
None
None
None
Agenda • Austrian Desserts • Signals & Computed • Input
Signals & Model Signals • Signals & Change Detection • Effects • RxJS-Interop • Stores • BONUS: NGRX Signal Store
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
None
None
None
None
None
Your Options a) Just watch the live coding b) Check
out the solution branches c) Do labs later d) Do labs during live coding
Demo
Demo https://angularArchitects.io/ng-conf-24
Signals & Computed
Simple Reactivity with Signals Signal 4711 Consumer read set notify
4712
Demo Branch: 01-signals-starter
Architecture Rule #1 Synchronously derive state where possible
Input Signals & Model Signals
Demo Branch: 02-sub-comp-starter
Signals & Change Detection
Demo Branch: 03-cd-starter
Effects
Demo Branch: 04-effects-starter
Architecture Rule #2 Avoid effects propagating state and signal writes
RxJS-Interop
Demo Branch: 05-rxjs-interop-starter
Demo Branch: 06-unsubscribe-experiment-starter
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
BONUS: NGRX Signal Store
Demo Branch: 08-signal-store-starter
Demo Branch: 09-custom-feature-starter
Demo Branch: 09b-generic-feature
Free eBook (6th Edition) angularArchitects.io/ebook
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
None
ManfredSteyer AngularArchitects.io