Bileşen Kataloğu

Belirteç katmanı tamamlandığında sistemin değerleri adlandırılmış ve türetilebilir hâle gelmiş oluyor: bir rengin adı var, bir aralığın adımı var, bir temanın değerleri ilkel katmandan hesaplanıyor. Ancak bu değerleri kullanan şey bileşenlerdir ve bileşen katmanı belirteç katmanı gibi hesapla türetilemez. Kataloğa neyin gireceği, girenin ne kadar hazır olduğu ve kimin sahiplendiği ayrı kararlardır.

Bu ders üç soruyu ayırır. Bir bileşen katalogda durmayı hangi ölçütle hak eder? Katalogdaki bir bileşenin “hazır” olması ne demektir? Ve bir kataloğun sağlıklı olup olmadığı hangi sayıyla anlaşılır?

Katalog Nedir, Ne Değildir

Bileşen kataloğu, sistemin sunduğu bileşenlerin listesi değildir; her bileşen için kimin sahiplendiğini, hangi olgunluk düzeyinde olduğunu ve hangi sözleşmeyi verdiğini kayıt altına alan yapıdır. Bir depoda yirmi bileşen bulunması katalog olduğu anlamına gelmez. Katalog, listeye giriş ve çıkış kurallarıyla tanımlanır.

Bu ayrım pratik bir sonuç doğurur. Katalogsuz bir bileşen kütüphanesinde her bileşen eşit güvenilirlikte görünür: kullanan kişi, bir bileşenin altı ay sonra da aynı biçimde duracağını mı yoksa yarın adının değişeceğini mi bilemez. Katalog, bu belirsizliği bileşen başına bir düzey etiketine indirger.

Kapsam Ölçütü

Katalog büyümesinin doğal eğilimi, arayüzde görünen her şeyi içeri almaktır. Bu eğilim iki maliyet üretir: her bileşenin belgelenmesi, sürümlenmesi ve göç ettirilmesi gerekir; ve katalog büyüdükçe içinde arama yapmak zorlaşır.

Kapsama alma kararı üç soruya bağlanabilir:

• Yinelenme. Bileşen kaç ayrı yerde kullanılıyor? Tek yerde kullanılan bir şey kataloğa değil, kullanıldığı ürüne aittir.
• Sahiplik yayılımı. Kaç ayrı ekip kullanıyor? Tek ekibin kullandığı bir bileşen, o ekibin deposunda daha hızlı gelişir; kataloğa alındığında yalnızca inceleme yükü ekler.
• Karar taşıyıcılığı. Bileşen bir tasarım kararını taşıyor mu? “Ödünç al” düğmesi birincil eylem rengi kararını taşır; bir kayıt satırının sütun sırası taşımaz, o ürünün bilgi mimarisi kararıdır.

Bu üç sorunun ikisi sayıya çevrilebilir. Aşağıdaki program katalog arayüzünün sistemine ait yirmi iki bileşeni alır, olgunluk dağılımını çıkarır, her bileşenin bulunduğu düzeyin ölçütünü karşılayıp karşılamadığını denetler ve kapsam ölçütünün dışında kalanları listeler.

// katalog.mjs — bilesen katalogunun kapsam ve olgunluk denetimi

