Seminar Phoenix Framework – LiveView Advanced: Streams, Uploads und Hooks

Das viertägige Aufbauseminar behandelt anspruchsvolle Phoenix-LiveView-Anwendungen mit komplexen Formularen, LiveComponents, Streams, asynchroner Arbeit, Uploads, JS-Kommandos, Hooks, colocated Assets, Realtime-Ereignissen, Performanceoptimierung und umfassenden Tests.

Inhaltsübersicht

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

Zielgruppe

Erfahrene Phoenix-LiveView-Entwickler und Full-Stack-Teams mit produktiven interaktiven Anwendungen

Voraussetzungen

Sichere Kenntnisse in Phoenix, Ecto, HEEx und LiveView-Lifecycle; praktische Erfahrung mit Formularen und Tests

Lernziele

• Komplexe LiveView-Zustände und Komponenten sauber strukturieren
• Große Sammlungen, asynchrone Arbeit und Uploads effizient umsetzen
• Browserintegration über JS-Kommandos und Hooks beherrschbar halten
• Performance, Wiederverbindung und Testbarkeit produktionsreif gestalten

Seminarinhalte

1. Lifecycle und Navigationsarchitektur

1. Schritt 1: Mount-, Parameter-, Event- und Nachrichtenpfade analysieren.
2. Schritt 2: URL-Zustand, Patch und Navigation gezielt modellieren.
3. Schritt 3: Hooks im serverseitigen Lifecycle für Querschnittsfunktionen einsetzen.

2. Zustandsmodell und Assigns

1. Schritt 1: Persistenten, temporären und abgeleiteten Zustand unterscheiden.
2. Schritt 2: Assigns minimieren und Aktualisierungswege dokumentieren.
3. Schritt 3: Wiederverbindung und Prozessneustart im Zustandsmodell berücksichtigen.

3. Komplexe Formulare

1. Schritt 1: Mehrstufige und dynamische Formulare strukturieren.
2. Schritt 2: Verschachtelte Associations und eingebettete Daten validieren.
3. Schritt 3: Recovery, Fehlermeldungen und parallele Änderungen behandeln.

4. LiveComponents

1. Schritt 1: Komponentengrenzen anhand von Zustand, Lifecycle und Wiederverwendung bestimmen.
2. Schritt 2: send_update und parent-child-Kommunikation kontrolliert einsetzen.
3. Schritt 3: Übermäßige Komponentenzerlegung und versteckte Kopplung vermeiden.

5. Streams

1. Schritt 1: Große Sammlungen als Streams initialisieren.
2. Schritt 2: Einfügen, Aktualisieren, Löschen und Zurücksetzen effizient ausführen.
3. Schritt 3: DOM-IDs, leere Zustände und Filterwechsel korrekt behandeln.

6. Asynchrone Arbeit

1. Schritt 1: Langlaufende Aufgaben mit asynchronen Assigns oder Tasks ausführen.
2. Schritt 2: Lade-, Erfolgs- und Fehlerzustände explizit rendern.
3. Schritt 3: Abbruch, Timeout und veraltete Ergebnisse kontrollieren.

7. Uploads

1. Schritt 1: Dateitypen, Größen, Anzahl und Zeitlimits definieren.
2. Schritt 2: Fortschritt, Validierung und Verbrauch sicher implementieren.
3. Schritt 3: Externe oder nachgelagerte Verarbeitung klar vom UI-Prozess trennen.

8. LiveView-JS-Kommandos

1. Schritt 1: Fokus, Klassen, Übergänge und Event-Pushes deklarativ kombinieren.
2. Schritt 2: Optimistische UI und Serverbestätigung bewusst abstimmen.
3. Schritt 3: Clientoperationen testbar und zugänglich gestalten.

9. Hooks und Browserbibliotheken

1. Schritt 1: Hook-Lifecycle vollständig implementieren.
2. Schritt 2: DOM-Eigentum zwischen LiveView und Fremdbibliothek abgrenzen.
3. Schritt 3: Events, Reconnects und Cleanup idempotent behandeln.

10. Colocated JavaScript und CSS

1. Schritt 1: Komponentennahe Assets gezielt einsetzen.
2. Schritt 2: Build-Integration und Namensräume kontrollieren.
3. Schritt 3: Wiederverwendung ohne globale Seiteneffekte sicherstellen.

11. Realtime und verteilte Ereignisse

1. Schritt 1: PubSub-Abonnements an Mount- und Connect-Zustand koppeln.
2. Schritt 2: Domänenereignisse in UI-Updates übersetzen.
3. Schritt 3: Doppelte, verspätete oder verlorene Nachrichten berücksichtigen.

12. Performance und Tests

1. Schritt 1: Renderpfade, Queryanzahl und Speicherverbrauch messen.
2. Schritt 2: Streams und Komponenten anhand realer Lastprofile optimieren.
3. Schritt 3: Formulare, Navigation, Uploads, Hooks und Reconnect-Fälle mit LiveViewTest absichern.

Praxisprojekt

Entwicklung eines kollaborativen Medien- und Aufgabenboards mit dynamischen Formularen, Streams, Uploads, asynchroner Verarbeitung, LiveComponents, Browser-Hook, PubSub-Aktualisierung, Performanceanalyse und umfassenden 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.