BASTA 2023 Blazor Statemanagement

Slides for my talk at BASTA! 2023 about Blazor Statemanagement

Transcript

1. 🐻💬
2. 3 ▪ 🐻💬 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Twitter: Praxisnahes State Management in Blazor WebAssembly
3. Thema Sprecher Datum / Uhrzeit Blazor: Server, WebAssembly und Hybrid – ein Wegweiser Sebastian Gingter, Patrick Jahr DI, 26. September 2023, 10.45 bis 11.45 Automatisiertes Testen von Blazor- Anwendungen Dr. Holger Schwichtenberg DI, 26 September 2022, 12.15 bis 13.15 Blazor WebAssembly in .NET 8: Game Changer für .NET SPAs? Patrick Jahr DI, 26. September 2023, 15.30 bis 16.30 Was sind denn das für Zustände? Praxisnahes State Management in Blazor WebAssembly Sebastian Gingter DI, 26. September 2023, 17.00 bis 18.00 Special Day Blazor
4. 5 ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
5. 6 ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
6. 7 Praxisnahes State Management in Blazor WebAssembly
7. 8 ▪ Zustände ▪ View State, Session State, User State, Application State (Daten) ▪ Orte ▪ Server ▪ Memory, File System, Datenbank… ▪ Netzwerk ▪ Cookies, URL ▪ Browser ▪ Memory, Local Storage, Session Storage, Indexed DB, (Sqlite) … Praxisnahes State Management in Blazor WebAssembly
8. 9 ▪ Transient ▪ nur zur Laufzeit benötigt ▪ z.B. lokal im Browser Session Storage oder in-Memory ▪ Netzwerk (z.B. Session-Cookie) ▪ auf dem Server (z.B. Session-Store) ▪ Semi-Persistent / Zwischengespeichert ▪ z.B. im Offline-Modus der App, bis zum nächsten Synchronisieren ▪ Lokal im Browser (Local Storage, Indexed DB) ▪ Persistent ▪ Auf dem Server (Datenbank) ▪ Selten: Lokal im Browser (Local Storage, Indexed DB, (Sqlite)) Praxisnahes State Management in Blazor WebAssembly
9. 10 Praxisnahes State Management in Blazor WebAssembly POLL
10. 11 ▪ Client-Anwendung im Browser ▪ View State (innerer Zustand der Komponenten) ▪ Application State im Speicher ▪ Transiente & Semi-Persistente Daten ▪ Daten im Client und auf der Netzwerk-Ebene ▪ Persistenz = hauptsächlich Aufgabe des Backends 😉 Praxisnahes State Management in Blazor WebAssembly
11. 12 ▪ URL ▪ Pfad (Url Segmente) ▪ Query-Parameter ▪ Pfad wird von Blazor verwaltet (Routing) ▪ Query Parameter als separate Möglichkeit für Pages ▪ In-Memory Zustand (Komponenten & Service-Klassen) Praxisnahes State Management in Blazor WebAssembly
12. 13 Praxisnahes State Management in Blazor WebAssembly
13. 14 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
14. 15 Praxisnahes State Management in Blazor WebAssembly
15. 16 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
16. 17 Praxisnahes State Management in Blazor WebAssembly
17. 18 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
18. 19 Praxisnahes State Management in Blazor WebAssembly
19. 20 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
20. 21 Praxisnahes State Management in Blazor WebAssembly
21. 22 ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
22. 23 ▪ Praxisnahes State Management in Blazor WebAssembly Action Creators Dispatcher Store Views Actions Reducer functions StateHasChanged & Store Queries User Interactions (or async callbacks)
23. 24 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
24. 25 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
25. 26 Praxisnahes State Management in Blazor WebAssembly
26. 27 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly POLL
27. 28 ▪ Web basiert auf Links & Urls ▪ ist Deep-Linking eine Anforderung? alle notwendigen Informationen müssen dazu in der Url stehen ▪ Page (ist schon Teil der Url) ▪ Daten-State (Welche Daten werden gerade angezeigt) ▪ meist Datensatz-Id ▪ Komponenten-State (z.B. welches Tab selektiert wurde) ▪ sonst wird der Default angezeigt (z.B. erstes Tab) ▪ Wenn State zu groß ist: Bookmarken ▪ Zwischenspeichern des Zustandes auf dem Server und die ID übergeben ▪ Zielanwendung lädt Zustand dann vom Server ▪ Prerendering kann das beschleunigen Praxisnahes State Management in Blazor WebAssembly
28. 29 Praxisnahes State Management in Blazor WebAssembly
29. 30 ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
30. 31 ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
31. 32 ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly
32. https://www.thinktecture.com/ueber-uns/karriere/ 33
33. 🐻💬