Seminar Phoenix Framework – Intensivseminar Full-Stack mit Ecto und LiveView

Das Intensivseminar fasst die Full-Stack-Themen des Portfolios zusammen: Phoenix-Grundlagen, Request Lifecycle, Ecto, Contexts, HEEx, Komponenten, LiveView, Assets, Authentifizierung, Tests und Produktionsvorbereitung. Eine vollständige interaktive Anwendung entsteht schrittweise.

Inhaltsübersicht

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

Zielgruppe

Elixir-Entwickler, Full-Stack-Entwickler und Teams, die produktive Phoenix-LiveView-Anwendungen entwickeln oder modernisieren

Voraussetzungen

Sichere Elixir-Grundkenntnisse; Web- und Datenbankerfahrung wird vorausgesetzt

Lernziele

• Phoenix-Anwendungen vom Projektstart bis zum Release entwickeln
• Datenmodell und Geschäftslogik über Ecto und Contexts strukturieren
• Komponentenbasierte LiveView-Oberflächen professionell umsetzen
• Authentifizierung, Tests, Assets und Performance integrieren

Seminarinhalte

1. Projektstart und Request Lifecycle

1. Schritt 1: Entwicklungsumgebung und Projektoptionen validieren.
2. Schritt 2: Endpoint, Plug-Pipeline und Router verfolgen.
3. Schritt 3: Web- und Domänenschicht von Beginn an trennen.

2. Ecto-Datenmodell

1. Schritt 1: Migrationen, Schemas und Associations entwerfen.
2. Schritt 2: Changesets für Eingaben und fachliche Regeln erstellen.
3. Schritt 3: Constraints und Indexe als Integritäts- und Performancebasis nutzen.

3. Contexts und Geschäftslogik

1. Schritt 1: Anwendungsfälle als öffentliche Context-Funktionen formulieren.
2. Schritt 2: Query- und Transaktionsdetails kapseln.
3. Schritt 3: Fehlerverträge für Web- und Hintergrundaufrufe definieren.

4. HEEx und Komponenten

1. Schritt 1: Sichere Templates mit klarer Datenübergabe erstellen.
2. Schritt 2: Funktionskomponenten mit Attributen und Slots entwerfen.
3. Schritt 3: Formulare, Navigation und Rückmeldungen vereinheitlichen.

5. LiveView-Lifecycle

1. Schritt 1: Mount, Parameterverarbeitung, Events und Nachrichten implementieren.
2. Schritt 2: Assigns klein und nachvollziehbar halten.
3. Schritt 3: Navigation, Patches und URL-Zustand korrekt einsetzen.

6. Formulare und Validierung

1. Schritt 1: Changesets in LiveView-Formulare integrieren.
2. Schritt 2: Sofortvalidierung und Speichervorgang trennen.
3. Schritt 3: Verschachtelte und dynamische Eingaben robust behandeln.

7. LiveComponents und Streams

1. Schritt 1: Komponentengrenzen anhand von Zustand und Wiederverwendung bestimmen.
2. Schritt 2: Große Sammlungen mit Streams effizient darstellen.
3. Schritt 3: Einfügen, Aktualisieren, Löschen und Zurücksetzen kontrollieren.

8. Async, Uploads und Browserintegration

1. Schritt 1: Langlaufende Arbeit asynchron starten und anzeigen.
2. Schritt 2: Uploads begrenzen, validieren und sicher verarbeiten.
3. Schritt 3: LiveView-JS und Hooks für notwendige Clientfunktionen einsetzen.

9. Assets und UI-Qualität

1. Schritt 1: Tailwind- und JavaScript-Build konfigurieren.
2. Schritt 2: Colocated Assets und Core Components pflegbar einsetzen.
3. Schritt 3: Barrierefreiheit, Fokus und Fehlermeldungen prüfen.

10. Authentifizierung und Scopes

1. Schritt 1: Benutzerkonten und Sitzungen integrieren.
2. Schritt 2: LiveView-Zugriffe über Mount-Hooks absichern.
3. Schritt 3: Datenabfragen an den aktuellen Benutzer- oder Organisationsscope binden.

11. Tests und Performance

1. Schritt 1: Contexts, Komponenten und LiveViews automatisiert testen.
2. Schritt 2: DOM-Verträge, Uploads und Navigation prüfen.
3. Schritt 3: Renderkosten, Queryverhalten und große Listen messen und optimieren.

12. Produktionsrelease

1. Schritt 1: Runtime-Konfiguration und Secrets vorbereiten.
2. Schritt 2: Assets und Release reproduzierbar bauen.
3. Schritt 3: Migration, Health Check und lokales Produktionsszenario ausführen.

Praxisprojekt

Entwicklung einer interaktiven Projektplattform mit Benutzerkonten, Ecto-Datenmodell, Contexts, Komponentenbibliothek, LiveView-Formularen, Streams, Uploads, asynchronen Aktionen, Tests und Produktionsrelease.

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.