Where do we go from here? Strategies for Signals

Transcript

1. AngularArchitects.io | @ManfredSteyer | @RainerHahnekamp Where do we go from here? Strategies for Signals
5. Agenda • Austrian Desserts • Computed • Rendering Effects • Business Effects • RxJS Interop • Stores
6. Result • 3 Rules (of thumb) • 3 Hints
7. 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
8. Austrian Desserts: Example App
9. Demo
10. Computed
11. Demo Branch: 01a-add-signals
12. Demo Branch: 02a-input-signals
13. Architecture Rule #1 Synchronously derive state where possible
14. Rendering Effects
15. Rendering vs. Business Effects?
16. Current effect implementation: Mainly for rendering
17. Demo Branch: 04c-effects
18. Architecture Rule #2 Avoid (rendering) effects propagating state and Signal writes
19. Business Effects
20. What are Business Effects? Effect triggering (business) logic on Signal change
21. Why Signals as Events are Critical? Glitch-free property: Events might get lost Quickly leads to Effects with Signal Writes Chains of change and cycles?
22. Alternative Use Event behind Signal Change Event (click, data, etc.) Signal { … } Logic
23. Alternative Use Event behind Signal Change Event (click, data, etc.) Signal { … } Logic
24. But … Angular APIs are more and more Signal-based Using Events behind Signal change might feel unnatural <input [(ngModel)]="mySignal" (change)="…">
25. Demo Branch: 08b-details
26. Hint #3 Be aware of options and consequences of Business Effects
27. RxJS-Interop
28. Hint #1 Signals play well together with RxJS
29. Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream Pancakes
30. Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream Pancakes switchMap, mergeMap, concatMap, exhaustMap
31. Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream Pancakes switchMap, mergeMap, concatMap, exhaustMap
32. Hint #2 Avoid Race Conditions (e.g. RxJS and/or loading flag)
33. Stores
37. Stores Streamline Reactive Flow Component Store "Intention" Signal sync/ async computed() computed() Currently: Main Use Case for Signas Business Effects, Events, RxJS and/or RxJS
38. Architecture Rule #3 Stores make your reactive flow more manageable
39. Free eBook (6th Edition) angularArchitects.io/ebook
40. More Examples Code & Experiences
41. Signals → RxJS
42. …long-term, we do want to move to a point where we’re making RxJs optional for Angular. Jeremy Elbourn Angular Tech Lead Angular Q&A Session https://www.youtube.com/live/yN1xIs0IucQ
43. We primarily want to remove it (RxJs) from the critical learning journey. Minko Gechev Angular Product Lead Ng-Poland 2024 https://www.youtube.com/watch?v=QtTLZRIVaKk
44. …there are probably many applications that will just fire a fetch request, get the data… you kind of give them a machinery that is more expensive to operate Pawel Koszlowski Angular Core “Future for Angular” JSParty https://changelog.com/jsparty/310
45. It’s (RxJs) not required or strictly necessary to express async data flow. Minko Gechev Angular Product Lead https://twitter.com/mgechev/status/1757242040897933541
46. Conclusion Architecture Rule #1 Synchronously derive state where possible Architecture Rule #2 Avoid (rendering) effects propagating state and signal writes Architecture Rule #3 Stores make your reactive flow more manageable Component Store
47. Conclusion Hint #1 Signals play well together with RxJS Hint #2 Avoid Race Conditions (e.g. RxJS and/or loading flag) Hint #3 Be aware of options and consequences of Business Effects
49. RainerHahnekamp AngularArchitects.io Slides & Examples ManfredSteyer