Micro-Frontends és Design System Drift: A felhasználói felület egységessége a csapatok között
A mikro-frontendeket használó csapatok egyetlen konzisztens felhasználói felületet tartanak fenn: megosztott tokenek és összetevők verziózott csomagokként, CSS elkülönítés, frissítési szabályzatok és vizuális regresszió-ellenőrzések.
Core Takeaway
A mikro-frontendek lehetővé teszik a csapatok számára, hogy önállóan telepítsék a termék egyes részeit, ami valószínűsíti a felhasználói felület eltolódását: az összetevők különböző verziói, ütköző CSS és duplikált stílusok. Tartsa fenn az összhangot a tervezési tokenek és összetevők verziózott csomagokként való megosztásával, az egyes csapatok CSS-jének elkülönítésével, a frissítési szabályzat elfogadásával és a különbségek vizuális regressziós tesztekkel való felismerésével.
Miért történik a sodródás
Martin Fowler webhelye a mikro-frontendeket úgy írja le, mint önállóan szállítható előtér-alkalmazásokat, amelyek egy nagyobb egésszé állnak össze, és a független telepítés kulcsfontosságú előny. Ugyanez a függetlenség sodródást okoz: a csapatok különböző időpontokban frissítik a tervezési rendszert, másolják az összetevőket, hogy gyorsabban mozogjanak, és CSS-et írnak, amely az oldal más részeire szivárog. A cikk arra is figyelmeztet, hogy egyes megvalósítások duplikálják a függőségeket, és hogy a CSS globális és lépcsőzetes lévén szándékos elkülönítést igényel.
Ossza meg a rendszert csomagként
Tegye közzé a tokeneket és összetevőket verziószámmal ellátott csomagként, ne másolás-beillesztett kódként. A szabványos formátumú tokenek, például a W3C DTCG formátumban, minden csapat által használt kerethez létrehozhatók, így a React csapat és a Vue csapat továbbra is ugyanazokat a színeket, térközöket és mozgásokat használja.
CSS izolálása
Következetes megközelítéssel akadályozza meg a stílusok kiszivárgását a csapatok között: olyan elnevezési konvenciókkal, mint a BEM, a CSS Modules, a CSS-in-JS vagy a Shadow DOM webes összetevők esetében. Válasszon egy konvenciót az egész termékhez, és szöszölje be azt.
Frissítési szabályzat
Állapodjon meg arról, hogy egy csapat mekkora lemaradása lehet, például nem több, mint egy fő verzió, és használjon szemantikus verziószámítást, hogy a csapatok tudják, ha a változások megtörtek. Egy megosztott irányítópulton nyomon követheti, hogy az egyes mikro-frontendek melyik verzióját használják.
Elkapja a sodródást automatikusan
A kulcsképernyőkön végzett vizuális regressziós tesztek, a nyers szín- és térközértékeket tiltó szöszszabályok, valamint a megosztott felületeken (fejlécek, navigáció, fizetés) végzett tervezési áttekintések még azelőtt észlelik az inkonzisztenciákat, hogy a felhasználók látnák azokat.
Kulcs Principle, amit meg kell jegyezni
- A független telepítés valószínűsíti a felhasználói felület eltolódását
- Ossza meg a tokeneket és összetevőket verziószámú csomagként
- A CSS izolálása egyetlen következetes megközelítéssel
- Fogadjon el egy frissítési szabályzatot, és kövesse nyomon a verziókat
- Használjon vizuális regressziós teszteket és szöszszabályokat
Gyakran Ismételt Kérdések
Források
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org