Tool

Formwork

Eine headless, barrierearme Formular-Bibliothek mit schemabasierter Validierung und ohne Laufzeit-Abhängigkeiten.

Platzhalter-Vorschau der Oberfläche von Formwork

Daten zum Projekt

Rolle
Autor
Art
Tool
Stack
  • TypeScript
  • React
  • Zod
Dauer
Laufend
Jahr
2023
Status
Live

Die Herausforderung

Barrierearme Formulare als Standard

Die meisten Formular-Bibliotheken überließen Fehleransagen und Fokus-Management den Entwicklerinnen und Entwicklern.

So entstand es

Der Entwicklungsprozess

Sechs Phasen vom ersten Gespräch bis zum Release. Der Balken zeigt, wie sich die Zeit verteilt hat.

4 Wochen insgesamt

  1. Analyse

    Der Formularcode von einem Dutzend Teams zeigte, welche Validierungsmuster sich überall wiederholen.

    3 Tage · Musterkatalog

  2. Architektur

    Datenmodell, Rendering-Strategie und API-Verträge standen fest, bevor der erste Screen entstand.

    3 Tage · ADR, Datenmodell

  3. Oberfläche

    Ein Komponenteninventar und responsive Layouts, vollständig aus Design-Tokens aufgebaut.

    2 Tage · Token-Set, Komponenteninventar

  4. Umsetzung

    Funktionen gingen in kleinen Schritten hinter Feature-Flags live, mit typisierten Grenzen zwischen Client und Server.

    8 Tage · Feature-Schnitte

  5. Tests

    Unit-, End-to-End- und Barrierefreiheitstests liefen bei jedem Pull Request.

    2 Tage · Testsuite in der CI

  6. Deployment

    Jeder Branch bekam eine Vorschau-Umgebung; der Rollout in die Produktion war ein Klick.

    2 Tage · Vorschau- und Release-Pipeline

  7. Ergebnis

    Von einem Dutzend Teams produktiv genutzt; 2 kB gzip.

Ansichten

Unter der Haube

Ein Schema, viele Ausgaben

Aus dem Schema entstehen Typen, Validierung und ARIA-Verknüpfungen – sie können also nie auseinanderlaufen.

  • TypeScript
  • React
  • Zod

Nächstes Projekt

So etwas geplant? Lass uns reden.

Lass uns reden

Erzähl mir von deinem Projekt. Ich antworte in der Regel innerhalb von zwei Werktagen.