Vue 3

Change Request: Live-Aktualisierung mit Server-Sent Events

Mitten im Projekt wünscht sich die Schule, dass sich die Liste der Fahrten von selbst aktualisiert. In Extreme Programming ist ein solcher Änderungswunsch kein Störfall: Das Team schreibt ihn als Karte auf, schätzt ihn nach einem Spike und plant neu. Der Artikel vergleicht Polling, Server-Sent Events und WebSocket, baut im Backend mit SseEmitter einen Ereignisstrom, der erst nach dem Commit sendet, und lässt die Vue-App mit EventSource still neu laden. Dazu kommen Verbindungsabbrüche, nginx, Tests und die Regression über alle bisherigen Tests.

Übungsaufgaben zur Live-Aktualisierung mit Server-Sent Events: Mitfahrgesuche live anzeigen

Die Web-App des Mitfahrlabors aktualisiert die Fahrtenliste inzwischen live. In diesen Übungen baust Du dasselbe für die Mitfahrgesuche: zuerst in Vue mit einem kleinen Refactoring und einem Komponententest, dann im Backend mit SseEmitter und MockMvc. Danach findest Du anhand von Symptomen heraus, warum die Live-Aktualisierung nach Funklöchern, Server-Neustarts und hinter nginx versagt, machst sie robust und wägst für neue Wünsche der Schule Polling, Server-Sent Events, WebSocket und Push ab.

Übungsaufgaben zu End-to-End-Tests mit Playwright: Mitfahrgesuche im Browser prüfen

Die Web-App des Mitfahrlabors soll Mitfahrgesuche annehmen, und ihre Kundentests sollen im echten Browser laufen. In diesen Übungen wählst Du Locator für die Seite der Gesuche und sagst voraus, welche Zeilen warten, schreibst End-to-End-Tests für das Einstellen eines Gesuchs mit nachgebildetem Backend, prüfst Fehlerfälle mit abgebrochenen und abgelehnten Anfragen und reparierst einen Test, der auf dem Teamrechner grün und in der Pipeline ab und zu rot ist.

End-to-End- und Akzeptanztests mit Playwright: Kundentests im echten Browser

Bisher klickt der Kunde die Kundentests der Web-App in der Kundenstunde noch einmal von Hand durch. Jetzt steuert Playwright einen echten Browser durch den Produktions-Build. Der Artikel zeigt, wie Locator Elemente so finden, wie Nutzende sie sehen, warum Aktionen und Assertions von selbst warten, wie page.route() Backend und Keycloak nachbildet und was der Trace Viewer über gescheiterte Tests verrät. Die Kundentests werden zu End-to-End-Tests, die Bedienung per Tastatur und Screenreader entsteht test-first, und zum Schluss steht der Vergleich mit Selenium.

Übungsaufgaben zu Build und Auslieferung einer Vue-App: Mitfahrgesuche im Intranet

Die Web-App des Mitfahrlabors soll zusätzlich im Intranet der Schule erscheinen, und die Ansicht der Mitfahrgesuche soll sich je Umgebung ein- und ausschalten lassen. In diesen Übungen liest Du die Ausgabe eines Produktions-Builds, entwickelst einen Schalter über eine Umgebungsvariable mit Tests, lieferst die App mit nginx in einem Unterordner aus und behebst eine Auslieferung, bei der Deep Links mit 404 enden und Nutzende alte Versionen sehen.

Übungsaufgaben zu Fahrer-Sicht und Coding Standards in Vue: eigene Mitfahrgesuche verwalten

In der Web-App des Mitfahrlabors sollen Mitfahrende ihre eigenen Gesuche sehen und offene Gesuche zurückziehen können. In diesen Übungen ordnest Du Regeln und Befunde den Werkzeugen Prettier, ESLint und vue-tsc sowie dem Backend zu. Danach entwickelst Du die Regeln für eigene Gesuche als reine Funktionen und das Zurückziehen per PATCH mit einer Komponente, jeweils mit Tests. Zum Schluss behebst Du die Lint- und Typbefunde in der Komponente eines anderen Paars und begründest jede Änderung.

Fahrer-Sicht in Vue: Rollen, Coding Standards und Collective Ownership

