Seminar Phoenix Framework – LiveView Grundlagen und interaktive Oberflächen

Die Schulung vermittelt den systematischen Einstieg in Phoenix LiveView. Lifecycle, Assigns, Events, Formulare, Navigation, Komponenten, PubSub-Updates, JS-Kommandos und Tests werden in einer interaktiven Anwendung kombiniert.

Inhaltsübersicht

• Seminarprofil, Zielgruppe und Voraussetzungen
• Lernziele
• Schrittweise Seminarinhalte
• Praxisprojekt
• Methodik

Zielgruppe

Phoenix-Entwickler, Full-Stack-Entwickler und Teams, die serverseitig gerenderte interaktive Oberflächen aufbauen

Voraussetzungen

Phoenix-, Ecto- und HEEx-Grundkenntnisse

Lernziele

• LiveView-Lifecycle und Zustandsmodell verstehen
• Events, Formulare und Navigation korrekt implementieren
• Komponenten und Realtime-Aktualisierung gezielt einsetzen
• Interaktionen mit LiveViewTest absichern

Seminarinhalte

1. LiveView-Modell und Lifecycle

1. Schritt 1: Initialen HTTP-Render und anschließende Socket-Verbindung unterscheiden.
2. Schritt 2: mount, render und Verbindungszustand nachvollziehen.
3. Schritt 3: Prozesszustand und Browserzustand sauber trennen.

2. Assigns und Darstellung

1. Schritt 1: Notwendige Daten als Assigns setzen und aktualisieren.
2. Schritt 2: Abgeleitete Werte ohne unnötige Speicherung berechnen.
3. Schritt 3: Renderausgabe mit HEEx übersichtlich strukturieren.

3. Events und Bindings

1. Schritt 1: Klick-, Änderungs- und Tastaturereignisse anbinden.
2. Schritt 2: Eventwerte validieren und serverseitig verarbeiten.
3. Schritt 3: Ladezustände und Fehlerrückmeldungen sichtbar machen.

4. Formulare und Changesets

1. Schritt 1: Formstrukturen aus Changesets erzeugen.
2. Schritt 2: Sofortvalidierung und Speichern unterscheiden.
3. Schritt 3: Fehler, Reset und erfolgreiche Navigation korrekt behandeln.

5. Navigation und URL-Zustand

1. Schritt 1: Patch und vollständige LiveView-Navigation unterscheiden.
2. Schritt 2: Filter und Auswahlzustände in der URL abbilden.
3. Schritt 3: handle_params für wiederholbare Navigation einsetzen.

6. Komponenten

1. Schritt 1: Funktionskomponenten für Darstellung verwenden.
2. Schritt 2: LiveComponents nur bei eigenem Lifecycle oder gezielter Aktualisierung einsetzen.
3. Schritt 3: Datenfluss zwischen Elternansicht und Komponente explizit halten.

7. PubSub und JS-Kommandos

1. Schritt 1: Serverereignisse abonnieren und in Assigns überführen.
2. Schritt 2: Mehrere Browseransichten konsistent aktualisieren.
3. Schritt 3: Einfache Clientinteraktionen mit LiveView-JS umsetzen.

8. LiveView-Tests

1. Schritt 1: LiveView mounten und gerenderten Inhalt prüfen.
2. Schritt 2: Formulare, Events und Navigation simulieren.
3. Schritt 3: Fehler-, Berechtigungs- und Realtime-Fälle absichern.

Praxisprojekt

Entwicklung eines interaktiven Aufgabenboards mit Filter-URL, Live-Validierung, Komponenten, PubSub-Aktualisierung, JS-Kommandos und vollständigen LiveView-Tests.

Methodik

Kurze fachliche Einführungen wechseln mit Live-Demonstrationen, geführten Implementierungsschritten, eigenständigen Übungen, Code-Reviews, Fehlerszenarien und überprüfbaren Zwischenständen. Sämtliche Übungen bauen auf einem konsistenten Referenzprojekt auf.