Seminar Phoenix Components und HEEx

Wartbare Oberflächen entstehen durch klare Komponentenverträge und nicht durch immer größere Templates. Dieses Training vermittelt die systematische Entwicklung wiederverwendbarer HEEx-Komponenten mit geprüften Attributen, Slots, Formularbausteinen und konsistenten Zuständen.

Ziel und Nutzen

Die Teilnehmenden strukturieren Oberflächen in kleine, überprüfbare Funktionskomponenten und entwickeln eine belastbare Komponentenbibliothek. Sie können Datenfluss, Varianten, Fehlermeldungen, Barrierefreiheit und Designkonventionen so abbilden, dass Teams zuverlässig weiterarbeiten können.

Zielgruppe

Phoenix-, LiveView- und Full-Stack-Entwickler sowie technische Frontend-Verantwortliche, die serverseitig gerenderte Oberflächen vereinheitlichen und wiederverwendbare UI-Bausteine etablieren möchten.

Voraussetzungen

Phoenix- und Elixir-Grundkenntnisse sowie praktische Erfahrung mit HTML, CSS und Formularen. LiveView-Erfahrung ist hilfreich, aber nicht zwingend erforderlich.

Themenschwerpunkte

• HEEx-Syntax, Escaping, dynamische Attribute und compilerunterstützte Prüfungen
• Funktionskomponenten als klare, zustandslose Bausteine
• Attribute, Standardwerte, Typangaben, globale Attribute und Slots
• Komponenten-APIs, Namenskonventionen und sinnvolle Größen von Bausteinen
• Formulare, Eingabefelder, Validierungszustände und konsistente Fehlermeldungen
• Tabellen, Listen, Dialoge, Navigation und wiederkehrende Layoutmuster
• Verified Routes und sichere Verknüpfung von Navigation und Parametern
• Zusammenspiel mit LiveView, LiveComponents und JavaScript-Hooks
• Barrierearme Struktur, semantisches HTML und Tastaturbedienung
• CSS-Strategien, Varianten und kontrollierte Anpassbarkeit ohne Kopiercode
• Komponententests, visuelle Prüfpunkte und robuste Beispielzustände
• Aufbau, Dokumentation und Pflege einer internen Komponentenbibliothek

Praxis und Methoden

Die Teilnehmenden zerlegen eine unübersichtliche Oberfläche in Komponenten und entwickeln daraus ein kleines, konsistentes UI-System. Dabei werden Attribute und Slots bewusst als Vertrag gestaltet. Formulare und Fehlersituationen bilden den Schwerpunkt, weil dort unklare Komponenten am schnellsten teuer werden.

Einordnung

Das Seminar konzentriert sich auf Phoenix HTML und HEEx. Umfangreiche Grafikgestaltung, CSS-Grundlagen und die Entwicklung eines vollständigen Corporate Designs sind nicht enthalten. Zustandsintensive LiveView-Anwendungen werden im LiveView-Seminar behandelt.