// Her kayit bir bilesenin katalogdaki durumunu tasir: olgunluk duzeyi, o duzeyin
// istedigi kanit alanlari, surum, kac yerde ve kac ekipte kullanildigi.
const KATALOG = [
  { ad: "dugme",              duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: true,  gocNotu: false, surum: "2.3.0", kullanim: 412, ekip: 6 },
  { ad: "baglanti",           duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: true,  gocNotu: false, surum: "1.4.2", kullanim: 268, ekip: 6 },
  { ad: "metin-alani",        duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: true,  gocNotu: false, surum: "2.0.1", kullanim: 143, ekip: 5 },
  { ad: "onay-kutusu",        duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: false, test: true,  erisim: true,  gocNotu: false, surum: "1.2.0", kullanim:  96, ekip: 5 },
  { ad: "radyo-grubu",        duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: false, gocNotu: false, surum: "1.1.0", kullanim:  34, ekip: 4 },
  { ad: "arama-alani",        duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: true,  gocNotu: false, surum: "1.6.0", kullanim:  71, ekip: 4 },
  { ad: "rozet",              duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: true,  gocNotu: false, surum: "1.0.3", kullanim: 188, ekip: 6 },
  { ad: "kart",               duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: true,  gocNotu: false, surum: "1.3.1", kullanim: 157, ekip: 6 },
  { ad: "kirinti-yolu",       duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: true,  gocNotu: false, surum: "1.0.0", kullanim:  29, ekip: 3 },
  { ad: "sayfalama",          duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: true,  gocNotu: false, surum: "1.2.4", kullanim:  41, ekip: 4 },
  { ad: "bildirim-seridi",    duzey: "kararli",  belge: true,  ornek: false, karsiOrnek: false, test: true,  erisim: true,  gocNotu: false, surum: "0.9.0", kullanim:  63, ekip: 5 },
  { ad: "bos-durum",          duzey: "kararli",  belge: true,  ornek: true,  karsiOrnek: true,  test: true,  erisim: true,  gocNotu: false, surum: "1.1.2", kullanim:  52, ekip: 5 },
  { ad: "iskelet",            duzey: "aday",     belge: true,  ornek: true,  karsiOrnek: false, test: true,  erisim: false, gocNotu: false, surum: "0.7.0", kullanim:  38, ekip: 3 },
  { ad: "sekmeler",           duzey: "aday",     belge: true,  ornek: true,  karsiOrnek: false, test: false, erisim: false, gocNotu: false, surum: "0.5.1", kullanim:  24, ekip: 3 },
  { ad: "acilir-liste",       duzey: "aday",     belge: false, ornek: true,  karsiOrnek: false, test: false, erisim: false, gocNotu: false, surum: "0.4.0", kullanim:  57, ekip: 4 },
  { ad: "akordeon",           duzey: "aday",     belge: true,  ornek: true,  karsiOrnek: false, test: false, erisim: false, gocNotu: false, surum: "0.3.2", kullanim:  17, ekip: 2 },
  { ad: "kip-pencere",        duzey: "aday",     belge: true,  ornek: false, karsiOrnek: false, test: true,  erisim: false, gocNotu: false, surum: "0.6.0", kullanim:  45, ekip: 5 },
  { ad: "arac-ipucu",         duzey: "deneysel", belge: false, ornek: false, karsiOrnek: false, test: false, erisim: false, gocNotu: false, surum: "0.1.0", kullanim:  12, ekip: 2 },
  { ad: "tablo",              duzey: "deneysel", belge: false, ornek: true,  karsiOrnek: false, test: false, erisim: false, gocNotu: false, surum: "0.2.1", kullanim:   9, ekip: 2 },
  { ad: "kayit-satiri",       duzey: "deneysel", belge: false, ornek: false, karsiOrnek: false, test: false, erisim: false, gocNotu: false, surum: "0.1.0", kullanim:   6, ekip: 1 },
  { ad: "suzgec-paneli",      duzey: "aday",     belge: true,  ornek: true,  karsiOrnek: false, test: false, erisim: false, gocNotu: false, surum: "0.3.0", kullanim:   4, ekip: 1 },
  { ad: "yukleme-gostergesi", duzey: "kaldirilan", belge: true, ornek: true, karsiOrnek: true,  test: true,  erisim: true,  gocNotu: true,  surum: "1.0.0", kullanim:  31, ekip: 4 },
];

// Her duzeyin cikis olcutu: o duzeyde durabilmek icin dolu olmasi gereken alanlar.
const OLCUT = {
  deneysel:   [],
  aday:       ["belge", "ornek"],
  kararli:    ["belge", "ornek", "karsiOrnek", "test", "erisim"],
  kaldirilan: ["belge", "gocNotu"],
};

// Kararli duzey ayrica 1.0.0 ve ustu bir surum ister.
const anaSurum = (s) => Number(s.split(".")[0]);

const DUZEYLER = ["deneysel", "aday", "kararli", "kaldirilan"];
const ETIKET = { deneysel: "deneysel", aday: "aday", kararli: "kararlı", kaldirilan: "kaldırılan" };

const toplamKullanim = KATALOG.reduce((t, b) => t + b.kullanim, 0);

console.log("olgunluk düzeyi   bileşen   kullanım   kullanım payı");
for (const d of DUZEYLER) {
  const grup = KATALOG.filter((b) => b.duzey === d);
  const k = grup.reduce((t, b) => t + b.kullanim, 0);
  console.log(
    `${ETIKET[d].padEnd(17)} ${String(grup.length).padStart(7)} ${String(k).padStart(10)} ` +
    `${((k / toplamKullanim) * 100).toFixed(1).padStart(13)}%`
  );
}
console.log(`${"toplam".padEnd(17)} ${String(KATALOG.length).padStart(7)} ${String(toplamKullanim).padStart(10)} ${"100.0".padStart(13)}%`);

// Duzeyinin olcutunu karsilamayan bilesenler.
console.log("\nbileşen             düzey       eksik ölçüt");
let ihlal = 0;
for (const b of KATALOG) {
  const eksik = OLCUT[b.duzey].filter((alan) => !b[alan]);
  if (b.duzey === "kararli" && anaSurum(b.surum) < 1) eksik.push(`surum<1.0.0 (${b.surum})`);
  if (eksik.length === 0) continue;
  ihlal++;
  console.log(`${b.ad.padEnd(19)} ${ETIKET[b.duzey].padEnd(11)} ${eksik.join(", ")}`);
}
console.log(`ölçütünü karşılamayan bileşen sayısı: ${ihlal}/${KATALOG.length}`);