Fahrer*innen sollen in der Web-App des Mitfahrlabors die Anfragen zu ihren Fahrten sehen und bestätigen oder ablehnen. Der Artikel unterscheidet Rollen aus dem Token von Beziehungen zu einem Datensatz und zeigt, warum das Backend trotzdem jede Anfrage selbst prüft, auch wenn die Oberfläche Buttons ausblendet. Gleichzeitig einigt sich das Team auf Coding Standards: Prettier für die Form, ESLint mit eigenen Teamregeln, vue-tsc für die Typen, alle drei in Editor und Pipeline. Zum Schluss geht es um Collective Ownership und Pair Programming.

Übungsaufgaben zur Anmeldung mit Keycloak in Vue: Mitfahrgesuche mit Token

Die Mitfahrgesuche in der Web-App des Mitfahrlabors sollen nur für angemeldete Personen erreichbar sein. In diesen Übungen bringst Du die Schritte des Authorization Code Flows mit PKCE in die richtige Reihenfolge und ordnest Tokens ihren Empfängern zu. Danach schützt Du die Seite „Meine Gesuche“ mit dem Navigation Guard und schickst ein neues Gesuch mit Access Token an die API, jeweils mit Tests. Zum Schluss findest Du anhand von Fehlermeldungen heraus, was bei der Anmeldung eines anderen Paars schiefläuft, und nimmst Stellung zu zwei Vorschlägen für mehr Bequemlichkeit.

Anmeldung mit Keycloak in Vue: Authorization Code mit PKCE

Die Web-App des Mitfahrlabors bekommt eine Anmeldung mit dem Schulkonto. Zuerst probiert das Paar in einem Spike aus, wie sich eine Single-Page-App bei Keycloak anmeldet. Der Artikel erklärt, warum eine App im Browser ein öffentlicher Client ohne Secret ist und wie der Authorization Code Flow mit PKCE verhindert, dass ein abgefangener Code nutzbar ist. Mit oidc-client-ts, einem Navigation Guard und dem Pinia-Store meldet sich die App an, schickt das Access Token an das Backend und reagiert auf abgelaufene Tokens. Getestet wird ohne Keycloak mit einer Attrappe.

Übungsaufgaben zu Refactoring mit Composables und Pinia: Mitfahrgesuche aufräumen

Die Mitfahrgesuche in der Web-App des Mitfahrlabors sollen aufgeräumt werden. In diesen Übungen findest Du Code Smells in einer Seite für Gesuche, ordnest Zustände Props, Composables und Stores zu und sagst voraus, was beim Zerlegen eines Stores passiert. Danach baust Du test-first einen Pinia-Store für Gesuche und schließt eine Seite „Meine Gesuche“ mit useLaden() an. Zum Schluss findest Du heraus, warum die Tests eines anderen Paars nach dem Umzug in Pinia mal grün und mal rot sind, und bewertest ihren Umbau mit den Regeln von Simple Design.

Refactoring mit Testnetz in Vue: Composables, Pinia und Simple Design

Bevor die Web-App des Mitfahrlabors eine Anmeldung bekommt, räumt das Team auf. Der Artikel zeigt Refactoring als Praktik aus Extreme Programming: Code Smells im eigenen Code finden, das Testnetz prüfen und mit einem Charakterisierungstest flicken, dann in kleinen Schritten umbauen, nach denen alle Tests grün sind. Doppelte Ladezustände wandern in ein Composable, die gewählte Testperson in einen Store mit Pinia. Unterwegs findet das Team einen Fehler und behebt ihn erst danach, mit dem anderen Hut. Die vier Regeln von Simple Design entscheiden, was in den Store gehört und was nicht.

Übungsaufgaben zu Formularen und Validierung in Vue: Mitfahrgesuche einstellen und Problem Details anzeigen

Die Web-App des Mitfahrlabors soll Mitfahrgesuche nicht nur anzeigen, sondern auch einstellen. In diesen Übungen ordnest Du Prüfregeln dem Browser und dem Backend zu und sagst voraus, welche Werte v-model liefert. Danach baust Du test-first ein Formular für Gesuche, erweiterst den Vertrag um POST /gesuche und zeigst Ablehnungen im Format Problem Details an. Zum Schluss findest Du in der Fassung eines anderen Paars die Ursachen, warum Antworten mit Status 422 falsch, unvollständig oder für den Screenreader gar nicht angezeigt werden.

