Architectures with Angular Signals @ngBucharest

Transcript

1. @ManfredSteyer
   ManfredSteyer
   Architectures with Angular Signals
   ngBucharest
   

   View Slide

2. @ManfredSteyer
   Signal
   as Producer
   4711
   Consumer
   read
   set
   notify
   4712
   

   View Slide

3. @ManfredSteyer
   flights = signal([]);
   const flights = await this.flightService.findAsPromise(from, to);
   this.flights.set(flights);
   
   
   
   

   View Slide

4. @ManfredSteyer
   Simple
   Reactive
   Building Block
   Fine-grained
   CD
   Zone-less CD
   Interop with
   RxJS
   No need to
   unsubscribe
   

   View Slide

5. @ManfredSteyer
   

   View Slide

6. @ManfredSteyer
   

   View Slide

7. @ManfredSteyer
   

   View Slide

8. @ManfredSteyer
   

   View Slide

9. @ManfredSteyer
   

   View Slide

10. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    private _flights = signal([]);
    readonly flights = this._flights.asReadonly();
    async load(from: string, to: string) {
    const flights = await […];
    this._flights.set(flights);
    }
    }
    

    View Slide

11. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    private _flights = signal([]);
    readonly flights = this._flights.asReadonly();
    async load(from: string, to: string) {
    const flights = await […];
    this._flights.set(flights);
    }
    }
    

    View Slide

12. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    private _flights = signal([]);
    readonly flights = this._flights.asReadonly();
    private _from = signal('Hamburg');
    readonly from = this._from.asReadonly();
    private _to = signal('Graz');
    readonly to = this._to.asReadonly();
    […]
    }
    

    View Slide

13. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    private state = signal({
    from: 'Hamburg',
    to: 'Graz',
    flights: [] as Flight[], […]
    });
    […]
    }
    

    View Slide

14. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    private state = signal({
    from: 'Hamburg',
    to: 'Graz',
    flights: [] as Flight[], […]
    });
    flights = computed(() => this.state().flights);
    from = computed(() => this.state().from);
    […]
    }
    

    View Slide

15. @ManfredSteyer
    

    View Slide

16. @ManfredSteyer
    

    View Slide

17. @ManfredSteyer
    select(selector)
    selectSignal(selector)
    

    View Slide

18. @ManfredSteyer
    

    View Slide

19. @ManfredSteyer
    

    View Slide

20. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    private state = signalState({
    from: 'Paris',
    to: 'London',
    flights: [] as Flight[],
    basket: {} as Record,
    });
    flights = this.state.flights;
    from = this.state.from;
    […]
    }
    

    View Slide

21. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    selected = selectSignal(
    () => this.flights().filter((f) => this.basket()[f.id]);
    […]
    }
    

    View Slide

22. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    selected2 = selectSignal(
    this.flights,
    this.basket,
    (flights, basket) => flights.filter((f) => basket[f.id])
    );
    […]
    }
    

    View Slide

23. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    updateCriteria(from: string, to: string): void {
    patchState(this.state, { from, to });
    }
    […]
    }
    

    View Slide

24. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    updateCriteria(from: string, to: string): void {
    patchState(this.state, state => ({ ...state, from, to }));
    }
    […]
    }
    

    View Slide

25. @ManfredSteyer
    @Injectable({ providedIn: 'root' })
    export class FlightBookingFacade {
    […]
    updateCriteria(from: string, to: string): void {
    patchState(this.state, updateRoute(from, to));
    }
    […]
    }
    function updateRoute(from: string, to: string) {
    return (state: T) => ({ ...state, from, to })
    }
    

    View Slide

26. @ManfredSteyer
    

    View Slide

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

    View Slide

28. @ManfredSteyer
    export const FlightBookingStore = signalStore(
    { providedIn: 'root' },
    withState({
    from: 'Paris',
    to: 'London',
    […]
    }),
    […]
    );
    

    View Slide

29. @ManfredSteyer
    export const FlightBookingStore = signalStore(
    { providedIn: 'root' },
    withState({
    from: 'Paris',
    to: 'London',
    […]
    }),
    withSignals(([…]) => ({ […] })),
    withMethods(([…]) => ({ })),
    withHooks({ […] }),
    withCallState()
    );
    

    View Slide

30. @ManfredSteyer
    

    View Slide

31. @ManfredSteyer
    const BooksStore = signalStore(
    withEntities({ collection: 'book' }),
    withEntities({ collection: 'author' })
    );
    

    View Slide

32. @ManfredSteyer
    const BooksStore = signalStore(
    withLoadEntities(BookService),
    withLoadEntities(AuthorService),
    );
    

    View Slide

33. @ManfredSteyer
    Free eBook (5th Edition)
    ANGULARarchitects.io/book
    Module Federation & Nx
    

    View Slide

34. @ManfredSteyer
    • Maintainable Architectures
    • 🆕🔥 Standalone Components & APIs
    • Micro Frontends and Module Federation
    • 🆕🔥 Signals and Your Architecture:
    CD, NGRX, RxJS-Interop
    Public or Company Training, Remote or On-Site
    Next: Nov 27 to Nov 30, 2023
    https://www.angulararchitects.io
    

    View Slide

35. @ManfredSteyer
    Services +
    Signals
    equal NGRX
    NGRX
    Signal Store
    Different
    Flavors
    Custom
    Features
    

    View Slide

36. @ManfredSteyer
    d
    Slides & Examples Remote Company Workshops
    and Consulting
    http://angulararchitects.io
    

    View Slide