Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024

Transcript

1. AngularArchitects.io | @ManfredSteyer Modern Angular Architectures With Nx and Lightweight Stores
2. "Krapfen"
5. Small Change => Huge Impact
6. What if we changed for a lightweight store?
7. How do Lightweight Stores Change Architecture Rules?
8. Stores Streamline Reactive Flow Component Lightweight Store method() Observables, Signals, etc. sync/ async
9. Some Lightweight Stores … Akita Elf Pinia NGRX Signal Store
10. 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
11. 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
12. Baseline Architecture
13. Stack NGRX Signal Store Angular Nx Monorepo
14. 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.
15. Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds
16. Sheriff: Boundaries on a per-folder basis Rainer Hahnekamp, AngularArchitects @softarc/eslint-plugin-sheriff
17. Nx & Sheriff Folders: Modularization Incremental CI/CD Build Cache Parallelization in Builds Sheriff
18. Demo
19. How Large Should it be?
20. Feature Sub- Feature
21. Where to put the Store?
22. 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
23. Feature UI Data Util Redux Feature Slice
24. Feature UI Data Util Lightweight Stores Cmp Cmp Lightweight Stores can live everywhere! Component vs. Module Exposed vs. Hidden
25. Demo
26. Global vs. Local State?
27. Global vs. Local FeatureStore DomainStore FeatureService UtilityStore
28. Cycles, Redundancies, and Inconsistencies
29. Let's think it through … • Layering • Prevent Stores accessing each other • Redux DevTools
30. Free eBook (6th Edition) angularArchitects.io/ebook
31. 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
32. "Krapfen"
33. ManfredSteyer AngularArchitects.io Slides & Examples