Successful with Signals: 3 Rules for Your Architecture

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
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. Demo
13. Computed
14. Demo Branch: 02a-input-signals
15. Architecture Rule #1 Synchronously derive state where possible
16. Effects
17. Angular‘s Effect implementation: Mainly for rendering!
18. Demo Branch: 04c-effects
19. Architecture Rule #2 Avoid effects propagating state and Signal writes
20. How can my app react on changing State?
21. Effects are Problematic Here! Event (click, data, etc.) Signal { … } Logic
22. Why Effects are Problematic Here? Glitch-free property: Events might get lost Auto-Tracking Cycles and change cascades Effect: End of the „reactive chain“
23. Overlapping Req. & Race Conditions Pancakes Sacher Cake Ice Cream Pancakes
24. Alternative Use event behind signal change Event (click, data, etc.) Signal { … } Logic
25. Alternative Use event behind signal change Use RxJS toObservable, toSignal, …
26. Alternative Use event behind signal change Use RxJS Use reactive helpers
27. Alternative Use event behind signal change Use RxJS Use reactive helpers rxMethod (SignalStore), ngxtension, Angular itself will get some
28. Demo Branch: 08b-details
29. Stores
33. Stores Streamline Reactive Flow Component Store Trigger Signal sync/ async computed() computed() Currently: Main Use Case for Signals
34. Demo Branch: 07-state-service-starter
35. Architecture Rule #3 Stores make your reactive flow more manageable
36. Free eBook (6th Edition) angularArchitects.io/ebook
37. 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
38. 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
40. AngularArchitects.io Slides & Examples ManfredSteyer