Migration to Signals, Resource API, and NgRx Signal Store

Transcript

1. @ManfredSteyer @ManfredSteyer Migration to Signals, Resource API, and NgRx Signal Store Manfred Steyer, ANGULARarchitects.io
2. @ManfredSteyer Application Code as a Script
3. @ManfredSteyer Signals => Reactive Programming => Paradigm Shift!
4. @ManfredSteyer Marble Run
5. @ManfredSteyer Marble Run Data Binding
6. @ManfredSteyer Agenda #1 Signals #2 Resource API #3 Effects #4 SignalStore #5 Mutation API #6 Signal Forms
7. @ManfredSteyer 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. @ManfredSteyer @ManfredSteyer 8 Signals 101
9. @ManfredSteyer Signals: Simple Reactivity Signal as Producer 4711 Consumer read set notify 4712
10. @ManfredSteyer 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>
11. @ManfredSteyer @ManfredSteyer 11 DEMO
12. @ManfredSteyer @ManfredSteyer 12 Race Conditions
13. @ManfredSteyer Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream Pancakes
14. @ManfredSteyer Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream Pancakes „switchMap semantics“
15. @ManfredSteyer @ManfredSteyer 15 Effects
16. @ManfredSteyer Connecting Reactive and Imperative World
17. @ManfredSteyer
18. @ManfredSteyer @ManfredSteyer 18 • Drawing on a canvas • Manual DOM manipulations • Logging • Synching with LocalStore Ideal-typical Tasks Rendering (and similar tasks …) Stuff, you cannot do with data binding
19. @ManfredSteyer @ManfredSteyer 19 DEMO
20. @ManfredSteyer @ManfredSteyer 20 Architecture Rule #1 Derive state where possible (sync: computed, async: Resource API) Architecture Rule #2 Avoid effects for triggering business logic! Architecture Rule #3 Reactive Helpers (e.g., Resource API) streamline your reactive flow Architecture Rules
21. @ManfredSteyer @ManfredSteyer 21 Stores
22. @ManfredSteyer Stores Streamline Reactive Flow Component Store "Intention" Signal sync/ async computed() computed()
23. @ManfredSteyer @ManfredSteyer 23 Two Reasons for a Store Manage State Streamline Dataflow
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer
27. @ManfredSteyer @ManfredSteyer 27 NGRX Signal Store
28. @ManfredSteyer NGRX Signal Store export const FlightBookingStore = signalStore( { providedIn: 'root' }, […] );
29. @ManfredSteyer NGRX Signal Store export const FlightBookingStore = signalStore( { providedIn: 'root' }, withState({ from: 'Paris', to: 'London', […] }), […] );
30. @ManfredSteyer NGRX Signal Store export const FlightBookingStore = signalStore( { providedIn: 'root' }, withState({ from: 'Paris', to: 'London', […] }), withComputed(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }) );
31. @ManfredSteyer Extensions export const FlightBookingStore = signalStore( { providedIn: 'root' }, withState({ from: 'Paris', to: 'London', […] }), withComputed(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }), withResource([…]}), withDevtools([…]}), withUndoRedo(), );
32. @ManfredSteyer @ManfredSteyer 32 DEMO
33. @ManfredSteyer @ManfredSteyer 33 Modern Angular 2nd Edition angularArchitects.io/modern Free eBook
34. @ManfredSteyer Summary Signals: Reactive Programming Derive State Effects: Not for Biz Logic Stores Streamline Reactivity
35. @ManfredSteyer Marble Run
36. @ManfredSteyer Marble Run Data Binding
37. @ManfredSteyer 37 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io