AngularArchitects.io | @ManfredSteyer
Modern Angular with Lightweight Stores:
New Rules and Options
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
Lightweight Stores
Component
Lightweight Store
method()
Observables,
Signals,
etc.
sync/ async
Slide 8
Slide 8 text
Two Reasons for a Store
Manage
State
Streamline
Dataflow
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Stores Streamline Reactive Flow
Component
Lightweight Store
method()
Observables,
Signals,
etc.
sync/ async
Currently:
Main Use Case for Signas
Slide 13
Slide 13 text
Some Lightweight Stores …
Akita Elf Pinia NGRX Signal
Store
Slide 14
Slide 14 text
How do Lightweight
Stores Change
Architecture Rules?
Slide 15
Slide 15 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 16
Slide 16 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 17
Slide 17 text
Baseline
Architecture
Slide 18
Slide 18 text
Stack
NGRX Signal
Store
Angular
Nx
Monorepo
Slide 19
Slide 19 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 20
Slide 20 text
Nx
Libs:
Modularization
Incremental
CI/CD
Build Cache
Parallelization
in Builds
Slide 21
Slide 21 text
Sheriff:
Module Boundaries on a per-folder basis
@softarc/eslint-plugin-sheriff
Works with and without Nx
Conclusion
Lightweight Stores …
… size of a (sub-)feature
… can live everywhere
… orchestrated by a feature service
… leverage layering to prevent cycles
… Use DevTools!
Slide 40
Slide 40 text
Conclusion
Architecture …
… vertically sliced by domains
… horizontally by layers
… enforced by Sheriff or Nx
… fast builds with Nx
Slide 41
Slide 41 text
"Krapfen"
Slide 42
Slide 42 text
ManfredSteyer
AngularArchitects.io
Slides & Examples Remote Company Workshops
and Consulting
http://angulararchitects.io