Seminar Vaadin Hilla mit React und TypeScript

Seminarprofil

Das Seminar verbindet ein Java-Backend mit einer React- und TypeScript-Oberfläche. Hilla erzeugt typsichere Clients für browseraufrufbare Services und unterstützt Routing, Formulare, Sicherheit, reaktive Datenflüsse und hybride Anwendungen mit Flow.

Lernziele

• eine Hilla-Anwendung mit Spring Boot, React und TypeScript strukturieren
• browseraufrufbare Java-Services sicher und typsicher bereitstellen
• Vaadin React Components für Views, Formulare und Datenlisten einsetzen
• Routing, Validierung, Sicherheit und Fehlerbehandlung integrieren
• reaktive Funktionen, Tests, Hybridbetrieb und Production Build umsetzen

Zielgruppe

Java-, React- und Full-Stack-Entwickler, die typsichere Webanwendungen mit gemeinsamem Java-Backend entwickeln.

Voraussetzungen

Sichere Java-Kenntnisse sowie Grundlagen in TypeScript und React. Spring-Boot-Erfahrung ist hilfreich.

Inhaltsverzeichnis

1. Kapitel 1: Hilla-Architektur und Projektaufbau
2. Kapitel 2: Browseraufrufbare Services
3. Kapitel 3: React-Oberflächen mit Vaadin-Komponenten
4. Kapitel 4: Routing, Sicherheit und Anwendungsstruktur
5. Kapitel 5: Reaktive Funktionen, Tests und Bereitstellung

Kapitel 1: Hilla-Architektur und Projektaufbau

Inhaltsverzeichnis

• Spring-Boot-Backend und React-Frontend
• Projektstruktur und Build-Pipeline
• generierte TypeScript-Module
• Entwicklungsmodus und Fehlerdiagnose

Schritt-für-Schritt-Anleitung

1. Ein Hilla-Projekt anlegen und die Laufzeitkomponenten zuordnen.
2. Backend-, Frontend- und generierte Quellen voneinander unterscheiden.
3. Die TypeScript-Generierung ausführen und prüfen.
4. Eine erste React-View starten und Build-Fehler systematisch analysieren.

Kapitel 2: Browseraufrufbare Services

Inhaltsverzeichnis

• Service-Annotationen und Methodensignaturen
• Typkonvertierung und Nullbarkeit
• Validierung und Fehlerübertragung
• Authentifizierung und Methodenautorisierung

Schritt-für-Schritt-Anleitung

1. Einen Java-Service für den Browserzugriff freigeben.
2. DTOs mit eindeutigen Typen und Validierungsregeln definieren.
3. Den generierten Client in TypeScript verwenden.
4. Fehler und unberechtigte Aufrufe kontrolliert behandeln.

Kapitel 3: React-Oberflächen mit Vaadin-Komponenten

Inhaltsverzeichnis

• Komponenten, Layouts und State
• Grid und Datenabfragen
• Formulare und Feldvalidierung
• Dialoge, Benachrichtigungen und Ladezustände

Schritt-für-Schritt-Anleitung

1. Eine View aus Vaadin React Components zusammensetzen.
2. Daten über den generierten Serviceclient laden.
3. Ein typisiertes Bearbeitungsformular erstellen.
4. Lade-, Leer-, Fehler- und Erfolgszustände vollständig abbilden.

Kapitel 4: Routing, Sicherheit und Anwendungsstruktur

Inhaltsverzeichnis

• React Router und Layouts
• Routenparameter und Navigation
• Login, Rollen und geschützte Views
• Feature-Struktur und gemeinsame Services

Schritt-für-Schritt-Anleitung

1. Ein verschachteltes Routing mit Hauptlayout konfigurieren.
2. Datensatzbezug und Filterzustand in der URL abbilden.
3. Login und rollenabhängige Navigation einrichten.
4. Frontend-Funktionen und Backend-Services nach Fachbereichen gliedern.

Kapitel 5: Reaktive Funktionen, Tests und Bereitstellung

Inhaltsverzeichnis

• reaktive Services und Signals
• hybride Flow-Hilla-Anwendung
• Frontend- und End-to-End-Tests
• Production Build und Laufzeitkonfiguration

Schritt-für-Schritt-Anleitung

1. Eine Echtzeitaktualisierung für einen Geschäftsstatus ergänzen.
2. Eine Flow-Route mit einer Hilla-View in einer Anwendung kombinieren.
3. Komponenten- und Integrationsabläufe automatisiert prüfen.
4. Einen optimierten Build erzeugen und produktionsnah starten.

Praxisprojekt

Eine typsichere Full-Stack-Anwendung mit React-Views, Grid, Formular, Java-Service, Rollensteuerung, Echtzeitstatus und Produktionsbuild wird entwickelt.

Arbeitsweise

Geführte Full-Stack-Implementierung mit Java-, TypeScript- und React-Code, ergänzt durch Fehlersuche, Tests und Architekturentscheidungen.