Migration to Signals, Resource API, and NgRx Signal Store

@ManfredSteyer @ManfredSteyer Migration to Signals, Resource API, and NgRx Signal
Store Manfred Steyer, ANGULARarchitects.io

@ManfredSteyer Application Code as a Script

@ManfredSteyer Signals => Reactive Programming => Paradigm Shift!

@ManfredSteyer Marble Run

@ManfredSteyer Marble Run Data Binding

@ManfredSteyer Agenda #1 Signals #2 Resource API #3 Effects #4
SignalStore #5 Mutation API #6 Signal Forms

@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

@ManfredSteyer @ManfredSteyer 8 Signals 101

@ManfredSteyer Signals: Simple Reactivity Signal as Producer 4711 Consumer read
set notify 4712

@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>

@ManfredSteyer @ManfredSteyer 11 DEMO

@ManfredSteyer @ManfredSteyer 12 Race Conditions

@ManfredSteyer Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream
Pancakes

@ManfredSteyer Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream
Pancakes „switchMap semantics“

@ManfredSteyer @ManfredSteyer 15 Effects

@ManfredSteyer Connecting Reactive and Imperative World

@ManfredSteyer

@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

@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

@ManfredSteyer @ManfredSteyer 21 Stores

@ManfredSteyer Stores Streamline Reactive Flow Component Store "Intention" Signal sync/
async computed() computed()

@ManfredSteyer @ManfredSteyer 23 Two Reasons for a Store Manage State
Streamline Dataflow

@ManfredSteyer

@ManfredSteyer @ManfredSteyer 27 NGRX Signal Store

@ManfredSteyer NGRX Signal Store export const FlightBookingStore = signalStore( {
providedIn: 'root' }, […] );

providedIn: 'root' }, withState({ from: 'Paris', to: 'London', […] }), […] );

providedIn: 'root' }, withState({ from: 'Paris', to: 'London', […] }), withComputed(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }) );

@ManfredSteyer Extensions export const FlightBookingStore = signalStore( { providedIn: 'root'
}, withState({ from: 'Paris', to: 'London', […] }), withComputed(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }), withResource([…]}), withDevtools([…]}), withUndoRedo(), );

@ManfredSteyer @ManfredSteyer 33 Modern Angular 2nd Edition angularArchitects.io/modern Free eBook

@ManfredSteyer Summary Signals: Reactive Programming Derive State Effects: Not for
Biz Logic Stores Streamline Reactivity

@ManfredSteyer Marble Run

@ManfredSteyer Marble Run Data Binding

@ManfredSteyer 37 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer
@ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io

Migration to Signals, Resource API, and NgRx S...

Migration to Signals, Resource API, and NgRx Signal Store

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript