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 Lightweight Stores @ngBelgrade 2024
Search
Manfred Steyer
PRO
May 24, 2024
Programming
0
150
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
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
24
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
170
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
84
Successful with Signals: 3 Effective Rules @FrankenJS
manfredsteyer
PRO
0
210
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
120
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
260
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
89
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
140
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
コード生成を活用したgqlgen+dataloaderの実装パターン解説
syumai
5
610
[KR] 2024 DroidKnights: Compose 성능 최적화를 위한 Stability 마스터하기
skydoves
0
730
You may not need XXX in Node.js
masashi
5
880
詳解 "Fixing For Loops in Go 1.22" 自作linterをgolangci-lintへコントリビュートした話
qualiarts
9
800
Railsでクリーンアーキテクチャを考えてきた
suzukimar
5
720
技術カンファレンスをより楽しむためにやるべき N 個のこと / N Things You Should Do to Enjoy Tech Conferences More
mackey0225
2
230
Dive into gomock / Go Conference 2024
utgwkk
13
3.3k
『改訂新版前処理大全』の話と Apache Parquet の話 #TokyoR
bob3bob3
0
170
チームで運用する golangci-lint の向き合い方
sgash708
3
270
ABEMA 画像配信基盤における Cloudflare Workers の活用
peaceiris
7
580
Goバックエンド標準化プロジェクトの取り組み
qualiarts
4
690
RubyKaigi First Effects 〜はじめてのRubyKaigi〜
satoseri
0
280
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
28k
The Art of Programming - Codeland 2020
erikaheidi
46
12k
The Cult of Friendly URLs
andyhume
74
5.8k
How To Stay Up To Date on Web Technology
chriscoyier
783
250k
The Cost Of JavaScript in 2023
addyosmani
25
4.1k
Designing on Purpose - Digital PM Summit 2013
jponch
112
6.6k
Writing Fast Ruby
sferik
623
60k
Happy Clients
brianwarren
92
6.5k
Side Projects
sachag
451
41k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
28
1.7k
Building Your Own Lightsaber
phodgson
101
5.8k
Building Flexible Design Systems
yeseniaperezcruz
321
37k
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