Micro-frontends en ontwerpsysteemafwijkingen: de gebruikersinterface consistent houden tussen teams
Hoe teams die micro-frontends gebruiken één consistente gebruikersinterface behouden: gedeelde tokens en componenten als versiepakketten, CSS-isolatie, upgradebeleid en visuele regressiecontroles.
Kern afhaalmaaltijd
Met micro-frontends kunnen teams delen van een product onafhankelijk implementeren, waardoor de gebruikersinterface waarschijnlijk zal afwijken: verschillende versies van componenten, conflicterende CSS en dubbele stijlen. Zorg voor consistentie door ontwerptokens en componenten te delen als versiepakketten, door de CSS van elk team te isoleren, een upgradebeleid overeen te komen en verschillen op te sporen met visuele regressietests.
Waarom drift plaatsvindt
De site van Martin Fowler beschrijft micro-frontends als onafhankelijk leverbare frontend-applicaties die tot een groter geheel zijn samengesteld, met onafhankelijke implementatie als belangrijk voordeel. Dezelfde onafhankelijkheid veroorzaakt drift: teams upgraden het ontwerpsysteem op verschillende tijdstippen, kopiëren componenten om sneller te kunnen werken en schrijven CSS dat naar andere delen van de pagina lekt. Het artikel waarschuwt ook dat sommige implementaties afhankelijkheden dupliceren en dat CSS, omdat het globaal en cascaderend is, opzettelijke isolatie nodig heeft.
Deel het systeem als pakketten
Publiceer tokens en componenten als versiepakketten, niet als gekopieerde en geplakte code. Tokens in een standaardformaat, zoals het W3C DTCG-formaat, kunnen worden gebouwd voor elk raamwerk dat een team gebruikt, zodat een React-team en een Vue-team nog steeds dezelfde kleuren, spatiëring en beweging delen.
Isoleer CSS
Voorkom dat stijlen tussen teams lekken met een consistente aanpak: naamgevingsconventies zoals BEM, CSS Modules, CSS-in-JS of Shadow DOM voor webcomponenten. Kies één conventie voor het hele product en pluisjes ervoor.
Een upgradebeleid
Spreek af hoe ver een team achterop mag raken, bijvoorbeeld niet meer dan één hoofdversie, en gebruik semantisch versiebeheer zodat teams weten wanneer er veranderingen plaatsvinden. Houd bij welke versie elke micro-frontend gebruikt in een gedeeld dashboard.
Vang drift automatisch
Visuele regressietests op belangrijke schermen, pluisregels die ruwe kleur- en spatiëringswaarden verbieden, en ontwerpbeoordelingen op gedeelde oppervlakken (kopteksten, navigatie, afrekenen) ontdekken inconsistenties voordat gebruikers ze zien.
Toets Principles in om te onthouden
- Onafhankelijke implementatie maakt UI-drift waarschijnlijk
- Deel tokens en componenten als versiepakketten
- Isoleer CSS met één consistente aanpak
- Spreek een upgradebeleid af en houd versies bij
- Gebruik visuele regressietests en pluisregels
Veelgestelde vragen
Bronnen
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org