Tweet
Tweet

Slide 1

Slide 1 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Live Coding: Migrating an Application to Signals ANGULARarchitects.io

Slide 2

Slide 2 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 Agenda #1 Motivation & Basics #2 Reactive Thinking

Slide 3

Slide 3 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Motivation & Basics

Slide 4

Slide 4 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 Signals: Simple Reactivity Signal as Producer 4711 Consumer read set notify 4712

Slide 5

Slide 5 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Fine-Grained Change Detection Signal Eventually Zone-less!

Slide 6

Slide 6 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 DEMO

Slide 7

Slide 7 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Reactive Thinking Paradigm Shift

Slide 8

Slide 8 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Application Code as a Script

Slide 9

Slide 9 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run

Slide 10

Slide 10 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run Data Binding

Slide 11

Slide 11 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 Building Your Reactive Graph desserts = signal([]); ratings = signal({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));

Slide 12

Slide 12 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Building Your Reactive Graph desserts = signal([]); ratings = signal({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));

Slide 13

Slide 13 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 DEMO

Slide 14

Slide 14 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten desserts = signal([]); ratings = signal({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); 14 Building Your Reactive Graph originalName = signal(''); englishName = signal(''); Load Desserts

Slide 15

Slide 15 text

• 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([]); ratings = signal({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));

Slide 16

Slide 16 text

• 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({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));

Slide 17

Slide 17 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 DEMO

Slide 18

Slide 18 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Next Steps Service for creating Resource Service for managing Signals (Store)

Slide 19

Slide 19 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Conclusion Derive State Sync: Computed Async: Resource API

Slide 20

Slide 20 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run