Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webinar: Blazor Webassembly - State Management ...

Webinar: Blazor Webassembly - State Management in der Praxis

Slides für das Webinar

Sebastian Gingter

July 06, 2022
Tweet

More Decks by Sebastian Gingter

Other Decks in Programming

Transcript

  1. 2 ▪ 🐻💬 ▪ ▪ ▪ ▪ ▪ ▪ ▪

    ▪ Twitter: State Management in der Praxis
  2. 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
  3. 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
  4. 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
  5. 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
  6. 12 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪

    ▪ State Management in der Praxis
  7. 14 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪

    ▪ State Management in der Praxis
  8. 16 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪

    State Management in der Praxis
  9. 18 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪

    State Management in der Praxis
  10. 21 ▪ State Management in der Praxis Action Creators Dispatcher

    Store Views Actions Reducer functions StateHasChanged & Store Queries User Interactions
  11. 22 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪

    State Management in der Praxis
  12. 25 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪

    ▪ State Management in der Praxis POLL
  13. 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
  14. 28 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪

    ▪ ▪ State Management in der Praxis