Effective Signals in Angular 19+: Rules and Helpers @ngbe2024

Transcript

1. AngularArchitects.io | @ManfredSteyer Effective Signals in Angular 19+ Rules and Helpers
2. Application Code as a Script
3. Reactive Programming: Paradigm Shift!
4. Marble Run
5. Marble Run Data Binding
6. Agenda • Computed Signals • Resource API • Linked Signals • Effects & Reactive Helpers 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. Computed Signals
9. Demo Branch: 02a-input-signals
10. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
11. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
12. Reactive Flow with Computed desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); originalName = signal(''); englishName = signal(''); Load Desserts
13. Resource API
14. Resource API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } }); Experimental in Angular 19
15. 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, …));
16. Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream Pancakes
17. Resource Prevents Race Conditions Pancakes Sacher Cake Ice Cream Pancakes „switchMap semantics“
18. Demo Branch: 02c-resource
19. Architecture Rule #1 Derive state where possible Sync: computed Async: resource
20. Linked Signals
21. Read-only Signals and Data Binding store = inject(DessertDetailStore); originalName = this.store.originalName; <input [(ngModel)]="dessert.originalName" />
22. Read-only Signals and Data Binding store = inject(DessertDetailStore); originalName = linkedSignal(() => this.store.originalName()); <input [(ngModel)]="dessert.originalName" />
23. Effects & Reactive Helpers
24. Connecting Reactive and Imperative World
26. 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 …)
27. Demo Branch: 04c-effects
28. Conclusion Architecture Rule #2 Avoid effects triggering business logic
29. Instead: Reactive Helpers like Resource API @ngrx/signals ngxtension Your Own …
30. Demo Branch: 08b-details
31. Reactive Helpers: Effects Under the Hood
32. Free eBook (6th Edition) angularArchitects.io/ebook
33. More: Angular Architecture Workshop • Maintainable Architectures with Modern Angular • Strategic Design with Nx & Sheriff • Micro Frontends with Federation • Signals and Your Architecture: CD & Zone-less, NGRX & Signal Store, RxJS-Interop English Version: Feb 2025 // Early Bird until Dec 22, 2024 https://www.angulararchitects.io/workshop-en
34. Conclusion Architecture Rule #1 Derive state where possible Architecture Rule #2 Avoid effects triggering business logic
35. Conclusion Reactive Helpers & Primitives • Resource API • Linked Signal • rxMethod & Co. in Signal Store • ngxtensions • …
37. Marble Run
38. ManfredSteyer AngularArchitects.io Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io