Mikro-frontendy i zmiany w systemie projektowym: utrzymanie spójności interfejsu użytkownika w zespołach
Jak zespoły korzystające z mikrofrontendów utrzymują jeden spójny interfejs użytkownika: współdzielone tokeny i komponenty w postaci pakietów wersjonowanych, izolacja CSS, zasady aktualizacji i kontrole regresji wizualnej.
Rdzeń na wynos
Mikrofrontendy pozwalają zespołom na niezależne wdrażanie części produktu, co zwiększa ryzyko dryfowania interfejsu użytkownika: różne wersje komponentów, sprzeczne CSS i zduplikowane style. Zachowaj spójność, udostępniając tokeny projektowe i komponenty w postaci wersjonowanych pakietów, izolując CSS każdego zespołu, uzgadniając zasady aktualizacji i wychwytując różnice za pomocą testów regresji wizualnej.
Dlaczego zdarza się dryf
Witryna Martina Fowlera opisuje mikrofrontendy jako niezależnie dostarczane aplikacje frontendowe złożone w większą całość, których kluczową korzyścią jest niezależne wdrażanie. Ta sama niezależność powoduje dryf: zespoły aktualizują system projektowy w różnym czasie, kopiują komponenty, aby działać szybciej i zapisują CSS, który wycieka do innych części strony. Artykuł ostrzega również, że niektóre implementacje powielają zależności i że CSS, będąc globalnym i kaskadowym, wymaga celowej izolacji.
Udostępnij system jako pakiety
Publikuj tokeny i komponenty jako pakiety z wersjonowaniem, a nie w formie kopiowanego i wklejanego kodu. Tokeny w standardowym formacie, takim jak format W3C DTCG, można zbudować dla każdego frameworka używanego przez zespół, więc zespoły React i Vue nadal mają te same kolory, odstępy i ruch.
Odizoluj CSS
Zapobiegaj wyciekaniu stylów pomiędzy zespołami, stosując spójne podejście: konwencje nazewnictwa, takie jak BEM, moduły CSS, CSS-in-JS lub Shadow DOM dla komponentów internetowych. Wybierz jedną konwencję dla całego produktu i dla niego kłaczki.
Polityka aktualizacji
Uzgodnij, jak daleko zespół może pozostać w tyle, na przykład nie więcej niż jedna wersja główna, i użyj wersjonowania semantycznego, aby zespoły wiedziały, kiedy zmiany są nieskuteczne. Śledź wersję używaną przez każdy mikro-frontend na wspólnym panelu kontrolnym.
Złap dryf automatycznie
Testy regresji wizualnej na kluczowych ekranach, reguły lint zabraniające nieprzetworzonych wartości kolorów i odstępów oraz recenzje projektów na wspólnych powierzchniach (nagłówki, nawigacja, kasa) wyłapują niespójności, zanim użytkownicy je zobaczą.
Klucz Principles do zapamiętania
- Niezależne wdrożenie zwiększa ryzyko dryfowania interfejsu użytkownika
- Udostępniaj tokeny i komponenty jako pakiety z wersjonowaniem
- Wyodrębnij CSS, stosując jedno spójne podejście
- Uzgodnij zasady aktualizacji i śledź wersje
- Użyj testów regresji wizualnej i reguł lint
Często zadawane pytania
Źródła
- Micro Frontends — martininfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org