Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Architectures with Signals

Angular Architectures with Signals

Manfred Steyer

October 24, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer
    ManfredSteyer
    Angular Architectures with Signals

    View full-size slide

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

    View full-size slide

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



    View full-size slide

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

    View full-size slide

  5. @ManfredSteyer

    View full-size slide

  6. @ManfredSteyer

    View full-size slide

  7. @ManfredSteyer
    Manfred Steyer

    View full-size slide

  8. @ManfredSteyer

    View full-size slide

  9. @ManfredSteyer

    View full-size slide

  10. @ManfredSteyer

    View full-size 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 full-size slide

  12. @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 full-size slide

  13. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

  16. @ManfredSteyer

    View full-size slide

  17. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  19. @ManfredSteyer

    View full-size slide

  20. @ManfredSteyer

    View full-size slide

  21. @ManfredSteyer

    View full-size slide

  22. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. @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) => ({ from, to })
    }

    View full-size slide

  27. @ManfredSteyer
    private state = signalState({
    filter: {
    from: 'Paris',
    to: 'London',
    },
    flights: [] as Flight[],
    basket: {} as Record,
    });
    filter = this.state.filter();
    from = this.state.filter.from();
    to = this.state.filter.to();

    View full-size slide

  28. @ManfredSteyer

    View full-size slide

  29. @ManfredSteyer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. @ManfredSteyer

    View full-size slide

  34. @ManfredSteyer

    View full-size slide

  35. @ManfredSteyer
    export const FlightBookingStore = signalStore(
    […]
    withMethods((state) => {
    […]
    return {
    connectCriteria: rxMethod((c$) => c$.pipe([…]))
    };
    }),
    […]
    );

    View full-size slide

  36. @ManfredSteyer
    export const FlightBookingStore = signalStore(
    […]
    withMethods((state) => {
    […]
    return {
    connectCriteria: rxMethod((c$) => c$.pipe([…]))
    };
    }),
    […]
    );

    View full-size slide

  37. @ManfredSteyer
    export const FlightBookingStore = signalStore(
    […]
    withMethods((state) => {
    […]
    return {
    connectCriteria: rxMethod((c$) => c$.pipe(
    filter(c => c.from.length >= 3 && c.to.length >= 3),
    debounceTime(300),
    switchMap((c) => flightService.find(c.from, c.to)),
    tap(flights => patchState(state, { flights }))
    ))
    };
    }),
    […]
    );

    View full-size slide

  38. @ManfredSteyer
    export const FlightBookingStore = signalStore(
    […]
    withHooks({
    onInit({ connectCriteria, criteria }) {
    connectCriteria(criteria);
    },
    }),
    );
    takes: Signal, Observable, T

    View full-size slide

  39. @ManfredSteyer

    View full-size slide

  40. @ManfredSteyer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. @ManfredSteyer

    View full-size slide

  44. @ManfredSteyer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. @ManfredSteyer
    Services +
    Signals
    NGRX
    NGRX
    Signal Store
    Different
    Flavors
    rxMethod
    Custom
    Features

    View full-size slide

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

    View full-size slide