Successful with Signals: 3 Effective Rules @FrankenJS

Transcript

1. AngularArchitects.io | @ManfredSteyer Successful with Signals: 3 Effective Rules
5. Agenda • Austrian Desserts • Computed • Effects • RxJS Interop • Stores
6. Result • 3 Rules (of thumb) • 2 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. Simple Reactivity with Signals Signal 4711 Consumer read set notify 4712
12. Signal Eventually Zone-less!
13. 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>
14. from = signal('Paris'); to = signal('London'); flightRoute = computed(() => this.from() + ' to ' + this.to());
15. Demo Branch: 01a-add-signals
16. Architecture Rule #1 Synchronously derive state where possible
17. Effects
18. Demo Branch: 04-effects-starter
19. Architecture Rule #2 Avoid effects propagating state and signal writes
20. RxJS-Interop
21. Demo Branch: 05-rxjs-interop-starter
22. Hint #1 Signals play well together with RxJS
23. Hint #2 Avoid Race Conditions (e.g. RxJS and/or loading flag)
24. Stores
28. Stores Streamline Reactive Flow Component Store "Intention" Signal sync/ async computed() computed()
29. Demo Branch: 07-state-service-starter
30. Architecture Rule #3 Stores make your reactive flow more manageable
31. Free eBook (2nd Edition) angularArchitects.io/modern
32. 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 in June: Online & Interactive angulararchitects.io/workshop-de
33. 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
34. Conclusion Hint #1 Signals play well together with RxJS Hint #2 Avoid Race Conditions (e.g. RxJS and/or loading flag)
36. ManfredSteyer AngularArchitects.io Slides & Examples