Seminar Flowable Frontend-Entwicklung – Forms SDK und Custom Components

Das Seminar behandelt die Entwicklung und Einbindung eigener Benutzeroberflächen und Formularkomponenten. SDK-Nutzung, Projektstruktur, Komponentenverträge, Datenbindung, Ereignisse, Styling, Sicherheit, Tests, Paketierung und Upgradefähigkeit werden in einer vollständigen Erweiterung umgesetzt.

Inhaltsübersicht

• Lernziele und fachliche Einordnung
• Schrittweise Seminarinhalte
• Praxisübungen und Laborszenarien
• Zielgruppe und Voraussetzungen
• Didaktik und Arbeitsweise

Lernziele

• Frontend-Architektur und Erweiterungspunkte der Flowable-Oberflächen einordnen.
• Eigene Formularkomponenten mit klaren Properties, Datenverträgen und Ereignissen entwickeln.
• Flowable-Daten und Services sicher aus benutzerdefinierten Oberflächen verwenden.
• Styling, Internationalisierung, Barrierearmut und Fehlerbehandlung produktionsnah umsetzen.
• Tests, Paketierung, Deployment, Versionierung und Upgradefähigkeit absichern.

Schrittweise Seminarinhalte

1. Frontend-Architektur und Erweiterungsstrategie

Schwerpunkt: Forms SDK, UI-Anwendung, Rendering, Komponentenregistry, APIs, Authentisierung, Build-System, Deployment und Abgrenzung Standard versus Custom.

1. Ausgangslage, fachliche Ziele, Schutzbedarf und Abnahmekriterien für den Themenblock „1. Frontend-Architektur und Erweiterungsstrategie“ erfassen.
2. Relevante Modelle, Konfigurationen, Daten, Rollen und Abhängigkeiten anhand von Forms SDK, UI-Anwendung, Rendering, Komponentenregistry, APIs, Authentisierung, Build-System, Deployment und Abgrenzung Standard versus Custom strukturiert darstellen.
3. Die erforderlichen Modellierungs-, Entwicklungs- oder Administrationsschritte in einer vorbereiteten Laborumgebung reproduzierbar umsetzen.
4. Funktion, Berechtigungen, Datenzustände, Protokollierung und Fehlerverhalten mit definierten Positiv-, Negativ- und Wiederholungsfällen prüfen.
5. Als Arbeitsergebnis eine begründete Frontend- und Erweiterungsarchitektur dokumentieren, fachlich abnehmen, versionieren und in einen wiederverwendbaren Standard überführen.

2. Entwicklungsprojekt und Toolchain

Schwerpunkt: Projektstruktur, Package Management, TypeScript, Build, Linting, lokale Entwicklung, Konfiguration, Umgebungen und Quellverwaltung.

1. Ausgangslage, fachliche Ziele, Schutzbedarf und Abnahmekriterien für den Themenblock „2. Entwicklungsprojekt und Toolchain“ erfassen.
2. Relevante Modelle, Konfigurationen, Daten, Rollen und Abhängigkeiten anhand von Projektstruktur, Package Management, TypeScript, Build, Linting, lokale Entwicklung, Konfiguration, Umgebungen und Quellverwaltung strukturiert darstellen.
3. Die erforderlichen Modellierungs-, Entwicklungs- oder Administrationsschritte in einer vorbereiteten Laborumgebung reproduzierbar umsetzen.
4. Funktion, Berechtigungen, Datenzustände, Protokollierung und Fehlerverhalten mit definierten Positiv-, Negativ- und Wiederholungsfällen prüfen.
5. Als Arbeitsergebnis ein reproduzierbares Komponentenentwicklungsprojekt dokumentieren, fachlich abnehmen, versionieren und in einen wiederverwendbaren Standard überführen.

3. Komponentenvertrag und Property-Design

Schwerpunkt: Komponentenname, Konfiguration, Eingaben, Ausgaben, Datentypen, Standardwerte, Designer-Metadaten, Validierung und Dokumentation.

1. Ausgangslage, fachliche Ziele, Schutzbedarf und Abnahmekriterien für den Themenblock „3. Komponentenvertrag und Property-Design“ erfassen.
2. Relevante Modelle, Konfigurationen, Daten, Rollen und Abhängigkeiten anhand von Komponentenname, Konfiguration, Eingaben, Ausgaben, Datentypen, Standardwerte, Designer-Metadaten, Validierung und Dokumentation strukturiert darstellen.
3. Die erforderlichen Modellierungs-, Entwicklungs- oder Administrationsschritte in einer vorbereiteten Laborumgebung reproduzierbar umsetzen.
4. Funktion, Berechtigungen, Datenzustände, Protokollierung und Fehlerverhalten mit definierten Positiv-, Negativ- und Wiederholungsfällen prüfen.
5. Als Arbeitsergebnis einen stabilen und verständlichen Komponentenvertrag dokumentieren, fachlich abnehmen, versionieren und in einen wiederverwendbaren Standard überführen.

