Seminar Laravel Frontend mit Inertia

Inhaltsübersicht

• Seminarprofil
• Lernziele
• Inhalte
• Praxisübungen
• Zielgruppe und Voraussetzungen

Seminarprofil

Inertia verbindet klassische Laravel-Routen und Controller mit komponentenbasierten Frontends. Dadurch bleibt die serverseitige Anwendungsstruktur erhalten, während Navigation und Interaktion das Verhalten einer Single-Page-Anwendung bieten.

Die praktischen Übungen werden mit einem vorab festgelegten Frontend-Stack durchgeführt. Vue, React und Svelte werden hinsichtlich Starter-Kit-Struktur, Komponentenmodell und Team-Eignung verglichen; eine vollständige parallele Vertiefung aller drei Frameworks ist nicht Gegenstand des Seminars.

Lernziele

• Inertia-Architektur und Request-Fluss verstehen
• ein Laravel-Starter-Kit mit passendem Frontend-Stack strukturieren
• Page Components, Layouts und typisierte Props entwickeln
• Formulare, Validierung und Fehlerzustände ohne doppelte API-Schicht umsetzen
• partielle Reloads, Deferred Props und Asset-Builds optimieren
• Authentifizierung, Autorisierung und Frontend-Abläufe testen

Inhalte

Inertia-Architektur und Starter Kits

Zusammenspiel von Laravel-Routen, Controllern, Inertia-Responses und Frontend-Komponenten. Auswahl und Aufbau der React-, Vue- oder Svelte-Starter-Kits.

• Serverseitiges Routing
• Page Components
• Starter-Kit-Struktur
• Frontend-Stack-Auswahl

TypeScript, Vite und Projektstruktur

Typdefinitionen, Alias-Konfiguration, Komponenten- und Layoutstruktur, Asset-Build, Umgebungsvariablen und Entwicklungsworkflow.

• TypeScript-Typen
• Vite-Konfiguration
• Layouts und Komponenten
• Build- und Entwicklungsmodus

Navigation, Props und Datenfluss

Links, Visits, Shared Data, Flash-Daten, Lazy und Deferred Props, partielle Reloads und kontrollierter Client-Zustand.

• Inertia Navigation
• Shared Props
• Partial Reloads
• Deferred Data

Formulare und Validierung

Form Helper, serverseitige Form Requests, Fehlerzuordnung, Uploads, Fortschritt, optimistische Rückmeldungen und Schutz vor doppelten Übermittlungen.

• Form State
• Validation Errors
• File Uploads
• Submission Control

Authentifizierung und Autorisierung

Starter-Kit-Flows, geschützte Routen, Berechtigungsinformationen, sichere Prop-Auswahl und serverseitige Policies.

• Authentication Flow
• Protected Pages
• Policy Data
• Datenminimierung

Performance, SSR und Tests

Code Splitting, Asset-Versionierung, serverseitiges Rendering als Option, HTTP- und Browsertests sowie komponentennahe Prüfungen.

• Code Splitting
• Asset Versioning
• SSR-Grundlagen
• Feature- und Browsertests

Praxisübungen

1. Schritt 1: Ein Starter-Kit auswählen und die Projektstruktur analysieren.
2. Schritt 2: Layouts, Navigation und typisierte Page Props aufbauen.
3. Schritt 3: Eine Listenansicht mit Filtern, Pagination und partiellen Reloads implementieren.
4. Schritt 4: Ein Formular mit Validierung, Upload und Fehlerrückmeldung entwickeln.
5. Schritt 5: Authentifizierung und fachliche Berechtigungen integrieren.
6. Schritt 6: Build, Ladeverhalten und zentrale Benutzerabläufe testen.

Zielgruppe und Voraussetzungen

Zielgruppe: Laravel-Full-Stack-Entwickler und Frontend-affine PHP-Entwickler, die moderne Single-Page-Erlebnisse ohne separate REST-Schicht aufbauen möchten.

Voraussetzungen: Sichere Laravel-Grundlagen sowie Grundkenntnisse in JavaScript oder TypeScript und mindestens einem komponentenbasierten Frontend-Framework.