// Kapsam olcutu: katalogda durmayi hak eden bilesen en az iki ekipte ve en az sekiz
// yerde kullanilir. Altinda kalan bilesen urune ozgudur, katalogda degil urunde durur.
const EKIP_ESIGI = 2;
const KULLANIM_ESIGI = 8;
console.log("\nkapsam ölçütü dışında kalanlar (ekip < 2 veya kullanım < 8)");
console.log("bileşen             ekip   kullanım");
for (const b of KATALOG) {
  if (b.ekip >= EKIP_ESIGI && b.kullanim >= KULLANIM_ESIGI) continue;
  console.log(`${b.ad.padEnd(19)} ${String(b.ekip).padStart(4)} ${String(b.kullanim).padStart(10)}`);
}

// Tek satirlik saglik gostergesi: kullanimin ne kadari kararli bilesenlere dusuyor.
const kararliKullanim = KATALOG.filter((b) => b.duzey === "kararli").reduce((t, b) => t + b.kullanim, 0);
const olcutuGecen = KATALOG.filter((b) => {
  const eksik = OLCUT[b.duzey].filter((alan) => !b[alan]);
  return eksik.length === 0 && !(b.duzey === "kararli" && anaSurum(b.surum) < 1);
});
const gecenKullanim = olcutuGecen.reduce((t, b) => t + b.kullanim, 0);
console.log(`\nkararlı düzeydeki kullanım payı        : ${((kararliKullanim / toplamKullanim) * 100).toFixed(1)}%`);
console.log(`ölçütünü karşılayan bileşenlerin payı  : ${((gecenKullanim / toplamKullanim) * 100).toFixed(1)}%`);

olgunluk düzeyi   bileşen   kullanım   kullanım payı
deneysel                3         27           1.5%
aday                    6        185          10.3%
kararlı                12       1554          86.5%
kaldırılan              1         31           1.7%
toplam                 22       1797         100.0%

bileşen             düzey       eksik ölçüt
onay-kutusu         kararlı     karsiOrnek
radyo-grubu         kararlı     erisim
bildirim-seridi     kararlı     ornek, karsiOrnek, surum<1.0.0 (0.9.0)
acilir-liste        aday        belge
kip-pencere         aday        ornek
ölçütünü karşılamayan bileşen sayısı: 5/22

kapsam ölçütü dışında kalanlar (ekip < 2 veya kullanım < 8)
bileşen             ekip   kullanım
kayit-satiri           1          6
suzgec-paneli          1          4

kararlı düzeydeki kullanım payı        : 86.5%
ölçütünü karşılayan bileşenlerin payı  : 83.6%

Olgunluk Düzeyleri

Çıktının ilk bloğu dört düzeyi gösteriyor ve düzeylerin anlamı, birbirinden ne kadar farklı söz verdiklerinden gelir:

• Deneysel. Sistem bu bileşenin biçiminin ve adının değişebileceğini söyler. Kullanan ekip, değişikliği kendi üstlenir. Belge zorunlu değildir; zorunlu olan tek şey bileşenin düzeyinin görünür olmasıdır.
• Aday. Biçim oturmuştur ama sözleşme henüz kilitlenmemiştir. Belge ve en az bir örnek gerekir; kırıcı değişiklik hâlâ olabilir, ama duyurulur.
• Kararlı. Sözleşme kilitlenmiştir. Kırıcı bir değişiklik ancak ana sürüm artışıyla ve göç yoluyla gelir. Bu söz, çıktıdaki beş kanıt alanına bağlanmıştır: belge, örnek, karşı örnek, test ve erişilebilirlik incelemesi.
• Kullanımdan kaldırılan. Bileşen artık kullanılmamalıdır ama hâlâ çalışır. Bu düzeyin ölçütü göç notudur: yerine ne kullanılacağı yazılı olmalıdır.

Düzeyler etiket olarak değil, çıkış ölçütü olarak tanımlanır. “Bu bileşen kararlı” demek, listedeki beş alanın dolu olduğunu iddia etmektir. Çıktının ikinci bloğu bu iddianın üç yerde tutmadığını gösteriyor. onay-kutusu karşı örneksiz, radyo-grubu erişilebilirlik incelemesi geçmemiş, bildirim-seridi ise üç ayrı eksikle kararlı sayılmış. Bu satırlar bir hata listesi değil, düzey düşürme veya eksik tamamlama iş listesidir; ölçüt olmadan bu liste hiç üretilemezdi.

