--- title: 'Bileşen Kataloğu' source: 'https://academia.sh/tr/kurslar/tasarim-sistemleri/bilesen-katalogu' course: 'Tasarım Sistemleri' language: tr updated: '2026-08-17T18:09:34+00:00' license: 'CC BY-SA 4.0' --- # Bileşen Kataloğu Bir bileşenin katalogda durmayı hak edip etmediğini belirleyen kapsam ölçütü, olgunluk düzeylerinin çıkış koşulları ve kataloğun sağlığını kullanım payına bağlayan denetim. 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. ```js // 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.