Mikro Ön Uçlar ve Tasarım Sistemi Kayması: Ekipler Arasında Kullanıcı Arayüzü Tutarlılığını Korumak
Mikro ön uçları kullanan ekipler tek bir tutarlı kullanıcı arayüzünü nasıl korur: sürümlendirilmiş paketler olarak paylaşılan belirteçler ve bileşenler, CSS izolasyonu, yükseltme politikaları ve görsel regresyon kontrolleri.
Ana nokta
Mikro ön uçlar, ekiplerin bir ürünün parçalarını bağımsız olarak dağıtmasına olanak tanır; bu da kullanıcı arayüzünün kaymasını olası hale getirir: bileşenlerin farklı sürümleri, çakışan CSS ve yinelenen stiller. Tasarım belirteçlerini ve bileşenlerini sürümlendirilmiş paketler halinde paylaşarak, her ekibin CSS'ini izole ederek, yükseltme politikası üzerinde anlaşarak ve görsel regresyon testleriyle farklılıkları yakalayarak tutarlılığı koruyun.
Sürüklenme neden olur?
Martin Fowler'ın sitesi, mikro ön uçları, bağımsız dağıtımın önemli bir avantaj olduğu, daha büyük bir bütün halinde birleştirilmiş, bağımsız olarak teslim edilebilir ön uç uygulamaları olarak tanımlıyor. Aynı bağımsızlık sapmaya neden olur: Ekipler tasarım sistemini farklı zamanlarda yükseltir, daha hızlı hareket etmek için bileşenleri kopyalar ve sayfanın diğer bölümlerine sızan CSS yazar. Makale ayrıca bazı uygulamaların bağımlılıkları çoğalttığı ve küresel ve basamaklı olan CSS'in kasıtlı izolasyona ihtiyaç duyduğu konusunda da uyarıyor.
Sistemi paketler halinde paylaşın
Belirteçleri ve bileşenleri kopyalanıp yapıştırılan kodlar olarak değil, sürümlendirilmiş paketler olarak yayınlayın. W3C DTCG formatı gibi standart formattaki belirteçler, bir ekibin kullandığı her çerçeve için oluşturulabilir, böylece bir React ekibi ve bir Vue ekibi hala aynı renkleri, aralığı ve hareketi paylaşır.
CSS'i izole edin
Tutarlı bir yaklaşımla stillerin ekipler arasında sızmasını önleyin: web bileşenleri için BEM, CSS Modülleri, CSS-in-JS veya Shadow DOM gibi adlandırma kuralları. Ürünün tamamı için bir kural seçin ve bunun için tüy bırakın.
Bir yükseltme politikası
Bir ekibin ne kadar geride kalabileceği konusunda anlaşın, örneğin birden fazla ana sürüme izin vermeyin ve anlamsal sürüm oluşturmayı kullanarak ekiplerin değişikliklerin ne zaman bozulacağını bilmesini sağlayın. Paylaşılan bir kontrol panelinde her bir mikro ön ucun hangi sürümü kullandığını izleyin.
Drift'i otomatik olarak yakalayın
Ana ekranlardaki görsel regresyon testleri, ham renk ve aralık değerlerini yasaklayan tüy bırakmayan kurallar ve paylaşılan yüzeylerdeki (başlıklar, gezinme, ödeme) tasarım incelemeleri tutarsızlıkları kullanıcılar görmeden yakalar.
Hatırlanacak temel ilkeler
- Bağımsız dağıtım, kullanıcı arayüzünün kaymasını muhtemel hale getirir
- Belirteçleri ve bileşenleri sürümlendirilmiş paketler olarak paylaşın
- Tek bir tutarlı yaklaşımla CSS'i izole edin
- Bir yükseltme politikası üzerinde anlaşın ve sürümleri takip edin
- Görsel regresyon testlerini ve tüy bırakmayan kuralları kullanın
Sık sorulan sorular
Kaynaklar
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org