Seminar Umbraco – Backoffice-Erweiterungen mit TypeScript, Lit und Vite

Das moderne Backoffice ist eine eigenständige Webanwendung mit klar definierten Erweiterungspunkten. Nachhaltige Erweiterungen benötigen deshalb eine saubere Frontend-Struktur, die konsequente Nutzung vorhandener Komponenten und eine stabile Verbindung zu serverseitigen Diensten.

Im Seminar entsteht schrittweise eine vollständige Erweiterung mit Navigation, Workspace-Ansicht, Formular, Dialogen und eigener API. Besonderes Gewicht liegt auf Wartbarkeit, Barrierearmut, Berechtigungsprüfung und der Fähigkeit, Versionswechsel kontrolliert zu bewältigen.

Inhaltsverzeichnis

• Zielsetzung
• Zielgruppe
• Voraussetzungen
• Seminarinhalte
• Praxisübungen
• Methodik

Zielsetzung

Ziel ist die eigenständige Planung, Implementierung, Prüfung und Paketierung moderner Backoffice-Erweiterungen ohne Eingriffe in den Umbraco-Kern.

Zielgruppe

Frontend- und Backend-Entwickler, Paketentwickler sowie technische Teams mit individuellen Backoffice-Anforderungen.

Voraussetzungen

Gute Kenntnisse in JavaScript oder TypeScript, HTML und CSS. C#- und ASP.NET-Core-Kenntnisse sind für die serverseitigen Module erforderlich.

Seminarinhalte

Die Themen werden in aufeinander aufbauenden Arbeitsschritten behandelt. Jeder Schritt wird demonstriert, in der Übungsumgebung umgesetzt und anhand festgelegter Prüfkriterien kontrolliert.

Tag 1 – Projektgrundlage und Erweiterungsarchitektur

Der erste Tag richtet eine reproduzierbare Entwicklungsumgebung ein und erklärt die Erweiterungsmechanik.

1. Schritt 1: Erweiterungspunkte, Alias-Konzept, Abhängigkeiten und Lebenszyklus des modernen Backoffice anhand einer Architekturübersicht einordnen. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
2. Schritt 2: TypeScript-, Lit- und Vite-Projekt mit klarer Ordnerstruktur, Quellkarten, Entwicklungsserver und reproduzierbarem Build anlegen. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
3. Schritt 3: Extension Manifests erstellen, registrieren und mit sprechenden Aliasen sowie eindeutigen Bedingungen wartbar organisieren. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
4. Schritt 4: Komponenten aus der Umbraco UI Library einsetzen und vorhandene Gestaltungsmuster statt eigener Parallelkomponenten verwenden. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
5. Schritt 5: Entwicklerwerkzeuge, Browserdiagnose und Backoffice-Protokolle für systematische Fehlersuche und Ladezeitkontrolle konfigurieren. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.

Tag 2 – Oberflächen, Workspaces und Interaktion

Der zweite Tag entwickelt die sichtbaren und interaktiven Bestandteile der Erweiterung.

1. Schritt 1: Dashboard, Menüeintrag und kontextabhängige Aktion aufbauen und ihre Sichtbarkeit über Bedingungen kontrollieren. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
2. Schritt 2: Eigene Eingabekomponente mit Eigenschaften, Validierung, Änderungsereignissen und konsistenter Datenbindung implementieren. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
3. Schritt 3: Workspace-Ansicht mit laden, bearbeiten, speichern, verwerfen und Konfliktbehandlung als vollständigen Arbeitsablauf gestalten. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
4. Schritt 4: Dialoge, Benachrichtigungen, Icons und Bestätigungen so einsetzen, dass Rückmeldungen eindeutig und Tastaturbedienung möglich bleiben. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
5. Schritt 5: Texte lokalisierbar strukturieren, Fokusführung prüfen und die Erweiterung mit verschiedenen Bildschirmbreiten sowie Benutzerrollen testen. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.

Tag 3 – Server-API, Sicherheit und Paketierung

Der dritte Tag verbindet die Oberfläche mit serverseitiger Logik und bereitet die Verteilung vor.

1. Schritt 1: Eigene API-Endpunkte mit klaren Datenmodellen, dokumentierter Schnittstelle und geeigneter Autorisierung bereitstellen. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
2. Schritt 2: Service- und Repository-Schichten kapseln, Eingaben validieren und fachliche Fehler in verständliche API-Antworten übersetzen. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
3. Schritt 3: Authentifizierte Aufrufe aus der Erweiterung ausführen und Lade-, Leer-, Fehler- sowie Wiederholungszustände sauber darstellen. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
4. Schritt 4: Frontend- und Backendtests für Kernlogik, Berechtigungen, Datenverträge und typische Bedienabläufe einrichten. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.
5. Schritt 5: Build-Artefakte, Paketmanifest, Versionsschema, Upgrade-Hinweise und Installationsprüfung für eine wiederverwendbare Auslieferung erstellen. Die Umsetzung wird unmittelbar geprüft, fachlich eingeordnet und mit den notwendigen Betriebs- oder Qualitätsregeln dokumentiert.

Praxisübungen

• Aufbau einer Backoffice-Erweiterung von der leeren Projektstruktur bis zum installierbaren Build.
• Implementierung eines Workspaces mit Formular, Validierung, Dialogen und serverseitiger Speicherung.
• Prüfung der Erweiterung mit zwei Rollen, deaktivierten Rechten, fehlerhaften Antworten und unterbrochenen Netzwerkaufrufen.
• Erstellung eines Paket- und Upgrade-Konzepts mit Versionsgrenzen, Abhängigkeiten und Rückfallmöglichkeit.

Methodik

Kurze Fachvorträge wechseln mit Live-Demonstrationen, geführten Umsetzungen und selbstständigen Übungen. Zwischenstände werden anhand nachvollziehbarer Prüfschritte kontrolliert. Typische Fehlkonfigurationen und Störungsszenarien werden bewusst einbezogen, damit nicht nur der Normalfall, sondern auch Diagnose, Korrektur und sichere Rücknahme beherrscht werden.