Seminar Laravel – Intensivseminar: Moderne Webanwendungen und Frontends

Der Intensivpfad verbindet Laravel-Grundlagen, Blade, Livewire, Inertia, Formulare, Authentifizierung, API-Anbindung, Queues, Echtzeit, Tests und Deployment zu einer vollständigen modernen Webanwendung.

Inhaltsübersicht

• Zielsetzung
• Zielgruppe und Voraussetzungen
• Schritt-für-Schritt-Inhalte
• Praxisprojekt
• Methodik

Zielsetzung

• Eine moderne Laravel-Webanwendung mit klarer Frontendstrategie strukturieren
• Blade, Livewire und Inertia passend zu Interaktions- und Teamanforderungen einsetzen
• Formulare, Authentifizierung, APIs, Queues und Echtzeit zu konsistenten Abläufen verbinden
• Zugänglichkeit, Performance, Tests und Deployment vollständig absichern

Zielgruppe und Voraussetzungen

Zielgruppe: Full-Stack-Entwicklung, Laravel-Teams, Frontend-Entwicklung mit React, Vue oder Svelte sowie technische Leitung.

Voraussetzungen: Gute PHP-, Laravel-, HTML- und JavaScript-Grundkenntnisse. Für den Inertia-Anteil wird Erfahrung mit einem modernen Frontend-Framework empfohlen.

Schritt-für-Schritt-Inhalte

Tag 1: Grundlage und Designsystem

1. Schritt 1: Projekt und Architektur aufsetzen

   Umgebung, Verzeichnisstruktur, Konfiguration, Routing, Container und Datenmodell werden für den Gesamtfall vorbereitet.

2. Schritt 2: UI- und Interaktionsmuster planen

   Seiten, Komponenten, Formulare, Status, Fehler, Ladezustände und Zugänglichkeitsanforderungen werden als Designsystem beschrieben.

3. Schritt 3: Blade-Komponenten entwickeln

   Layouts, Feldkomponenten, Navigation, Meldungen und wiederkehrende Darstellungen werden mit klaren Schnittstellen umgesetzt.

4. Schritt 4: Authentifizierungsgrundlage integrieren

   Registrierung, Anmeldung, Verifikation, Sitzungen und geschützte Routen werden sicher eingerichtet.

Tag 2: Livewire und serverseitige Reaktivität

1. Schritt 5: Livewire-Zustand modellieren

   Komponentendaten, berechnete Werte, URL-Zustand und Lifecycle werden auf notwendige Informationen begrenzt.

2. Schritt 6: Reaktive Formulare umsetzen

   Validierung, abhängige Felder, Datei-Upload, Fortschritt und transaktionale Speicherung werden integriert.

3. Schritt 7: Tabellen und Aktionen entwickeln

   Suche, Filter, Pagination, Auswahl, Berechtigung und Massenaktionen werden performant umgesetzt.

4. Schritt 8: Komponenten testen

   Zustandswechsel, Ereignisse, Validierung, Uploads und Berechtigungsfehler werden automatisiert geprüft.

Tag 3: Inertia und JavaScript-Frontend

1. Schritt 9: Inertia-Seitenstruktur aufbauen

   Seitenauflösung, Layouts, Props, Navigation und History werden mit React, Vue oder Svelte implementiert.

2. Schritt 10: Formulare und Typen verbinden

   TypeScript, Formzustand, serverseitige Fehler, Upload und Statusmeldungen werden konsistent abgebildet.

3. Schritt 11: Datenladen optimieren

   Lazy Props, partielle Reloads, Prefetching, Filterzustand und Pagination reduzieren Wartezeit und Payload.

4. Schritt 12: Frontendgrenzen festlegen

   Gemeinsame Komponenten, lokale Zustände, Backendverantwortung und API-Bedarf werden anhand der Anwendung entschieden.

Tag 4: Asynchronität und Echtzeit

1. Schritt 13: Jobs und Notifications integrieren

   Dokumentverarbeitung, E-Mail und Datenbankbenachrichtigungen werden asynchron, idempotent und testbar ausgeführt.

2. Schritt 14: Broadcasting absichern

   Private Kanäle, Autorisierung und minimierte Ereignisnutzdaten werden aus dem Berechtigungsmodell abgeleitet.

3. Schritt 15: Reverb und Clients verbinden

   WebSocket-Server, Abonnements, Wiederverbindung und UI-Aktualisierung werden produktionsnah umgesetzt.

4. Schritt 16: Fehlerszenarien behandeln

   Queue-Ausfall, Verbindungsabbruch, doppelte Ereignisse und veralteter UI-Zustand werden reproduziert und abgefangen.

Tag 5: Qualität, Performance und Veröffentlichung

1. Schritt 17: End-to-End-Tests erstellen

   Anmeldung, Formulare, Berechtigungen, Navigation, Dateiablage und Echtzeitpfade werden im Browser geprüft.

2. Schritt 18: Performance und Zugänglichkeit prüfen

   Abfragen, Payloads, Bundlegröße, Fokusführung, Tastaturbedienung und Statusmeldungen werden gemessen.

3. Schritt 19: Produktionsbuild vorbereiten

   Assets, Caches, Umgebungsprüfung, Worker, Scheduler, Reverb und Health-Checks werden gemeinsam konfiguriert.

4. Schritt 20: Deployment und Rollback durchführen

   Migration, Releasewechsel, Smoke-Tests, Überwachung und kontrollierte Rückkehr werden als Runbook erprobt.

Praxisprojekt

Im Praxisprojekt entsteht ein kollaboratives Aufgaben- und Dokumentenportal. Serverseitige Komponenten, eine Inertia-Seite, geschützte Formulare, Dateiablage, Benachrichtigungen, WebSocket-Updates und eine produktionsnahe Bereitstellung werden gemeinsam umgesetzt.

Methodik

Kurze Fachimpulse werden unmittelbar durch Live-Coding, geführte Konfigurationsschritte, eigenständige Übungen, Code-Reviews und kontrollierte Fehlerfälle vertieft. Jeder Arbeitsschritt besitzt definierte Ausgangswerte, Prüfpunkte und Abnahmekriterien; dadurch bleiben die erarbeiteten Lösungen reproduzierbar und für weitere Projekte nutzbar.