Micro-Frontends dan Pergeseran Sistem Desain: Menjaga Konsisten UI di Seluruh Tim
Bagaimana tim yang menggunakan mikro-frontend mempertahankan satu UI yang konsisten: token dan komponen bersama sebagai paket berversi, isolasi CSS, kebijakan pemutakhiran, dan pemeriksaan regresi visual.
Pengambilan Inti
Micro-frontend memungkinkan tim menerapkan bagian-bagian produk secara mandiri, sehingga kemungkinan terjadinya penyimpangan UI: versi komponen yang berbeda, CSS yang saling bertentangan, dan gaya duplikat. Jaga konsistensi dengan berbagi token desain dan komponen sebagai paket berversi, mengisolasi CSS masing-masing tim, menyetujui kebijakan peningkatan, dan mengetahui perbedaan dengan pengujian regresi visual.
Mengapa penyimpangan terjadi
Situs Martin Fowler mendeskripsikan mikro-frontend sebagai aplikasi frontend yang dapat dikirimkan secara independen dan disusun menjadi satu kesatuan yang lebih besar, dengan penerapan independen sebagai manfaat utamanya. Independensi yang sama menyebabkan penyimpangan: tim meningkatkan sistem desain pada waktu yang berbeda, menyalin komponen agar bergerak lebih cepat, dan menulis CSS yang bocor ke bagian lain halaman. Artikel ini juga memperingatkan bahwa beberapa implementasi menduplikasi dependensi dan bahwa CSS, karena bersifat global dan berjenjang, memerlukan isolasi yang disengaja.
Bagikan sistem sebagai paket
Publikasikan token dan komponen sebagai paket berversi, bukan kode salin-tempel. Token dalam format standar, seperti format W3C DTCG, dapat dibuat untuk setiap kerangka kerja yang digunakan tim, sehingga tim React dan tim Vue tetap berbagi warna, jarak, dan gerakan yang sama.
Isolasi CSS
Cegah kebocoran gaya antar tim dengan pendekatan yang konsisten: konvensi penamaan seperti BEM, Modul CSS, CSS-in-JS, atau Shadow DOM untuk komponen web. Pilih satu konvensi untuk keseluruhan produk dan serat untuk itu.
Kebijakan peningkatan
Sepakati seberapa jauh ketertinggalan suatu tim, misalnya tidak lebih dari satu versi utama, dan gunakan versi semantik sehingga tim mengetahui kapan perubahan dapat terjadi. Lacak versi mana yang digunakan setiap mikro-frontend di dasbor bersama.
Tangkap arus secara otomatis
Pengujian regresi visual pada layar utama, aturan lint yang melarang nilai warna dan spasi mentah, serta tinjauan desain pada platform bersama (header, navigasi, checkout) mendeteksi ketidakkonsistenan sebelum pengguna melihatnya.
Kunci Principles untuk Diingat
- Penerapan independen membuat UI mungkin menyimpang
- Bagikan token dan komponen sebagai paket berversi
- Pisahkan CSS dengan satu pendekatan yang konsisten
- Setujui kebijakan peningkatan dan lacak versi
- Gunakan uji regresi visual dan aturan lint
Pertanyaan yang Sering Diajukan
Sumber
- Micro Frontends — marinfowler.com
- Design Tokens Community Group — desaintokens.org
- Semantic Versioning 2.0.0 — semver.org