Formulare und Validierung in Vue: Fahrt anbieten, Platz anfragen und Problem Details verständlich anzeigen

In Iteration 3 bekommt die Web-App des Mitfahrlabors ihre ersten Formulare: Fahrer*innen bieten eine Fahrt an, Mitfahrende fragen einen Platz an. Der Artikel zeigt, wie v-model Eingabefelder an den Zustand bindet, welche Regeln der Browser prüfen kann und welche nur das Backend, und wie die App Ablehnungen im Format Problem Details (RFC 9457) nach type statt nach detail auswertet. Zum Schluss geht es um Fehlermeldungen, die auch per Tastatur und Screenreader ankommen. Alles entsteht testgetrieben mit Vitest, Vue Test Utils und Mock Service Worker.

Vue Router und Continuous Integration: Detailseite, Pipeline und das erste Small Release der Vue-App

Die Fahrtensuche des Mitfahrlabors bekommt eine zweite Seite: Ein Klick auf „Details“ führt zur Detailseite unter /angebote/4. Dafür kommt Vue Router ins Projekt, mit Routentabelle, Routenparametern, RouterLink, RouterView und einer Seite für unbekannte Adressen, alles testgetrieben. Danach setzt das Team die XP-Praktik Continuous Integration um: ESLint prüft den Code, und eine Pipeline in GitLab führt bei jedem Push Lint, Typprüfung, Tests und Build aus. Zum Schluss geht mit Version 0.1.0 das erste Small Release an den Kunden, mit Changelog und automatisch erzeugtem Release.

API-Client aus OpenAPI: Die Vue-App holt ihre Fahrten vom Backend – mit Vite-Proxy, CORS und Mock Service Worker

Die Fahrtensuche des Mitfahrlabors holt ihre Fahrten jetzt vom Spring-Boot-Backend. Aus dem Vertrag openapi.yaml erzeugt ein Generator TypeScript-Typen und eine Funktion je Operation. Der Proxy des Vite-Entwicklungsservers sorgt dafür, dass App und API für den Browser denselben Ursprung haben; wann stattdessen CORS greift, zeigt der Vergleich beider Wege samt typischer Fehlermeldungen. Integrationstests mit Mock Service Worker (MSW) prüfen Komponente, Fachlogik und Client gegen ein nachgebildetes Backend, auch Lade- und Fehlerzustände.

Übungsaufgaben zu Vue-Komponenten testgetrieben: Direktiven, Props, Emits und Reaktivität für die Mitfahrgesuche

Die Web-App des Mitfahrlabors zeigt jetzt die Mitfahrgesuche an. In diesen Übungen ordnest Du Direktiven von Vue und Attribute von Thymeleaf einander zu und sagst die Ausgabe einer Komponente voraus, entwickelst test-first eine Liste der Gesuche und eine Auswahl des Haltepunkts mit Props, Emits und computed und findest Reaktivitätsfehler anhand ihrer Symptome.

Vue-Komponenten testgetrieben: Single-File-Components, Reaktivität, Direktiven, Props und Emits

Eine Vue-Komponente vereint Logik, Vorlage und Gestaltung in einer .vue-Datei. Am Beispiel der Fahrtensuche im Mitfahrlabor entstehen test-first mit Vue Test Utils eine Liste, ein Suchformular und eine Komponente, die beide verbindet. Dabei geht es um Direktiven wie v-for, v-if, v-model, v-bind und v-on (mit dem Vergleich zu Thymeleaf), um Reaktivität mit ref, computed und watch, um Props, die Daten nach unten reichen, und Emits, die Ereignisse nach oben melden. Bootstrap kommt per npm dazu.

Suchen und Buchen mit Vue 3 und TypeScript: das Projekt im Überblick

In zwölf Artikeln entsteht die Web-App der Mitfahr-App Mitfahrlabor: Auszubildende suchen Fahrten und fragen Plätze an, Fahrer*innen bestätigen die Anfragen. Die App ist eine Single-Page-App mit Vue 3 und TypeScript, die mit der REST-Schnittstelle des Spring-Boot-Backends spricht und die Anmeldung über Keycloak abwickelt. Das Team arbeitet nach Extreme Programming: test-first, in kurzen Iterationen und mit kleinen Releases. Hier findest Du Architektur, Fahrplan und Voraussetzungen.