Migrating to Signals: A Practical Workshop

Transcript

1. AngularArchitects.io | @ManfredSteyer Migrating to Signals: A Practical Workshop
5. Agenda • Austrian Desserts • Signals & Computed • Input Signals & Model Signals • Signals & Change Detection • Effects • RxJS-Interop • Stores • BONUS: NGRX Signal Store
6. 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
7. Austrian Desserts: Example App
8. Demo
14. Your Options a) Just watch the live coding b) Check out the solution branches c) Do labs later d) Do labs during live coding
15. Demo
16. Demo https://angularArchitects.io/ng-conf-24
17. Signals & Computed
18. Simple Reactivity with Signals Signal 4711 Consumer read set notify 4712
19. Demo Branch: 01-signals-starter
20. Architecture Rule #1 Synchronously derive state where possible
21. Input Signals & Model Signals
22. Demo Branch: 02-sub-comp-starter
23. Signals & Change Detection
24. Demo Branch: 03-cd-starter
25. Effects
26. Demo Branch: 04-effects-starter
27. Architecture Rule #2 Avoid effects propagating state and signal writes
28. RxJS-Interop
29. Demo Branch: 05-rxjs-interop-starter
30. Demo Branch: 06-unsubscribe-experiment-starter
31. Stores
35. Stores Streamline Reactive Flow Component Store "Intention" Signal sync/ async computed() computed()
36. Demo Branch: 07-state-service-starter
37. Architecture Rule #3 Stores make your reactive flow more manageable
38. BONUS: NGRX Signal Store
39. Demo Branch: 08-signal-store-starter
40. Demo Branch: 09-custom-feature-starter
41. Demo Branch: 09b-generic-feature
42. Free eBook (6th Edition) angularArchitects.io/ebook
43. Conclusion Architecture Rule #1 Synchronously derive state where possible Architecture Rule #2 Avoid effects propagating state and signal writes Architecture Rule #3 Stores make your reactive flow more manageable Component Store
45. ManfredSteyer AngularArchitects.io