4. Rendering, Zustand und Datenbindung

Schwerpunkt: Value, Model, komplexe Daten, Listen, lokaler Zustand, Lifecycle Hooks, Re-Rendering, Performance und Seiteneffekte.

1. Ausgangslage, fachliche Ziele, Schutzbedarf und Abnahmekriterien für den Themenblock „4. Rendering, Zustand und Datenbindung“ erfassen.
2. Relevante Modelle, Konfigurationen, Daten, Rollen und Abhängigkeiten anhand von Value, Model, komplexe Daten, Listen, lokaler Zustand, Lifecycle Hooks, Re-Rendering, Performance und Seiteneffekte strukturiert darstellen.
3. Die erforderlichen Modellierungs-, Entwicklungs- oder Administrationsschritte in einer vorbereiteten Laborumgebung reproduzierbar umsetzen.
4. Funktion, Berechtigungen, Datenzustände, Protokollierung und Fehlerverhalten mit definierten Positiv-, Negativ- und Wiederholungsfällen prüfen.
5. Als Arbeitsergebnis eine zustandsstabile benutzerdefinierte Formularkomponente dokumentieren, fachlich abnehmen, versionieren und in einen wiederverwendbaren Standard überführen.

5. Ereignisse, Aktionen und Servicezugriff

Schwerpunkt: Change, Validation, Custom Events, Form Actions, REST-Aufrufe, Fehlerzustände, Ladeindikatoren, Abbruch und Retry.

1. Ausgangslage, fachliche Ziele, Schutzbedarf und Abnahmekriterien für den Themenblock „5. Ereignisse, Aktionen und Servicezugriff“ erfassen.
2. Relevante Modelle, Konfigurationen, Daten, Rollen und Abhängigkeiten anhand von Change, Validation, Custom Events, Form Actions, REST-Aufrufe, Fehlerzustände, Ladeindikatoren, Abbruch und Retry strukturiert darstellen.
3. Die erforderlichen Modellierungs-, Entwicklungs- oder Administrationsschritte in einer vorbereiteten Laborumgebung reproduzierbar umsetzen.
4. Funktion, Berechtigungen, Datenzustände, Protokollierung und Fehlerverhalten mit definierten Positiv-, Negativ- und Wiederholungsfällen prüfen.
5. Als Arbeitsergebnis eine interaktive Komponente mit abgesichertem Servicezugriff dokumentieren, fachlich abnehmen, versionieren und in einen wiederverwendbaren Standard überführen.

6. Styling, Themes und Barrierearmut

Schwerpunkt: CSS-Isolation, Design Tokens, Responsive Design, Dark Mode, Fokus, Tastatur, ARIA, Kontrast und Browserkompatibilität.

1. Ausgangslage, fachliche Ziele, Schutzbedarf und Abnahmekriterien für den Themenblock „6. Styling, Themes und Barrierearmut“ erfassen.
2. Relevante Modelle, Konfigurationen, Daten, Rollen und Abhängigkeiten anhand von CSS-Isolation, Design Tokens, Responsive Design, Dark Mode, Fokus, Tastatur, ARIA, Kontrast und Browserkompatibilität strukturiert darstellen.
3. Die erforderlichen Modellierungs-, Entwicklungs- oder Administrationsschritte in einer vorbereiteten Laborumgebung reproduzierbar umsetzen.
4. Funktion, Berechtigungen, Datenzustände, Protokollierung und Fehlerverhalten mit definierten Positiv-, Negativ- und Wiederholungsfällen prüfen.
5. Als Arbeitsergebnis eine visuell integrierte und barrierearme Komponente dokumentieren, fachlich abnehmen, versionieren und in einen wiederverwendbaren Standard überführen.

7. Sicherheit und Datenschutz

Schwerpunkt: XSS, HTML-Encoding, Eingabevalidierung, Authentisierung, Autorisierung, CORS, Geheimnisse, personenbezogene Daten und Logging.

