Successful with Signals: 3 Patterns for Your Architecture

Transcript

1. AngularArchitects.io | @ManfredSteyer Successful with Signals: Patterns for Your Architecture
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. 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 Branch: 01a-add-signals
14. Computed
15. Demo Branch: 02a-input-signals
16. Architecture Rule #1 Synchronously derive state where possible
17. Rendering Effects
18. Rendering vs. Business Effects?
19. Current effect implementation: Mainly for rendering
20. Demo Branch: 04c-effects
21. Architecture Rule #2 Avoid (rendering) effects propagating state and Signal writes
22. Business Effects
23. What are Business Effects? Effect triggering (business) logic on Signal change
24. 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?
25. Alternative Use Event behind Signal Change Event (click, data, etc.) Signal { … } Logic
26. Alternative Use Event behind Signal Change Event (click, data, etc.) Signal { … } Logic
27. But … Angular APIs are more and more Signal-based Using Events behind Signal change might feel unnatural <input [(ngModel)]="mySignal" (change)="…">
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 and/or loading flag)
37. Stores
41. 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
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 (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