Seminar Sirius Web – Frontend-Erweiterung mit React und TypeScript

Die Frontend-Erweiterung soll fachlichen Mehrwert schaffen, ohne ein schwer wartbares Abbild des Framework-Kerns zu erzeugen. Das Seminar arbeitet deshalb konsequent mit veröffentlichten Erweiterungspunkten und klaren Paketgrenzen.

Eine Beispielanwendung erhält eine eigene Workbench-Ansicht, ein Formular-Widget und einen spezialisierten Diagrammknoten einschließlich Tests.

Inhaltsübersicht

• Kapitel 1: Arbeitsplatz, Pakete und Build
• Kapitel 2: React-Architektur und Datenfluss
• Kapitel 3: Workbench und Extension Points
• Kapitel 4: Eigene Formular-Widgets
• Kapitel 5: Eigene Diagrammknoten und Palette
• Kapitel 6: Theming, Internationalisierung und Barrierefreiheit
• Kapitel 7: Frontend-Tests und Auslieferung

Kapitel 1: Arbeitsplatz, Pakete und Build

Inhaltsverzeichnis

• Node- und npm-Umgebung
• Monorepo und Pakete
• TypeScript-Konfiguration
• Vite und Build
• Abhängigkeiten und Versionen

Schritt-für-Schritt-Anleitung

1. Arbeitsplatz, Versionen und Ausgangsprojekt erfassen; anschließend einen reproduzierbaren Startzustand herstellen.
2. Den Baustein „Node- und npm-Umgebung“ am Übungsfall einrichten, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
3. Den Baustein „Monorepo und Pakete“ am Übungsfall konfigurieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
4. Den Baustein „TypeScript-Konfiguration“ am Übungsfall starten, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
5. Den Baustein „Vite und Build“ am Übungsfall prüfen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
6. Den Baustein „Abhängigkeiten und Versionen“ am Übungsfall dokumentieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
7. Den Gesamtstand mit einem Normalfall, einem Fehlerfall und einer gezielten Änderung prüfen; Abweichungen nachvollziehbar protokollieren.
8. Artefakte, Annahmen und offene technische Entscheidungen so dokumentieren, dass der nächste Arbeitsschritt ohne Wissensverlust anschließen kann.

Praxisbezug

Die Frontend-Umgebung wird reproduzierbar eingerichtet; ein neues Paket wird gebaut, geprüft und in die Beispielanwendung eingebunden.

Kapitel 2: React-Architektur und Datenfluss

Inhaltsverzeichnis

• Komponenten und Hooks
• Props und Kontext
• GraphQL-Client
• Lade-, Fehler- und Leerezustände
• Ereignisse und Aktualisierung

Schritt-für-Schritt-Anleitung

1. Schnittstelle und Verantwortungsgrenze definieren; die Implementierung danach in kleinen, testbaren Schritten ergänzen.
2. Den Baustein „Komponenten und Hooks“ am Übungsfall entwerfen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
3. Den Baustein „Props und Kontext“ am Übungsfall implementieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
4. Den Baustein „GraphQL-Client“ am Übungsfall integrieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
5. Den Baustein „Lade-, Fehler- und Leerezustände“ am Übungsfall testen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
6. Den Baustein „Ereignisse und Aktualisierung“ am Übungsfall refaktorieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
7. Den Gesamtstand mit einem Normalfall, einem Fehlerfall und einer gezielten Änderung prüfen; Abweichungen nachvollziehbar protokollieren.
8. Artefakte, Annahmen und offene technische Entscheidungen so dokumentieren, dass der nächste Arbeitsschritt ohne Wissensverlust anschließen kann.

Praxisbezug

Eine datengetriebene Ansicht wird aufgebaut und gegen verzögerte, leere und fehlerhafte Antworten robust gemacht.

Kapitel 3: Workbench und Extension Points

Inhaltsverzeichnis

• Workbench-Konfiguration
• Seiten- und Panelbeiträge
• Navigation
• Menüs und Aktionen
• Aktivierbarkeit und Prioritäten

Schritt-für-Schritt-Anleitung

1. Schnittstelle und Verantwortungsgrenze definieren; die Implementierung danach in kleinen, testbaren Schritten ergänzen.
2. Den Baustein „Workbench-Konfiguration“ am Übungsfall entwerfen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
3. Den Baustein „Seiten- und Panelbeiträge“ am Übungsfall implementieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
4. Den Baustein „Navigation“ am Übungsfall integrieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
5. Den Baustein „Menüs und Aktionen“ am Übungsfall testen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
6. Den Baustein „Aktivierbarkeit und Prioritäten“ am Übungsfall refaktorieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
7. Den Gesamtstand mit einem Normalfall, einem Fehlerfall und einer gezielten Änderung prüfen; Abweichungen nachvollziehbar protokollieren.
8. Artefakte, Annahmen und offene technische Entscheidungen so dokumentieren, dass der nächste Arbeitsschritt ohne Wissensverlust anschließen kann.

Praxisbezug

Eine eigene Seitenansicht wird als Erweiterungsbeitrag registriert und ohne Änderung bestehender Kernkomponenten eingebunden.

Kapitel 4: Eigene Formular-Widgets

Inhaltsverzeichnis

• Widget-Kontrakt
• Props und Validierung
• Wertänderung
• Fehlermeldungen
• Registrierung und Wiederverwendung

