Webinar: Blazor Webassembly - State Management in der Praxis

Slides für das Webinar

Transcript

2. 2 ▪ 🐻💬 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Twitter: State Management in der Praxis
3. 3 ▪ ▪ ▪ ▪ ▪ State Management in der Praxis
4. 4 ▪ ▪ ▪ ▪ ▪ State Management in der Praxis
5. 5 State Management in der Praxis
6. 6 ▪ Zustände ▪ View State, Session State, User State, Application State (Daten) ▪ Orte ▪ Server ▪ Datenbank, Memory… ▪ Netzwerk ▪ Cookies, URL ▪ Browser ▪ Memory, Local Storage, Session Storage, Indexed DB, (Sqlite) … State Management in der Praxis
7. 7 ▪ 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) State Management in der Praxis
8. 8 State Management in der Praxis POLL
9. 9 ▪ 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 😉 State Management in der Praxis
10. 10 ▪ URL ▪ Pfad ▪ Query-Parameter ▪ Pfad wird von Blazor verwaltet (Routing) ▪ In-Memory Zustand (Komponenten) ▪ Query-Parameter als eigene Steuermöglichkeit State Management in der Praxis
11. 11 State Management in der Praxis
12. 12 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis
13. 13 State Management in der Praxis
14. 14 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis
15. 15 State Management in der Praxis
16. 16 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis
17. 17 State Management in der Praxis
18. 18 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis
19. 19 State Management in der Praxis
20. 20 ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis
21. 21 ▪ State Management in der Praxis Action Creators Dispatcher Store Views Actions Reducer functions StateHasChanged & Store Queries User Interactions
22. 22 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis
23. 23 ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis
24. 24 State Management in der Praxis
25. 25 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis POLL
26. 26 ▪ 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 State Management in der Praxis
27. 27 State Management in der Praxis
28. 28 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis