Lärarguide · Lektion 10 av 10

Blazor-klient & UX för CQRS

Typed HttpClient, optimistic UI, Ctrl+Z undo-stack. Klienten ser till att eventual consistency aldrig känns trasig.

V5 Tor
Vecka / Dag
4 h
Total tid
90 min
Teori
140 min
Workshop

Mål

Agenda

0:00
Recap allt. Sista lektionen — visa hur klienten knyter ihop allt.
0:15
Teori: Blazor WASM-arkitektur, typed HttpClient, DI.
0:45
Teori: optimistic UI, eventual consistency UX, idempotency-keys per klick.
1:15
Teori: undo som UX — Ctrl+Z mappar till revert-command i API:t.
1:30
Paus 15 min
1:45
Workshop: bygg AccountPage + UndoStack + felhantering.
3:45
Kursens slutsamtal: vad tar du med dig? Vad känns oklart? Vidare läsning.
4:00
Slut

Talartips

Generera idempotency-key per knapptryck (Guid.NewGuid()). Förklara varför: dubbelklick eller retry från Polly får inte ge två deposits.
Eventual consistency är en UX-fråga: visa optimistic värde direkt, polla read model, visa "syncar..." om det dröjer.
Ctrl+Z är inte "ta bort" — det är ett nytt compensating command. Förklara varifrån klientens undo-stack hämtar sin lista (sista N commands jag själv skickat).

Workshop

  1. Skapa AccountApi-typed client + register via AddHttpClient<AccountApi>().
  2. Skapa AccountPage.razor som visar saldo + deposit/withdraw-formulär.
  3. Implementera optimistic UI: uppdatera lokalt direkt, rulla tillbaka vid HTTP-fel.
  4. Bygg UndoStack som håller senaste 10 commands.
  5. Lägg in keyboard-handler: Ctrl+Z → pop senaste → POST revert.
  6. Demo: deposit 100 → Ctrl+Z → saldo går tillbaka. Visa både i UI och i AccountSummary-tabellen.

Snabba

  • Lägg in SignalR-push så att flera flikar synkar.
  • Bygg en mini-history-vy som listar events.

Stöd

  • Tillhandahåll Razor-skelett.
  • Ge UndoStack-mönster som code-snippet.

FAQ

Varför WASM och inte Server?
Kursvalet är pedagogiskt: WASM tvingar fram en tydlig API-gräns. I produktion kan båda fungera.
Är optimistic UI farligt vid betalningar?
Ja för commit. Det är OK att visa ett optimistiskt värde — men aldrig låta användaren agera på det som om det vore committat. Visa tydlig "behandlas..."-state.
Vad om Ctrl+Z trycks 100 gånger snabbt?
Disable knappen medan revert pågår, eller köa lokalt och POST:a med idempotency-keys så servern dedupar.
Fallgrop Studenter glömmer att hantera 409 ConcurrencyConflict i klienten. Visa hur Polly i klienten kan retry:a — men oftast räcker det att visa "någon annan ändrade, ladda om".
Hemuppgift Slutför soloprojekt + finalisera gruppuppgift inför inlämning.
Examination Nästa moment är examination — se examinations-dokumentet för bedömningsrubrik och inlämningskrav. Boka in opponering 1:1 med varje student.

← L9 Examination →