BASTA 2023 Blazor Statemanagement

by Sebastian Gingter

Slide 1

Slide 1 text

🐻💬

Slide 2

Slide 2 text

3 ▪ 🐻💬 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Twitter: Praxisnahes State Management in Blazor WebAssembly

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

5 ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly

Slide 5

Slide 5 text

6 ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly

Slide 6

Slide 6 text

7 Praxisnahes State Management in Blazor WebAssembly

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

10 Praxisnahes State Management in Blazor WebAssembly POLL

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

13 Praxisnahes State Management in Blazor WebAssembly

Slide 13

Slide 13 text

14 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly

Slide 14

Slide 14 text

15 Praxisnahes State Management in Blazor WebAssembly

Slide 15

Slide 15 text

16 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly

Slide 16

Slide 16 text

17 Praxisnahes State Management in Blazor WebAssembly

Slide 17

Slide 17 text

18 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly

Slide 18

Slide 18 text

19 Praxisnahes State Management in Blazor WebAssembly

Slide 19

Slide 19 text

20 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly

Slide 20

Slide 20 text

21 Praxisnahes State Management in Blazor WebAssembly

Slide 21

Slide 21 text

22 ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly

Slide 22

Slide 22 text

23 ▪ Praxisnahes State Management in Blazor WebAssembly Action Creators Dispatcher Store Views Actions Reducer functions StateHasChanged & Store Queries User Interactions (or async callbacks)

Slide 23

Slide 23 text

24 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly

Slide 24

Slide 24 text

25 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly

Slide 25

Slide 25 text

26 Praxisnahes State Management in Blazor WebAssembly

Slide 26

Slide 26 text

27 ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Praxisnahes State Management in Blazor WebAssembly POLL

Slide 27

Slide 27 text

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