AngularArchitects.io | @ManfredSteyer
Modern Angular Architectures With
Nx and Lightweight Stores
Slide 2
Slide 2 text
"Krapfen"
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Small Change => Huge Impact
Slide 6
Slide 6 text
What if we changed
for a lightweight store?
Slide 7
Slide 7 text
How do
Lightweight
Stores Change
Architecture
Rules?
Slide 8
Slide 8 text
Stores Streamline Reactive Flow
Component
Lightweight Store
method()
Observables,
Signals,
etc.
sync/ async
Slide 9
Slide 9 text
Some Lightweight Stores …
Akita Elf Pinia NGRX
Signal Store
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Baseline
Architecture
Slide 13
Slide 13 text
Stack
NGRX
Signal Store
Angular
Nx
Monorepo
Slide 14
Slide 14 text
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.
Slide 15
Slide 15 text
Nx
Libs:
Modularization
Incremental
CI/CD
Build Cache
Parallelization
in Builds
Slide 16
Slide 16 text
Sheriff:
Boundaries on a per-folder basis
Rainer Hahnekamp,
AngularArchitects
@softarc/eslint-plugin-sheriff
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