Live Coding: Migrating an Application to Signals

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Live Coding: Migrating an Application to Signals ANGULARarchitects.io
2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 Agenda #1 Motivation & Basics #2 Reactive Thinking
3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Motivation & Basics
4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 Signals: Simple Reactivity Signal as Producer 4711 Consumer read set notify 4712
5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Fine-Grained Change Detection Signal Eventually Zone-less!
6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 DEMO
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Reactive Thinking Paradigm Shift
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Application Code as a Script
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run Data Binding
11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 Building Your Reactive Graph desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Building Your Reactive Graph desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 DEMO
14. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); 14 Building Your Reactive Graph originalName = signal(''); englishName = signal(''); Load Desserts
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Building Your Reactive Graph dessertsResource = httpResource(() => ({ url: 'http://demo.angulararchitects.io/...', params: { originalName: this.originalName(), englishName: this.englishName(), } })); desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Building Your Reactive Graph dessertsResource = httpResource(() => ({ url: 'http://demo.angulararchitects.io/...', params: { originalName: this.originalName(), englishName: this.englishName(), } })); desserts = dessertsResource.value; ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 DEMO
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Next Steps Service for creating Resource Service for managing Signals (Store)
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Conclusion Derive State Sync: Computed Async: Resource API
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run