Web arayüz gelistirmede bilesen tabanli yaklaşım, kullanıcı arayuzunu bagimsiz, test edilebilir ve tekrar kullanılabilir parcalara ayirma felsefesidir. React, Vue, Svelte veya vanilla Web Components fark etmeksizin, iyi tasarlanmis bir bilesen katmanı ekip hizini artirir, regresyon riskini dusurur ve tasarım tutarliligini korur. Ancak bilesen yazmak tek basina mimari degildir; asil mesele bilesenlerin sinirlarini, sorumluluklarini ve iletişim sozlesmelerini nasil tanimladiginizdir.
Bilesen nedir ve ne degildir?
Bir bilesen, belirli bir UI parcasini temsil eden kapali bir birimdir: props veya attribute alir, DOM üretir, olay yayar. Button, Modal, DataTable gibi yapilar bilesendir; ancak tek bir sayfanin tüm mantigini tasiyan devasa DashboardPage genellikle bilesen degil, modül veya view katmanidir. Sınır cizgisini doğru cizmek icin tek soru yeterlidir: Bu parça baska bir baglamda anlamli şekilde yeniden kullanılabilir mi? Cevap hayir ise, bileseni daha küçük parcalara bolmek gerekir.
Bilesen tabanli mimaride en sik hata, gorunumu is mantigiyla karistirmaktir. Sunum bileseni yalnizca veriyi gösterir; veri cekme, cache, yetkilendirme gibi isler ust katmanlarda kalir. Bu ayrim sayesinde Storybook veya benzeri araclarda bilesenler izole test edilebilir ve tasarım sistemi bagimsiz evrilir. Sunum katmanı ile veri katmanini ayirmak, özellikle buyuyen ekiplerde code review surecini hizlandirir cunku her PR'in etki alani netlesir.
Atomic Design ve pratik sınırlar
Brad Frost'un Atomic Design modeli atom, molekul, organizma, şablon ve sayfa katmanlarini tanimlar. Teoride güçlü bir cerceve sunsa da uretimde katman isimlerine takilmak yerine sorumluluk alani önemlidir. Atom seviyesindeki bir Icon bileseni, boyut ve erisilebilirlik props'lari tasir; molekul seviyesindeki SearchField input, ikon ve temizleme dugmesini birlestirir.
- Atom: Tek işlev, minimum bağımlılık, geniş yeniden kullanım.
- Molekul: Birkaç atomun anlamli birlesimi, belirli bir UX amaci.
- Organizma: Sayfa bolgesi; layout ve içerik akisini yönetir.
- Şablon: Organizmalarin yerlesimini tanimlar, gerçek veri icermez.
Pratik kural: bir bilesen dosyasi 200 satiri gectiyse ve birden fazla bagimsiz sorumluluk tasiyorsa parcalama zamanidir. Bu esik proje buyuklugune gore degisebilir ancak kod review'da güvenilir bir sinyaldir. Katman isimlerini zorla uygulamak yerine ekip sozlugunde ortak bir dil oluşturmak daha degerlidir.
Props, slot ve composition
Bilesenler arasi iletişim uc temel yolla kurulur: props, slot ve context. Props açık sözleşme sağlar; TypeScript veya JSDoc ile belgelenmelidir. Slot veya children pattern'i esneklik verir: Card bileseni baslik, govde ve aksiyon alanlarini tuketiciye birakabilir. Context ise derin prop drilling'den kacinmak icin temalar, dil veya yetki gibi cross-cutting degerler icin kullanılır.
Composition over inheritance ilkesi web bilesenlerinde kritiktir. Kalitim yerine küçük bilesenleri birlestirmek, varyasyonlari variant prop'lari ile yönetmek daha surdurulebilirdir. Polymorphic bilesenlerde as prop'u semantik HTML korur: bir Button gerektiginde anchor veya Link olarak render edilebilir.
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
onClick?: () => void;
children: React.ReactNode;
}Durum yönetimi ve bilesen sınırları
Yerel UI durumu bilesen icinde kalmalidir: açık veya kapali modal, hover durumu, geçici form girdisi. Paylasilan durum ust katmana cikar: global store, server state kutuphanesi veya URL parametreleri. React Query, SWR veya TanStack Query gibi araclar sunucu durumunu bilesenlerden ayirir ve cache invalidation politikasini merkezi yönetir.
Controlled ve uncontrolled bilesen ayrimi form elemanlarinda önemlidir. Controlled input dis kaynaktan deger alir; uncontrolled input DOM'u tek kaynak kabul eder. Karma model regresyon üretir. Ayni prensip accordion, tabs ve combobox gibi widget'larda da gecerlidir: açık durum ya tamamen disaridan kontrol edilir ya da bilesen icinde kalir.
Server state ile UI state ayrimi
Sunucudan gelen veri ile arayüz durumunu karistirmak en yaygın mimari hatadir. Örneğin sepet listesi sunucu state'idir; açık veya kapali odeme ozeti paneli UI state'idir. Ikisini ayni store'da tutmak gereksiz re-render ve stale data riski dogurur. Optimistic update senaryolarinda UI state geçici olarak sunucu cevabini onceden gösterir; rollback mekanizmasi tanimlanmazsa kullanıcı guveni zedelenir.
Tasarım sistemi entegrasyonu
Bilesen tabanli mimari, tasarım sistemi ile birlikte deger üretir. Token tabanli renkler, tipografi olcekleri ve spacing birimleri bilesen API'sinin altinda kalir; tuketiciler ham hex kodu gormez. Figma'daki bilesen isimleri ile kod bilesen isimlerinin eslesmesi ekip iletisimini hizlandirir ve handoff surecindeki belirsizligi azaltir.
Storybook veya Ladle gibi araclarla her bilesenin tüm varyantlari görsel regresyon testlerine tabi tutulabilir. Chromatic veya Percy entegrasyonu, istemeden bozulan padding veya renk degisikliklerini erken yakalar. Dokumantasyon sayfalarinda kullanım ornekleri, erisilebilirlik notlari ve bilinen sinirlamalar bir arada sunulmalidir.
Performans ve render maliyeti
Her bilesen potansiyel bir render maliyetidir. Gereksiz yeniden cizimleri onlemek icin memoization, lazy loading ve listelerde sanal scroll kullanılır. Büyük listelerde her satir ayri bilesen olabilir ancak key prop'u stabil tutulmali ve satir bileseni gereksiz global store aboneliklerinden arindirilmalidir.
Code splitting ile sayfa bazli veya bilesen bazli chunk'lar oluşturulur. Agir bir grafik bileseni yalnizca görünür oldugunda yuklenir. Bundle analiz araclari hangi bilesenlerin en cok agirlik kattigini gösterir. React Server Components gibi modellerde sunucu bilesenleri istemci bundle'ina hic girmeyebilir; bu karar bilesen sınır taniminda baslar.
Test stratejisi
Bilesen testleri uc seviyede dusunulur: birim test, entegrasyon test ve erisilebilirlik test. Testing Library felsefesi kullanıcının gordugu şekilde test etmeyi onerir: rol, etiket ve metin uzerinden sorgu. Snapshot testleri dikkatli kullanılmalıdır; davranissal assertion tercih edilir.
Erisilebilirlik testleri axe-core veya jest-axe ile otomatiklestirilebilir. Klavye navigasyonu ve focus yönetimi manuel test listesine eklenmelidir. Bilesen kutuphanesinde her yeni variant icin en az bir happy path ve bir edge case testi yazmak regresyon maliyetini dusurur.
Monorepo ve paketleme
Birden fazla uygulama ayni bilesen kutuphanesini paylasiyorsa monorepo veya ayri npm paketi modeli secilir. Monorepo'da Turborepo veya Nx ile build cache hiz kazandirir. Ayri pakette semver disiplini sarttir: breaking prop degisikligi major sürüm gerektirir.
Tree-shaking uyumlu export yapisi kritiktir: barrel file'lar bazen tüm kutuphaneyi bundle'a sokar. Side-effect-free paket tanimi ve ESM onceligi modern bundler'larda performans kazanci sağlar. Ic tüketim icin workspace protokolu, dis dagitim icin ayri changelog ve migration rehberi gerekir.
Yaygın anti-kaliplar
- God component: Tek dosyada yuzlerce satir, test edilemez.
- Prop drilling: On katman boyunca ayni prop'un iletilmesi.
- Stil sizintisi: Global CSS'in bilesen sinirlarini delmesi.
- Erken soyutlama: Iki kullanım icin generic bilesen yazmak.
- Implicit API: Belgelenmemis props veya gizli bağımlılıklar.
Bu anti-kaliplar code review checklist'ine eklendiginde mimari bozulma yavaslar. Bilesen kutuphanesinin olgunlugunu olcmek icin test kapsam orani, Storybook kapsam yuzdesi ve production kullanım sayisi izlenebilir. Metrikler tek basina yeterli degildir; geliştirici geri bildirimi ve entegrasyon suresi de kalite gostergesidir.
Ölçeklenebilir ekip calismasi
Buyuyen ekiplerde bilesen sahipligi netlesmelidir: her domain bileseni icin bir maintainer, RFC süreci ile breaking değişiklikler. Feature flag ile yeni bilesen versiyonlari kademeli acilir. Design-dev parity icin haftalik sync ve Figma token senkronizasyonu otomatiklestirilebilir.
Sonuç olarak bilesen tabanli UI mimarisi tekrarlanabilir kararlar setidir: net sınırlar, açık sozlesmeler, tasarım sistemi ile uyum ve ölçülebilir kalite. Framework seçimi degistiginde bile bu ilkeler gecerliligini korur; bilesen dusuncesi uzun vadeli bakım maliyetini dusuren temel yatirimdir.
