HMS MediaEngine Agent
c6a3cf7751
- ADR-0006: React 18/19 mit Vite im statischen SPA-Modus - Workspace §17.2: Statusleiste 32px, einklappbare Werkzeugleiste, Layer-Tabelle, Inspector ~30% mit Divider-Resize, umschaltbare rechte Seitenleiste, Fußleiste mit Setup/Live-Lock - Layer-Tabelle §17.3: alle 10 Pflichtspalten, Zeilen 30px, 7 unterscheidbare Zustände (Glyph+Farbe+Text, nie nur Farbe), Pfeiltasten-Navigation, Opacity-Fader mit echtem parameter.set - Inspector §17.4: 7 Tabs, Zahlenfelder mit Tippen/Ziehen/Pfeiltasten, Release-Befehl, Live-Lock sperrt Struktur - Design-Tokens §17.6: alle als CSS-Variablen (Flächen, Text, Akzent-Blau, Zustandsfarben, 4px-Raster, 2-4px Radien, Monospace tabular-nums, 100-180ms) - WebSocket: Snapshot bei Connect, Deltas danach, Reconnect 1s/2s/4s max 30s; Browser-Neustart stoppt Output nicht (§3.2) - REST: health/identity/cluster-nodes/parameters/diagnostics, Commands mit expected_revision + Revert bei 409 - Kein GO-Button, keine Standby-Anzeige, keine Cue-Carts (§17.1) - Build: tsc strict + vite, 27 Module, 262KB JS gzip 80KB - Python-Suite 549 grün unberührt
33 lines
1.3 KiB
Markdown
33 lines
1.3 KiB
Markdown
# ADR-0006: Frontend – React mit Vite
|
||
|
||
- **Status:** Angenommen
|
||
- **Datum:** 2026-09-11
|
||
- **Phase:** 5
|
||
- **Bauplan:** §7 („TypeScript, React oder Svelte, Vite-basierter Build“), §32 ADR-Pflicht
|
||
|
||
## Entscheidung
|
||
|
||
**React 18 mit Vite** im statischen SPA-Modus.
|
||
|
||
## Begründung
|
||
|
||
- Größtes Ökosystem an Komponenten, Tastatur- und Drag-Bibliotheken – wichtig für dichte Layer-Tabellen mit Ziehwerten (§17.3), Drag-Sortierung, undockbare Paneele (§17.2)
|
||
- Breitere Verfügbarkeit erfahrener Frontend-Entwickler
|
||
- Vite-Build für statische Assets passt zu §3.2 (Web-UI ist nie Videoausgang)
|
||
- Svelte wäre kleiner – aber bei einer professionellen Arbeitsoberfläche mit komplexem State (100+ Parameter je Layer) überwiegt Reacts Vorhersagbarkeit
|
||
- Ein Wechsel ist durch die saubere REST/WebSocket-API-Trennung (§23) jederzeit ohne Backend-Änderung möglich
|
||
|
||
## Alternativen
|
||
|
||
- Svelte/SvelteKit: kompakter, aber kleineres Ökosystem; bei tabellenlastiger UI weniger Vorteile
|
||
|
||
## Folgen
|
||
|
||
- pnpm-Lockfile; statische Auslieferung über FastAPI (web/-Ordner, §9)
|
||
- Vitest + Playwright für Tests (§7)
|
||
- Design-Tokens zentral in CSS-Variablen (§17.6), kein UI-Framework wie MUI – eigene dichte Oberfläche
|
||
|
||
## Freigabe
|
||
|
||
- Standardumsetzung gemäß §7; ADR dokumentiert die Auswahl.
|