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
230
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 Patterns for Your Architecture
manfredsteyer
PRO
0
32
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
280
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
220
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
250
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
200
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
200
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
110
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
340
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
120
Other Decks in Programming
See All in Programming
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
3
1.3k
快適な開発と高セキュリティを実現するCryptoKitを活用したCoreDataのデータ暗号化術
grandbig
1
300
労務ドメインを快適に開発する方法 / How to Comfortably Develop in the Labor Domain
yuki21
1
250
これからの時代の新標準!SwiftTestingへの移行とトラブルシューティング
uetyo
0
440
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.5k
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
210
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
370
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
180
What we keep in mind when migrating from Serverless Framework to AWS CDK and AWS SAM
kasacchiful
1
130
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
240
どうしてこうなった?から理解するActive Recordの関連の裏側
willnet
5
510
Polars を Kaggle コンペで使ってみた(LMSYS Chatbot Arena)
kohecchi
1
360
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Testing 201, or: Great Expectations
jmmastey
35
6.9k
The Pragmatic Product Professional
lauravandoore
30
6.2k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
GraphQLとの向き合い方2022年版
quramy
43
13k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
For a Future-Friendly Web
brad_frost
173
9.3k
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