Düzey geçişleri tek yönlü değildir. Bir bileşen kararlıyken erişilebilirlik incelemesinde kalırsa aday düzeye düşürülebilir. Düşürme, kırıcı değişiklikten farklı bir sinyaldir: bileşen hâlâ çalışır, ama sistemin verdiği kararlılık sözü geri çekilmiştir.

Kapsamın Dışında Kalanlar

Çıktının üçüncü bloğu kapsam ölçütünü işletiyor. kayit-satiri ve suzgec-paneli tek ekipte ve sekizden az yerde kullanılıyor. İkisi de katalog arayüzünün kendi parçalarıdır; sistemin bileşeni değil, ürünün bileşenidir.

Bu ayrım, sistemin ilk kurulduğu yerin ürün olmasından doğan bir karışıklığı çözer. Sistem, katalog arayüzünden doğduğu için ürünün her parçası doğal aday gibi görünür. Ancak kayit-satiri bir bibliyografik kaydın hangi alanlarını hangi sırayla gösterdiğine karar verir; bu karar başka bir üründe yeniden kullanılamaz. Buna karşılık o satırın içindeki rozet, düğme ve bağlantı yeniden kullanılabilir.

Eşiklerin kendisi bir karardır ve ölçeğe bağlıdır. İki ekipli bir kuruluşta “en az iki ekip” ölçütü hiçbir şeyi elemez; on ekipli bir kuruluşta üçe çekilebilir. Ölçütün değeri sayının kendisinde değil, kararın gerekçesinin yazılı olmasındadır.

Kataloğu Bileşen Sayısıyla Ölçmemek

Son iki satır, kataloğun sağlığını sayan iki göstergeyi veriyor. Kullanımın yüzde 86,5’i kararlı bileşenlere, yüzde 83,6’sı ise bulunduğu düzeyin ölçütünü gerçekten karşılayan bileşenlere düşüyor. Aradaki 2,9 puan, “kararlı” etiketinin karşılıksız kaldığı bölümdür.

Bu iki sayı, bileşen sayısından farklı bir şey söyler. Katalogdaki yirmi iki bileşenin üçü deneysel, ama deneysel bileşenlerin kullanımdaki payı yalnızca yüzde 1,5. Yani kataloğun olgunlaşmamış bölümü, arayüzün küçük bir bölümünü etkiliyor. Bileşen sayısıyla ölçen bir rapor “bileşenlerin yüzde 13,6’sı deneysel” derdi ve aynı katalog daha riskli görünürdü.

Ters durum da olabilir. acilir-liste belgesiz bir aday olmasına karşın 57 yerde kullanılıyor; tek başına deneysel bileşenlerin tümünden fazla. Kullanımla ağırlıklandırılan gösterge bu bileşeni öne çıkarır, sayı temelli gösterge ise onu diğer beş adayla eşitler. Kataloğun iş listesini sıralayan şey, kullanım ağırlığıdır.

Özet

• Bileşen kataloğu bir bileşen listesi değil, her bileşenin sahibini, olgunluk düzeyini ve sözleşmesini kayıt altına alan yapıdır.
• Kapsam kararı yinelenme, sahiplik yayılımı ve karar taşıyıcılığı sorularına bağlanır; ilk ikisi eşiklerle sayıya çevrilebilir ve ürüne özgü bileşenleri eler.
• Olgunluk düzeyleri etiket değil çıkış ölçütüdür: her düzey, dolu olması gereken kanıt alanlarıyla tanımlanır ve düzey iki yönde de değişebilir.
• Kataloğun sağlığı bileşen sayısıyla değil kullanım payıyla ölçülür; ağırlıksız sayım aynı kataloğu olduğundan daha riskli veya daha güvenli gösterir.
• Ölçütünü karşılamayan bileşenlerin listesi, kullanım ağırlığına göre sıralandığında doğrudan iş listesine dönüşür.

Sonraki Adım

Kapsam ve olgunluk kararları bir varsayıma dayanıyordu: bir bileşenden söz edildiğinde tasarımcının ve geliştiricinin aynı şeyi kastettiği varsayımına. Çıktıdaki acilir-liste satırının tasarım dosyasındaki karşılığının ne olduğu, arac-ipucu ile bir üründeki “ipucu balonu”nun aynı bileşen olup olmadığı bu tablodan okunamaz. Sonraki ders adlandırma sözleşmesini kurar: tasarım adlarıyla kod adları arasındaki eşlemeyi bir kurala bağlar, kuralı denetleyen bir betik yazar ve eşleşmeyen adları — hem tasarımda karşılığı olmayan bileşenleri hem de kodda karşılığı olmayan tasarım parçalarını — sayar.