Micro-Frontends und Design-System-Drift: Die konsistente Benutzeroberfläche aller Teams gewährleisten
Wie Teams, die Mikro-Frontends verwenden, eine konsistente Benutzeroberfläche beibehalten: gemeinsame Token und Komponenten als versionierte Pakete, CSS-Isolation, Upgrade-Richtlinien und visuelle Regressionsprüfungen.
Kernaussage
Mikro-Frontends ermöglichen es Teams, Teile eines Produkts unabhängig voneinander bereitzustellen, was eine Abweichung der Benutzeroberfläche wahrscheinlich macht: unterschiedliche Versionen von Komponenten, widersprüchliche CSS und duplizierte Stile. Sorgen Sie für Konsistenz, indem Sie Design-Tokens und Komponenten als versionierte Pakete teilen, die CSS jedes Teams isolieren, eine Upgrade-Richtlinie vereinbaren und Unterschiede mit visuellen Regressionstests erkennen.
Warum es zu Drift kommt
Auf der Website von Martin Fowler werden Mikro-Frontends als unabhängig auslieferbare Frontend-Anwendungen beschrieben, die zu einem größeren Ganzen zusammengefasst sind und deren Hauptvorteil die unabhängige Bereitstellung ist. Dieselbe Unabhängigkeit führt zu Drift: Teams aktualisieren das Designsystem zu unterschiedlichen Zeiten, kopieren Komponenten, um schneller voranzukommen, und schreiben CSS, das in andere Teile der Seite eindringt. Der Artikel warnt auch davor, dass einige Implementierungen Abhängigkeiten duplizieren und dass CSS, da es global und kaskadierend ist, eine bewusste Isolierung erfordert.
Teilen Sie das System als Pakete
Veröffentlichen Sie Token und Komponenten als versionierte Pakete, nicht als kopierten Code. Token in einem Standardformat, wie dem W3C DTCG-Format, können für jedes Framework erstellt werden, das ein Team verwendet, sodass ein React-Team und ein Vue-Team immer noch die gleichen Farben, Abstände und Bewegungen verwenden.
Isolieren Sie CSS
Verhindern Sie mit einem konsistenten Ansatz, dass Stile zwischen Teams verloren gehen: Namenskonventionen wie BEM, CSS-Module, CSS-in-JS oder Shadow DOM für Webkomponenten. Wählen Sie eine Konvention für das gesamte Produkt und die Flusen dafür.
Eine Upgrade-Richtlinie
Vereinbaren Sie, wie weit ein Team zurückfallen darf, beispielsweise nicht mehr als eine Hauptversion, und verwenden Sie semantische Versionierung, damit Teams wissen, wann Änderungen fehlschlagen. Verfolgen Sie in einem gemeinsamen Dashboard, welche Version jedes Mikro-Frontend verwendet.
Drift automatisch einfangen
Visuelle Regressionstests auf wichtigen Bildschirmen, Lint-Regeln, die rohe Farb- und Abstandswerte verbieten, und Designüberprüfungen auf gemeinsam genutzten Oberflächen (Kopfzeilen, Navigation, Checkout) erkennen Inkonsistenzen, bevor Benutzer sie sehen.
Wichtige Prinzipien
- Eine unabhängige Bereitstellung macht eine Abweichung der Benutzeroberfläche wahrscheinlich
- Teilen Sie Token und Komponenten als versionierte Pakete
- Isolieren Sie CSS mit einem einheitlichen Ansatz
- Vereinbaren Sie eine Upgrade-Richtlinie und verfolgen Sie Versionen
- Verwenden Sie visuelle Regressionstests und Lint-Regeln
Häufige Fragen
Quellen
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org