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: 02a-input-signals
17. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); originalName = signal(''); englishName = signal(''); Load Desserts
18. Resource API
19. Resource API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } }); Experimental in Angular 19
20. 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, …));
21. Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream Pancakes
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 triggering business logic
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 triggering business logic Architecture Rule #3 Stores make your reactive flow more manageable
44. Marble Run
45. AngularArchitects.io Slides & Examples ManfredSteyer