Seminar Phoenix Framework – HEEx und wiederverwendbare Komponenten

Die Schulung entwickelt eine wartbare UI-Schicht mit HEEx, Funktionskomponenten, Attributen, Slots und konsistenten Formularbausteinen. Semantik, Barrierefreiheit, Zustände und testbare Komponenten-APIs stehen im Vordergrund.

Inhaltsübersicht

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

Zielgruppe

Phoenix- und LiveView-Entwickler, Full-Stack-Entwickler sowie Teams, die ein wiederverwendbares UI- oder Designsystem aufbauen

Voraussetzungen

Phoenix-Grundkenntnisse sowie sicherer Umgang mit HTML und CSS

Lernziele

• HEEx-Ausdrücke und dynamische Attribute sicher verwenden
• Komponenten-APIs mit Attributen und Slots entwerfen
• Formulare, Layouts und Rückmeldungen standardisieren
• Komponenten auf Semantik, Barrierefreiheit und Stabilität testen

Seminarinhalte

1. HEEx-Grundlagen

1. Schritt 1: HTML und Elixir-Ausdrücke korrekt kombinieren.
2. Schritt 2: Attributinterpolation, Bedingungen und Schleifen lesbar einsetzen.
3. Schritt 3: Compile-Time-Prüfungen und typische Fehlermeldungen nutzen.

2. Funktionskomponenten

1. Schritt 1: Wiederkehrende Darstellung in kleine Komponenten extrahieren.
2. Schritt 2: Komponenten ohne versteckte Seiteneffekte gestalten.
3. Schritt 3: Benennung und Modulstruktur für lokale und globale Komponenten festlegen.

3. Attribute und Typverträge

1. Schritt 1: Erforderliche, optionale und globale Attribute deklarieren.
2. Schritt 2: Standardwerte und erlaubte Werte für Komponenten definieren.
3. Schritt 3: Fehlende oder falsche Aufrufe früh sichtbar machen.

4. Slots und zusammensetzbare APIs

1. Schritt 1: Inhaltsslots für flexible Komponenten verwenden.
2. Schritt 2: Benannte Slots und Slot-Attribute modellieren.
3. Schritt 3: Komposition statt großer Konfigurationsparameter einsetzen.

5. Formular- und Eingabekomponenten

1. Schritt 1: Changesets und Formstrukturen sauber an Komponenten übergeben.
2. Schritt 2: Label, Fehler, Hilfe und Zustände konsistent rendern.
3. Schritt 3: Dynamische Felder und wiederholbare Gruppen strukturieren.

6. Layouts, Navigation und Rückmeldungen

1. Schritt 1: Root-Layout und Seitenlayout nachvollziehbar organisieren.
2. Schritt 2: Navigation, Breadcrumbs und aktive Zustände kapseln.
3. Schritt 3: Flash, Dialoge und leere Zustände einheitlich gestalten.

7. Barrierefreiheit und Semantik

1. Schritt 1: Semantische Elemente vor generischen Containern bevorzugen.
2. Schritt 2: Tastaturfokus, Beschriftungen und Statusmeldungen prüfen.
3. Schritt 3: Interaktive Komponenten mit zugänglichen Zuständen versehen.

8. Komponententests und Pflege

1. Schritt 1: Renderausgabe und öffentliche Komponentenverträge testen.
2. Schritt 2: Varianten, Grenzfälle und ungültige Eingaben abdecken.
3. Schritt 3: Komponentenänderungen über Beispiele und Reviewregeln kontrollieren.

Praxisprojekt

Aufbau einer kleinen Komponentenbibliothek mit Buttons, Karten, Formularfeldern, Dialog, Navigation, Tabellenzuständen und zugänglichen Fehlermeldungen einschließlich Render- und Interaktionstests.

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.