Schritt-für-Schritt-Anleitung

1. Schnittstelle und Verantwortungsgrenze definieren; die Implementierung danach in kleinen, testbaren Schritten ergänzen.
2. Den Baustein „Widget-Kontrakt“ am Übungsfall entwerfen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
3. Den Baustein „Props und Validierung“ am Übungsfall implementieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
4. Den Baustein „Wertänderung“ am Übungsfall integrieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
5. Den Baustein „Fehlermeldungen“ am Übungsfall testen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
6. Den Baustein „Registrierung und Wiederverwendung“ am Übungsfall refaktorieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
7. Den Gesamtstand mit einem Normalfall, einem Fehlerfall und einer gezielten Änderung prüfen; Abweichungen nachvollziehbar protokollieren.
8. Artefakte, Annahmen und offene technische Entscheidungen so dokumentieren, dass der nächste Arbeitsschritt ohne Wissensverlust anschließen kann.

Praxisbezug

Ein fachliches Eingabewidget wird entwickelt, in eine Form-Beschreibung eingebunden und mit Grenzwerten getestet.

Kapitel 5: Eigene Diagrammknoten und Palette

Inhaltsverzeichnis

• React-Flow-Knoten
• Ports und Handles
• Auswahl und Bearbeitung
• Palette und Werkzeuge
• Layout- und Größenverhalten

Schritt-für-Schritt-Anleitung

1. Schnittstelle und Verantwortungsgrenze definieren; die Implementierung danach in kleinen, testbaren Schritten ergänzen.
2. Den Baustein „React-Flow-Knoten“ am Übungsfall entwerfen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
3. Den Baustein „Ports und Handles“ am Übungsfall implementieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
4. Den Baustein „Auswahl und Bearbeitung“ am Übungsfall integrieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
5. Den Baustein „Palette und Werkzeuge“ am Übungsfall testen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
6. Den Baustein „Layout- und Größenverhalten“ am Übungsfall refaktorieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
7. Den Gesamtstand mit einem Normalfall, einem Fehlerfall und einer gezielten Änderung prüfen; Abweichungen nachvollziehbar protokollieren.
8. Artefakte, Annahmen und offene technische Entscheidungen so dokumentieren, dass der nächste Arbeitsschritt ohne Wissensverlust anschließen kann.

Praxisbezug

Ein spezialisierter Diagrammknoten wird mit Interaktion, Styling und Werkzeugbeitrag umgesetzt.

Kapitel 6: Theming, Internationalisierung und Barrierefreiheit

Inhaltsverzeichnis

• Designsystem und Komponentenbibliothek
• Theme-Varianten
• Übersetzungstexte
• Tastaturnavigation
• ARIA und Kontrast

Schritt-für-Schritt-Anleitung

1. Qualitätsmerkmale und Randbedingungen gewichten; Strukturentscheidungen anschließend anhand dieser Kriterien treffen.
2. Den Baustein „Designsystem und Komponentenbibliothek“ am Übungsfall strukturieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
3. Den Baustein „Theme-Varianten“ am Übungsfall bewerten, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
4. Den Baustein „Übersetzungstexte“ am Übungsfall abgrenzen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
5. Den Baustein „Tastaturnavigation“ am Übungsfall begründen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
6. Den Baustein „ARIA und Kontrast“ am Übungsfall überarbeiten, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
7. Den Gesamtstand mit einem Normalfall, einem Fehlerfall und einer gezielten Änderung prüfen; Abweichungen nachvollziehbar protokollieren.
8. Artefakte, Annahmen und offene technische Entscheidungen so dokumentieren, dass der nächste Arbeitsschritt ohne Wissensverlust anschließen kann.

Praxisbezug

Die Erweiterungen werden auf konsistente Darstellung, Übersetzbarkeit und Bedienung ohne Maus geprüft.

Kapitel 7: Frontend-Tests und Auslieferung

Inhaltsverzeichnis

• Unit-Tests
• Komponententests
• Playwright-End-to-End-Test
• Coverage und Stabilität
• Produktionsbuild und Artefaktprüfung

Schritt-für-Schritt-Anleitung

1. Risiko und beobachtbares Sollverhalten bestimmen; daraus reproduzierbare Positiv-, Negativ- und Grenztests ableiten.
2. Den Baustein „Unit-Tests“ am Übungsfall ableiten, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
3. Den Baustein „Komponententests“ am Übungsfall automatisieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
4. Den Baustein „Playwright-End-to-End-Test“ am Übungsfall ausführen, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
5. Den Baustein „Coverage und Stabilität“ am Übungsfall auswerten, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
6. Den Baustein „Produktionsbuild und Artefaktprüfung“ am Übungsfall stabilisieren, die Entscheidung begründen und das Zwischenresultat unmittelbar kontrollieren.
7. Den Gesamtstand mit einem Normalfall, einem Fehlerfall und einer gezielten Änderung prüfen; Abweichungen nachvollziehbar protokollieren.
8. Artefakte, Annahmen und offene technische Entscheidungen so dokumentieren, dass der nächste Arbeitsschritt ohne Wissensverlust anschließen kann.

Praxisbezug

Ein risikobasierter Testsatz wird automatisiert; der finale Build wird auf reproduzierbare Abhängigkeiten und Laufzeitfehler geprüft.