3 Effective Rules for Using Signals in Angular

Transcript

1. AngularArchitects.io | @ManfredSteyer | @RainerHahnekamp 3 Effective Rules for Using Signals in Angular Karlsruhe 2024
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. Simple Reactivity with Signals Signal 4711 Consumer read set notify 4712
11. Change Detection with Signals Signal
12. Component With Signals desserts = signal<Dessert[]>([]); const result = await this.dessertService.findAsPromise(originalName); this.desserts.set(result); @for (d of desserts(); track d.id) { <dessert-card [item]="d" /> }
13. Computed: Extremely Underrated!
14. Reactive Programming: Paradigm Shift!
15. Marble Run
16. Marble Run Data Binding
17. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
18. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
19. Demo Branch: 02a-input-signals
20. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); originalName = signal(''); englishName = signal(''); Load Desserts
21. Resource API
22. Resource API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } }); Experimental in Angular 19
23. 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, …));
24. Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream Pancakes
25. Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream Pancakes „switchMap semantics“
26. Demo Branch: 2c-resource
27. Demo Branch: 2e-resource
28. Architecture Rule #1 Derive state where possible
29. Effects
30. Connecting Reactive and Imperative World
32. 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 …)
33. Demo Branch: 04c-effects
34. Architecture Rule #2 Avoid effects propagating state and Signal writes
35. Instead: Reactive Helpers like Resource API @ngrx/signals ngxtension Your Own …
36. Demo Branch: 08b-details
37. Reactive Helpers: Effects Under the Hood
38. Stores
42. Stores Streamline Reactive Flow Component Store "Intention" Signal sync/ async computed() computed()
43. Demo Branch: 08b-details
44. Architecture Rule #3 Stores make your reactive flow more manageable
45. Free eBook (6th Edition) angularArchitects.io/ebook
46. 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
48. Marble Run
49. AngularArchitects.io Slides & Examples ManfredSteyer