Micro-Frontends ja Design System Drift: Pidä käyttöliittymä johdonmukaisena eri tiimeissä
Kuinka mikrokäyttöliittymää käyttävät tiimit pitävät yhtenäisen käyttöliittymän: jaetut tunnukset ja komponentit versioiduina paketteina, CSS-eristys, päivityskäytännöt ja visuaaliset regressiotarkistukset.
Core Takeaway
Mikrokäyttöliittymät antavat tiimille mahdollisuuden ottaa tuotteen osia käyttöön itsenäisesti, mikä tekee käyttöliittymän ajautumisesta todennäköiseksi: komponenttien eri versiot, ristiriitaiset CSS ja päällekkäiset tyylit. Säilytä johdonmukaisuus jakamalla suunnittelutunnukset ja komponentit versioiduina paketteina, eristämällä kunkin tiimin CSS, sopimalla päivityskäytännöstä ja havaitsemalla erot visuaalisilla regressiotesteillä.
Miksi driftiä tapahtuu
Martin Fowlerin sivusto kuvailee mikrokäyttöliittymät itsenäisesti toimitettaviksi käyttöliittymäsovelluksiksi, jotka on muodostettu suuremmaksi kokonaisuudeksi, ja riippumaton käyttöönotto on keskeinen etu. Sama riippumattomuus aiheuttaa ajautumista: tiimit päivittävät suunnittelujärjestelmää eri aikoina, kopioivat komponentteja liikkuakseen nopeammin ja kirjoittavat CSS, joka vuotaa sivun muihin osiin. Artikkeli varoittaa myös siitä, että jotkut toteutukset toistavat riippuvuuksia ja että CSS, koska se on globaali ja peräkkäinen, tarvitsee tarkoituksellisen eristämisen.
Jaa järjestelmä paketteina
Julkaise tunnukset ja komponentit versioiduina paketteina, ei kopioi-liitettynä koodina. Vakiomuodossa olevia tunnuksia, kuten W3C DTCG -muotoa, voidaan rakentaa jokaiselle tiimin käyttämälle kehykselle, joten React-tiimillä ja Vue-tiimillä on edelleen samat värit, välit ja liike.
Eristä CSS
Estä tyylien vuotaminen tiimien välillä johdonmukaisella lähestymistavalla: nimeämiskäytännöt, kuten BEM, CSS-moduulit, CSS-in-JS tai Shadow DOM verkkokomponenteille. Valitse yksi käytäntö koko tuotteelle ja nukkaa sitä varten.
Päivityskäytäntö
Sovi siitä, kuinka paljon jäljessä tiimi voi jäädä, esimerkiksi enintään yksi pääversio, ja käytä semanttista versiointia, jotta tiimit tietävät, milloin muutokset ovat murtumassa. Seuraa, mitä versiota kukin mikrokäyttöliittymä käyttää jaetussa hallintapaneelissa.
Ota kiinni ajautuminen automaattisesti
Visuaaliset regressiotestit avainnäytöillä, nukkasäännöt, jotka kieltävät raakoja väri- ja väliarvot, ja suunnittelutarkistukset jaetuilla pinnoilla (otsikot, navigointi, kassa) havaitsevat epäjohdonmukaisuudet ennen kuin käyttäjät näkevät ne.
Avain Principles muistettavat
- Riippumaton käyttöönotto tekee käyttöliittymän ajautumisesta todennäköiseksi
- Jaa tunnukset ja komponentit versioituina paketteina
- Eristä CSS yhdellä johdonmukaisella lähestymistavalla
- Hyväksy päivityskäytäntö ja seuraa versioita
- Käytä visuaalisia regressiotestejä ja nukkasääntöjä
Usein kysytyt kysymykset
Lähteet
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org