Primer Design System, GitHub’daki düğme, banner ve breadcrumb gibi deneyimlerin temel bileşenlerini sağlıyor. Bu bileşenlerin farklı senaryolarda erişilebilir, esnek ve yüksek performanslı olması gerekiyor.
2023’te bazı sayfalardaki bileşen sayısı hızla arttı ve mevcut CSS-in-JS çözümünde şu sorunlar ortaya çıktı:
- Stiller istemcide başlatıldığı için ilk sayfa yüklemeleri uzadı.
- Stil toplama işleminin istemciden uzaklaşması, sunucu tarafı oluşturma performansını düşürdü.
- Sayfadaki bileşen sayısı arttıkça stil güncellemeleri kontrolden çıktı.
Primer ekibi, istemci ve sunucu maliyetlerini ortadan kaldıracak ve geçiş sırasında GitHub’da kırılmalara yol açmayacak bir çözüm aradı. CSS Modules, yerel CSS özelliklerinin kullanılmasını ve CSS-in-JS’den beklenen belirli kapsülleme düzeyini korumayı sağladı. Stiller, JavaScript kaynağının yanında bulunan CSS dosyalarında yazılacak; sınıf adları varsayılan olarak yerel olacak ve istemci ya da sunucu çalışma zamanı gerekmeyecekti. Stiller bunun yerine HTML’le gönderilen CSS dosyalarında birleştirilecekti.
Geçiş için her bileşende şu adımlar izlendi:
- Mevcut stilleri CSS Modules’a çeviren yeni dosya eklendi.
- Eski ve yeni stiller arasında seçim yapan özellik bayrağı kullanıldı.
- Görsel regresyon testleriyle ekran görüntülerinin aynı olduğu doğrulandı.
- Bayrak ekip, GitHub çalışanları ve ardından tüm kullanıcılar için kademeli açıldı.
Bu süreç erken geri bildirim sağladı. Aralık 2024’te Primer’daki tüm bileşenler CSS Modules’a taşındı.
Neden önemli
Bu değişiklik, bileşen sayısı büyüyen arayüzlerde stil yönetiminin yalnızca geliştirici deneyimini değil, sayfa yüklenmesini ve sunucu tarafındaki işlem maliyetlerini de etkilediğini gösteriyor. Stillerin çalışma zamanı yerine HTML ile gönderilen dosyalarda birleştirilmesi, istemci ve sunucu tarafında ek yük oluşturan işlemlerin azaltılmasını hedefliyor. Geçişin özellik bayrakları ve görsel regresyon testleriyle parçalara ayrılması, geniş kullanılan tasarım sistemlerinde teknik değişikliklerin kullanıcıya yansıyan kırılmalar yaratmadan denenebilmesi açısından önem taşıyor. Erken geri bildirim alınması da sorunun yalnızca kod düzeyinde değil, ekiplerin ve kullanıcıların karşılaştığı ekranlar üzerinden izlenmesini sağladı. Bununla birlikte, haber bu yaklaşımın Primer dışındaki tasarım sistemlerinde nasıl sonuç vereceğine ilişkin bir değerlendirme sunmuyor.