Successful with Signals: 3 Rules for Your Architecture @.NET UserGroup Bern

Transcript

1. AngularArchitects.io | @ManfredSteyer Successful with Signals: 3 Rules for Your Architecture
5. Agenda • Austrian Desserts • Computed • 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. Simple Reactivity with Signals Signal 4711 Consumer read set notify 4712
10. Fine-Grained Change Detection Signal Eventually Zone-less!
11. Component With Signals flights = signal<Flight[]>([]); const flights = await this.flightService.findAsPromise(from, to); this.flights.set(flights); <div *ngFor="let f of flights()"> <flight-card [item]="f" /> </div>
12. Component With Signals from = signal('Paris'); to = signal('London'); flightRoute = computed(() => this.from() + ' to ' + this.to());
13. Demo
14. Computed
15. Demo Branch: 02a-input-signals
16. Architecture Rule #1 Synchronously derive state where possible
17. Effects
18. Current effect implementation: Mainly for rendering!
19. Demo Branch: 04c-effects
20. Architecture Rule #2 Avoid effects propagating state and Signal writes
21. “Business Effects“
22. What are „Business Effects“? Effect triggering (business) logic on Signal change
23. Why „Business Effects“ are critical Glitch-free property: Events might get lost Auto-Tracking Cycles and Change Cascades Effect: End of the „reactive chain“
24. Alternative Use Event behind Signal Change Event (click, data, etc.) Signal { … } Logic
25. Alternative Use Event behind Signal Change Event (click, data, etc.) Signal { … } Logic
26. Alternative Use RxJS
27. Alternative Use reactive Helpers
28. Demo Branch: 08b-details
29. Hint #1 Be aware of options and consequences of “Business Effects“
30. RxJS-Interop
31. Demo Branch: 05b-rxjs-interop
32. Hint #2 Signals play well together with RxJS
33. Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream Pancakes
34. Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream Pancakes switchMap, mergeMap, concatMap, exhaustMap
35. Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream Pancakes switchMap, mergeMap, concatMap, exhaustMap
36. Hint #3 Avoid Race Conditions (e.g. RxJS, loading flag, …)
37. Stores
41. Stores Streamline Reactive Flow Component Store "Intention" Signal sync/ async computed() computed() Currently: Main Use Case for Signlas Business Effects, Events, RxJS and/or RxJS
42. Demo Branch: 07-state-service-starter
43. Architecture Rule #3 Stores make your reactive flow more manageable
44. Free eBook (6th Edition) angularArchitects.io/ebook
45. More: Angular Architecture Workshop • Maintainable Architectures with Modern Angular • Strategic Design with Nx & Sheriff • Micro Frontends with Module Federation • Signals and Your Architecture: CD & Zone-less, NGRX & Signal Store, RxJS-Interop German Version: angulararchitects.io/workshop-de English Version: angulararchitects.io/workshop-en
46. 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
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 Effect“
49. AngularArchitects.io Slides & Examples ManfredSteyer