3 Effective Rules for Success with Signals in Angular

Transcript

1. AngularArchitects.io | @ManfredSteyer 3 Effective Rules for Success with Signals in Angular Angular Berlin
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. However … 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. Demo Branch: 07-state-service-starter
39. Architecture Rule #3 Stores make your reactive flow more manageable
40. Free eBook (6th Edition) angularArchitects.io/ebook
41. 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
42. 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
44. AngularArchitects.io Slides & Examples ManfredSteyer