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