Effective Signals in Angular 19+ Rules and Helpers

Transcript

1. AngularArchitects.io | @ManfredSteyer Effective Signals in Angular 19+ Rules and Helpers NG VENICE
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. 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
35. Marble Run
36. ManfredSteyer AngularArchitects.io Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io