Effective Signals in Angular 19+: Rules and Helpers

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 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. 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. Linked Signals
20. Read-only Signals and Data Binding store = inject(DessertDetailStore); originalName = this.store.originalName; <input [(ngModel)]="dessert.originalName" />
21. Read-only Signals and Data Binding store = inject(DessertDetailStore); originalName = linkedSignal(() => this.store.originalName()); <input [(ngModel)]="dessert.originalName" />
22. Architecture Rule #1 Derive state where possible Sync/ readonly: computed Async: resource Sync/ writable: linked signal
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. Reactive Helpers: Effects Under the Hood
31. Conclusion Architecture Rule #3 Use reactive helpers to streamline reactivity
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 Architecture Rule #3 Use reactive helpers to streamline reactivity
36. Marble Run
37. ManfredSteyer AngularArchitects.io Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io