Reactive Thinking with Signals and the new Resource API

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Reactive Thinking with Signals and the new Resource API ANGULARarchitects.io
2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Application Code as a Script Control-Flow Centric
3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run
4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run Data Binding Data-Flow-Centric
5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 How to Switch to a More Data-Flow-Centric Design Using Signals & Resources?
6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 How to Switch to Reactive Thinking?
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 1) Signal Graph 101 2) Demo Application using Signals and Resource API 3) Signal Graph in Demo Agenda
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Signal Graph 101
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 cakes = signal(['Sacher Cake', 'Pancake', 'Ice Cream Pancake']); selected = signal(2); selectedCake = computed(() => this.cakes()[this.selected()]); cakeResource = createCakeResource(this.selectedCake); details = this.cakeResource.value; error = this.cakeResource.error; A Simple First Example …
11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 Angular Dev Tools (Preview)
12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 DEMO
13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Reactive Graph in Our App
14. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 canvas (view child) style levelKey play levelResource tilesMapResource tilesResource render (effect) levelOverviewResource heroMapResource heroResource
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 DEMO
16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 2nd Edition angularArchitects.io/modern eBook: Modern Angular
17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 1) Think in terms of data flows 2) Build a reactive graph: computed, resource, … 3) Service/ Function: creating httpResource Conclusion
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples