Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Reactive Thinking with Signals, Resource API, and httpResource ANGULARarchitects.io
2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Application Code as a Script
3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run
4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 1) Signal Graph 2) Resource API 3) DEMO 4) Signal Graph in Demo 5) Live Coding Agenda
5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Reactive Graph
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Building Your Reactive Graph desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Building Your Reactive Graph desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); 10 Building Your Reactive Graph originalName = signal(''); englishName = signal(''); Load Desserts
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 Resource API
11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Resource API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } });
12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 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, …));
13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 httpResource dessertsResource = httpResource(() => ({ url: 'http://demo.angulararchitects.io/...', params: { originalName: this.originalName(), englishName: this.englishName(), } })); desserts = this.dessertsResource.value; ratedDesserts = computed(() => this.toRated(this.desserts, …));
14. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 DEMO
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Reactive Graph in Our App
16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 canvas (view child) style levelKey animation levelResource tilesMapResource tilesResource tilesMapProgress render (effect) levelOverview Resource
17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Effect: Connecting Reactive and Imperative World
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 DEMO
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 1) Build a reactive graph 1) Computed: Sync Derivation/ Readonly 2) Linked Signal: Sync Derivation/ Writable 3) Resource API: Async Derivation/ Writable 2) httpResource: fetching data within the graph 3) Service: creating httpResource Conclusion
21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run
22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io