3 Effective Rules for Using Signals in Angular

Transcript

1. AngularArchitects.io | @ManfredSteyer | @RainerHahnekamp 3 Effective Rules for Using Signals in Angular
5. Agenda • Austrian Desserts • Computed • Resource API • Effects • Stores
6. Result 3 Rules (of thumb)
7. 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. Austrian Desserts: Example App
9. Demo
10. Computed: Extremely Unterrated!
11. Reactive Programming: Pardigm Shift!
12. Marble Run
13. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
14. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
15. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); originalName = signal(''); englishName = signal(''); Load Desserts
16. Resource API
17. Resource API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } }); Experimental in Angular 19
18. Resource API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } }); dessertsCriteria = computed(() => ({ originalName: this.originalName(), englishName: this.englishName(), })); desserts = this.dessertsResource.value; ratedDesserts = computed(() => this.toRated(this.desserts, …));
19. Architecture Rule #1 Derive state where possible
20. Effects
21. Connecting Reactive and Imperative World
23. Ideal-typical Tasks • Drawing on a canvas • Manual DOM manipulations • Logging • Synching with LocalStore Stuff, you cannot do with data binding Rendering (and similar tasks …)
24. Demo Branch: 04c-effects
25. Architecture Rule #2 Avoid effects propagating state and Signal writes
26. Reactive Helpers: Effects Under the Hood
27. Stores
31. Stores Streamline Reactive Flow Component Store "Intention" Signal sync/ async computed() computed()
32. Architecture Rule #3 Stores make your reactive flow more manageable
33. Free eBook (6th Edition) angularArchitects.io/ebook
34. Conclusion Architecture Rule #1 Derive state where possible Architecture Rule #2 Avoid effects propagating state and Signal writes Architecture Rule #3 Stores make your reactive flow more manageable
37. RainerHahnekamp AngularArchitects.io Slides & Examples ManfredSteyer