Webinar: Blazor Webassembly - State Management in der Praxis

by Sebastian Gingter

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

2 ▪ 🐻💬 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Twitter: State Management in der Praxis

Slide 3

Slide 3 text

3 ▪ ▪ ▪ ▪ ▪ State Management in der Praxis

Slide 4

Slide 4 text

4 ▪ ▪ ▪ ▪ ▪ State Management in der Praxis

Slide 5

Slide 5 text

5 State Management in der Praxis

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 State Management in der Praxis POLL

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

11 State Management in der Praxis

Slide 12

Slide 12 text

12 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis

Slide 13

Slide 13 text

13 State Management in der Praxis

Slide 14

Slide 14 text

14 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis

Slide 15

Slide 15 text

15 State Management in der Praxis

Slide 16

Slide 16 text

16 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis

Slide 17

Slide 17 text

17 State Management in der Praxis

Slide 18

Slide 18 text

18 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis

Slide 19

Slide 19 text

19 State Management in der Praxis

Slide 20

Slide 20 text

20 ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis

Slide 21

Slide 21 text

21 ▪ State Management in der Praxis Action Creators Dispatcher Store Views Actions Reducer functions StateHasChanged & Store Queries User Interactions

Slide 22

Slide 22 text

22 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis

Slide 23

Slide 23 text

23 ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis

Slide 24

Slide 24 text

24 State Management in der Praxis

Slide 25

Slide 25 text

25 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ State Management in der Praxis POLL

Slide 26

Slide 26 text

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