Modern Angular with Signals and Signal Store New Rules for Your Architecture @bastacon 2025 in Frankfurt

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Modern Angular with Signals and Signal Store New Rules for Your Architecture Manfred Steyer, ANGULARarchitects.io
2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 2 "Krapfen"
3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 3
4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 4
5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 5 Small Change => Huge Impact
6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 6 What if we changed for a lightweight store?
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 7 Lightweight Stores Component Lightweight Store method() Observables, Signals, etc. sync/ async
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 8 Two Reasons for a Store Manage State Streamline Dataflow
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 12 Stores Streamline Reactive Flow Component Lightweight Store method() Observables, Signals, etc. sync/ async Currently: Main Use Case for Signas
13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 13 Some Lightweight Stores Akita Elf Pinia NGRX Signal Store
14. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 14 How do Lightweight Stores Change Architecture Rules?
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 15 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 Agenda
16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 16 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Baseline Architecture
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 18 Stack NGRX Signal Store Angular Nx Monorepo
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 19 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 Smart Comp. Dumb Comp. Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 20 Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds
21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 21 Sheriff @softarc/eslint-plugin-sheriff Module Boundaries on a Per-Folder Basis
22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 22 Nx & Sheriff Folders: Modularization Incremental CI/CD Build Cache Parallelization in Builds Sheriff
23. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 23 DEMO
24. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 24 How Granular Should it be?
25. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 25 Feature Sub- Feature
26. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 26 Where to put the Store?
27. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 27 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 Feature Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7
28. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Feature UI Data Util 28 Redux Feature Slice
29. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 29 Lightweight Stores Feature UI Data Util Cmp Cmp Lightweight Stores can live everywhere! Component vs. Module Exposed vs. Hidden
30. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 30 DEMO
31. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Global vs. Local Stores
32. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 32 What if a Feature Needs Several Stores? FeatureStore DomainStore FeatureService
33. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 33 What if a Feature Needs Several Stores? FeatureStore DomainStore
34. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 34 What if a Feature Needs Several Stores? Store1 Store2 Eventing Utility
35. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 35
36. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 36
37. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 37 Cycles, Redundancies, and Inconsistencies
38. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 38 • Layering • Prevent Stores accessing each other • Redux DevTools Let‘s Think it Through …
39. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 39
40. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 40 DEMO
41. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 41 6th edition 20 chapters http://angularArchitects.io/ebook Free eBook
42. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 42 Lightweight Stores … … size of a (sub-)feature … can live everywhere … orchestrated by a feature service … leverage layering to prevent cycles … Use DevTools! Conclusion
43. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 43 NGRX … … de facto standard for State Management in Angular … Signal Store: lightweight and highly extensible Conclusion
44. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 44 "Krapfen"
45. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 45 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io