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
Modern Angular Architectures With Nx and Lightw...
Search
Manfred Steyer
PRO
May 24, 2024
Programming
0
340
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
Manfred Steyer
PRO
May 24, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
42
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
86
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
5
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
840
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
470
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
24
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
440
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
380
Other Decks in Programming
See All in Programming
PRレビューのお供にDanger
stoticdev
1
240
ML.NETで始める機械学習
ymd65536
0
240
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
230
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
290
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
240
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
390
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
120
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.5k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Typedesign – Prime Four
hannesfritz
41
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Thoughts on Productivity
jonyablonski
69
4.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
BBQ
matthewcrist
87
9.5k
Visualization
eitanlees
146
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
What's in a price? How to price your products and services
michaelherold
244
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Transcript
AngularArchitects.io | @ManfredSteyer Modern Angular Architectures With Nx and Lightweight
Stores
"Krapfen"
None
None
Small Change => Huge Impact
What if we changed for a lightweight store?
How do Lightweight Stores Change Architecture Rules?
Stores Streamline Reactive Flow Component Lightweight Store method() Observables, Signals,
etc. sync/ async
Some Lightweight Stores … Akita Elf Pinia NGRX Signal Store
Agenda 1) Baseline Architecture 2) How Large Should a Store
be? 3) Where To Put The Store? 4) Global and/or Local State? 5) Preventing Cycles, Redundancies, and Inconsistencies
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
Baseline Architecture
Stack NGRX Signal Store Angular Nx Monorepo
Booking Boarding Shared Feature Feature Feature Feature Feature UI UI
UI UI UI UI UI UI UI Data Data Data Data Data Data Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Smart Comp. Dumb Comp.
Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds
Sheriff: Boundaries on a per-folder basis Rainer Hahnekamp, AngularArchitects @softarc/eslint-plugin-sheriff
Nx & Sheriff Folders: Modularization Incremental CI/CD Build Cache Parallelization
in Builds Sheriff
Demo
How Large Should it be?
Feature Sub- Feature
Where to put the Store?
Booking Boarding Shared Feature Feature Feature Feature Feature UI UI
UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Feature
Feature UI Data Util Redux Feature Slice
Feature UI Data Util Lightweight Stores Cmp Cmp Lightweight Stores
can live everywhere! Component vs. Module Exposed vs. Hidden
Demo
Global vs. Local State?
Global vs. Local FeatureStore DomainStore FeatureService UtilityStore
Cycles, Redundancies, and Inconsistencies
Let's think it through … • Layering • Prevent Stores
accessing each other • Redux DevTools
Free eBook (6th Edition) angularArchitects.io/ebook
Conclusion Lightweight Stores … … have the size of a
(sub-)feature … can live everywhere … can be orchestrated by a feature service … can leverage layering to prevent cycles … should use DevTools
"Krapfen"
ManfredSteyer AngularArchitects.io Slides & Examples