Seminar Laravel – Inertia mit React, Vue oder Svelte

Laravel bleibt Anwendungs- und Routingkern, während React, Vue oder Svelte über Inertia eine moderne Single-Page-Navigation ohne getrennte API-Anwendung erhalten.

Inhaltsübersicht

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

Zielsetzung

• Eine Inertia-Anwendung mit klarer Grenze zwischen Backend und Frontend strukturieren
• Seitenprops, Formulare, Navigation und Zustandsübergänge effizient umsetzen
• Authentifizierung, Autorisierung und serverseitige Validierung konsistent integrieren
• Frontend-Build, Performance und End-to-End-Qualität absichern

Zielgruppe und Voraussetzungen

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

Voraussetzungen: Solide Laravel-Grundlagen, JavaScript oder TypeScript und Grundkenntnisse in mindestens einem unterstützten Frontend-Framework.

Schritt-für-Schritt-Inhalte

Tag 1: Architektur und Seitenkomponenten

1. Schritt 1: Inertia-Modell einordnen

   Serverrouting, Seitenauflösung, Protokoll, History und Unterschied zu klassischer SPA sowie Blade werden anhand eines Requests analysiert.

2. Schritt 2: Starterprojekt einrichten

   Frontend-Framework, TypeScript, Build, Aliasstrukturen und gemeinsame Layouts werden reproduzierbar konfiguriert.

3. Schritt 3: Seiten und Props entwerfen

   Controllerantworten, geteilte Daten, Lazy Props, optionale Daten und Serialisierungsgrenzen werden bewusst festgelegt.

4. Schritt 4: Navigation aufbauen

   Links, Redirects, Statusmeldungen, Scroll- und State-Erhaltung werden zu einem konsistenten Navigationsmodell verbunden.

Tag 2: Formulare, Sicherheit und Datenfluss

1. Schritt 5: Formulare implementieren

   Formzustand, serverseitige Validierung, Fehlerzuordnung, Verarbeitungssperren und Reset-Verhalten werden umgesetzt.

2. Schritt 6: Authentifizierung integrieren

   Login, Logout, verifizierte Konten, geschützte Routen und rollenabhängige Komponenten werden verbunden.

3. Schritt 7: Datenlisten optimieren

   Suche, Filter, Pagination, teilweise Reloads und verzögertes Laden reduzieren übertragene Daten und Wartezeit.

4. Schritt 8: Dateien und Fortschritt behandeln

   Multipart-Anfragen, Uploadfortschritt, Vorschau, Abbruch und serverseitige Speicherregeln werden integriert.

Tag 3: Produktion, Performance und Tests

1. Schritt 9: Frontend-Struktur skalieren

   Komponenten, Composables oder Hooks, Typen, Seitenmodule und gemeinsame Fehlerbehandlung werden klar getrennt.

2. Schritt 10: Performance prüfen

   Bundlegröße, Code-Splitting, Prefetching, Caching, lange Props und Renderkosten werden gemessen und reduziert.

3. Schritt 11: Renderingstrategie bewerten

   Clientrendering, serverseitiges Rendering, SEO-Anforderungen und Betriebsaufwand werden für Seitentypen abgewogen.

4. Schritt 12: End-to-End testen

   Navigation, Validierungsfehler, Berechtigungen, History, Upload und zentrale Benutzerpfade werden automatisiert geprüft.

Praxisprojekt

Im Praxisprojekt entsteht ein Dashboard mit geschützten Seiten, verschachtelten Layouts, Such- und Filterzustand, Formularen, Datei-Upload und optimistischen Rückmeldungen. Eine Framework-Variante wird vollständig umgesetzt; Unterschiede der anderen Varianten werden eingeordnet.

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.