Seminar Phoenix Framework – Asset-Pipeline, Tailwind CSS und JavaScript-Integration

Die kompakte Schulung behandelt die Frontend-Werkzeugkette moderner Phoenix-Anwendungen. Assets, Tailwind CSS, JavaScript, LiveView-JS-Kommandos und Hooks werden zu einem reproduzierbaren Entwicklungs- und Produktionsprozess verbunden.

Inhaltsübersicht

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

Zielgruppe

Phoenix- und LiveView-Entwickler, Full-Stack-Entwickler sowie technische Frontend-Verantwortliche

Voraussetzungen

Grundkenntnisse in Phoenix, HEEx, HTML, CSS und JavaScript

Lernziele

• Asset-Werkzeuge und Verzeichnisstruktur sicher konfigurieren
• Tailwind-Klassen und Komponenten wartbar organisieren
• JavaScript gezielt über Hooks und LiveView-JS einbinden
• Produktions-Assets reproduzierbar erstellen und prüfen

Seminarinhalte

1. Asset-Struktur und Build-Prozess

1. Schritt 1: Generierte Asset-Verzeichnisse und Konfigurationsdateien einordnen.
2. Schritt 2: Entwicklungs- und Produktionsbuild voneinander unterscheiden.
3. Schritt 3: Abhängigkeiten und Build-Kommandos reproduzierbar dokumentieren.

2. Tailwind CSS in Phoenix

1. Schritt 1: Quellpfade und Klassenerkennung korrekt konfigurieren.
2. Schritt 2: Responsive Zustände, Themen und wiederkehrende Muster strukturieren.
3. Schritt 3: Unnötige dynamische Klassen vermeiden und Build-Ergebnisse kontrollieren.

3. HEEx und Core Components

1. Schritt 1: Präsentationslogik in wiederverwendbare Funktionskomponenten verschieben.
2. Schritt 2: Attribute, Slots und CSS-Klassen konsistent kombinieren.
3. Schritt 3: Komponenten für Formulare, Navigation und Rückmeldungen vereinheitlichen.

4. LiveView-JS-Kommandos

1. Schritt 1: Clientseitige Zustandsänderungen ohne eigenen Hook umsetzen.
2. Schritt 2: Kommandos für Klassen, Übergänge, Fokus und Events kombinieren.
3. Schritt 3: Server- und Clientverhalten klar voneinander abgrenzen.

5. Hooks und colocated Assets

1. Schritt 1: Hooks nur für erforderliche Browser- oder Bibliotheksintegration einsetzen.
2. Schritt 2: Lifecycle-Callbacks robust und idempotent implementieren.
3. Schritt 3: Colocated JavaScript und CSS nachvollziehbar in Komponenten kapseln.

6. Produktionsbuild und Fehleranalyse

1. Schritt 1: Assets kompilieren, digesten und für Releases vorbereiten.
2. Schritt 2: Cache-Header und unveränderliche Dateinamen im Betrieb berücksichtigen.
3. Schritt 3: Fehlende Klassen, Bundle-Probleme und Hook-Fehler systematisch diagnostizieren.

Praxisprojekt

Aufbau eines kleinen komponentenbasierten Frontends mit Tailwind-Theming, LiveView-JS-Interaktionen, einem Browser-Hook und reproduzierbarem Produktionsbuild.

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.