1. Ausgangslage, fachliche Ziele, Schutzbedarf und Abnahmekriterien für den Themenblock „7. Sicherheit und Datenschutz“ erfassen.
2. Relevante Modelle, Konfigurationen, Daten, Rollen und Abhängigkeiten anhand von XSS, HTML-Encoding, Eingabevalidierung, Authentisierung, Autorisierung, CORS, Geheimnisse, personenbezogene Daten und Logging strukturiert darstellen.
3. Die erforderlichen Modellierungs-, Entwicklungs- oder Administrationsschritte in einer vorbereiteten Laborumgebung reproduzierbar umsetzen.
4. Funktion, Berechtigungen, Datenzustände, Protokollierung und Fehlerverhalten mit definierten Positiv-, Negativ- und Wiederholungsfällen prüfen.
5. Als Arbeitsergebnis ein dokumentiertes Frontend-Sicherheitsprofil dokumentieren, fachlich abnehmen, versionieren und in einen wiederverwendbaren Standard überführen.

8. Automatisierte Tests und Diagnose

Schwerpunkt: Unit Tests, Component Tests, Mocking, Integration Tests, Browser Tests, Fehlergrenzen, Telemetrie, Regression und Testabdeckung.

1. Ausgangslage, fachliche Ziele, Schutzbedarf und Abnahmekriterien für den Themenblock „8. Automatisierte Tests und Diagnose“ erfassen.
2. Relevante Modelle, Konfigurationen, Daten, Rollen und Abhängigkeiten anhand von Unit Tests, Component Tests, Mocking, Integration Tests, Browser Tests, Fehlergrenzen, Telemetrie, Regression und Testabdeckung strukturiert darstellen.
3. Die erforderlichen Modellierungs-, Entwicklungs- oder Administrationsschritte in einer vorbereiteten Laborumgebung reproduzierbar umsetzen.
4. Funktion, Berechtigungen, Datenzustände, Protokollierung und Fehlerverhalten mit definierten Positiv-, Negativ- und Wiederholungsfällen prüfen.
5. Als Arbeitsergebnis einen automatisierten Komponenten-Testkatalog dokumentieren, fachlich abnehmen, versionieren und in einen wiederverwendbaren Standard überführen.

9. Paketierung, Deployment und Upgradefähigkeit

Schwerpunkt: Bundle, Version, Abhängigkeiten, Registry-Eintrag, App-Paket, CI/CD, Rollback, Kompatibilitätsprüfung, Migration und Pflege.

1. Ausgangslage, fachliche Ziele, Schutzbedarf und Abnahmekriterien für den Themenblock „9. Paketierung, Deployment und Upgradefähigkeit“ erfassen.
2. Relevante Modelle, Konfigurationen, Daten, Rollen und Abhängigkeiten anhand von Bundle, Version, Abhängigkeiten, Registry-Eintrag, App-Paket, CI/CD, Rollback, Kompatibilitätsprüfung, Migration und Pflege strukturiert darstellen.
3. Die erforderlichen Modellierungs-, Entwicklungs- oder Administrationsschritte in einer vorbereiteten Laborumgebung reproduzierbar umsetzen.
4. Funktion, Berechtigungen, Datenzustände, Protokollierung und Fehlerverhalten mit definierten Positiv-, Negativ- und Wiederholungsfällen prüfen.
5. Als Arbeitsergebnis eine deploybare und wartbare Erweiterung dokumentieren, fachlich abnehmen, versionieren und in einen wiederverwendbaren Standard überführen.

Praxisübungen und Laborszenarien

• Aufbau eines SDK-Projekts und Registrierung einer eigenen Formularkomponente.
• Implementierung komplexer Datenbindung, Validierung und eines abgesicherten Serviceaufrufs.
• Ergänzung von Theme, Tastaturbedienung und automatisierten Komponenten- sowie Browsertests.
• Paketierung und Deployment der Erweiterung mit Versions- und Rollbackkonzept.

Zielgruppe und Voraussetzungen

Zielgruppe: Frontend-Entwicklung, Full-Stack-Entwicklung, UX Engineering, Flowable-Entwicklung und technische Architektur.

Voraussetzungen: Gute Kenntnisse in JavaScript oder TypeScript, HTML, CSS, REST und modernen Frontend-Buildprozessen sowie Flowable-Formulargrundlagen.

Didaktik und Arbeitsweise

Kurze Fachimpulse werden unmittelbar durch Demonstrationen, strukturierte Schrittfolgen, praktische Übungen und kontrollierte Fehlerfälle vertieft. Jede Übung verwendet definierte Ausgangswerte, Prüfpunkte und Dokumentationsanforderungen, damit Modelle, Konfigurationen und Betriebsabläufe nachvollziehbar, wiederholbar und teamfähig bleiben.