Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Modern Angular with Signals and Signal Store New Rules for Your Architecture ANGULARarchitects.io
2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 Signals: Simple Reactivity Signal as Producer 4711 Consumer read set notify 4712
3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 Fine-Grained Change Detection Signal Eventually Zone-less!
4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 Component With Signals desserts = signal<Dessert[]>([]); […] this.desserts.set(flights); @for (dessert of desserts(); track dessert.id) { <app-dessert-card [dessert]="dessert“ /> }
5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 What does this mean for the way I write Angular solutions?
6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 Agenda Reactive Thinking State Management 3 Rules
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Reactive Thinking Paradigm Shift
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Application Code as a Script
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run
11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run Data Binding
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 Building Your Reactive Graph desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
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 Resouce: switchMap Semantics Pancakes Sacher Cake Ice Cream Pancakes
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 DEMO
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 State Management
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
23. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Stores Streamline Reactive Flow Component Lightweight Store method(), Event Observables, Signals, etc. sync/ async
24. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Two Reasons for a Store Manage State Streamline Dataflow
25. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Some Lightweight Stores Akita Elf Pinia NGRX Signal Store
26. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 DEMO
27. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 2th edition 14 chapters https://angulararchitects.io/modern Free eBook
28. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 Architecture Rule #1 Derive state where possible (sync: computed, async: resource) Architecture Rule #2 Avoid effects for triggering business logic! Architecture Rule #3 Reactive helpers and stores streamline your reactive flow Conclusion
29. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run
30. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io