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: Paradigm Shift!
12. Marble Run
13. Marble Run Data Binding
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()));
16. Demo Branch: 01a-add-signals
17. Demo Branch: 02a-input-signals
18. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); originalName = signal(''); englishName = signal(''); Load Desserts
19. Resource API
20. Resource API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } }); Experimental in Angular 19
21. 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, …));
22. Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream Pancakes „switchMap semantics“
23. Demo Branch: 2c-resource
24. Architecture Rule #1 Derive state where possible
25. Effects
26. Connecting Reactive and Imperative World
28. 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 …)
29. Demo Branch: 04c-effects
30. Architecture Rule #2 Avoid effects propagating state and Signal writes
31. Instead: Reactive Helpers like Resource API @ngrx/signals ngxtension Your Own …
32. Reactive Helpers: Effects Under the Hood
33. Demo Branch: 08b-details
34. Stores
38. Stores Streamline Reactive Flow Component Store "Intention" Signal sync/ async computed() computed()
39. Demo Branch: 08b-details
40. Architecture Rule #3 Stores make your reactive flow more manageable
41. Free eBook (6th Edition) angularArchitects.io/ebook
42. 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
44. Marble Run
45. AngularArchitects.io Slides & Examples ManfredSteyer