{"id":31492,"date":"2025-10-10T14:31:19","date_gmt":"2025-10-10T11:31:19","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/2025te-bilesen-odakli-gelistirme-ile-ui-olceklendirme-rehberi\/"},"modified":"2025-10-10T14:31:19","modified_gmt":"2025-10-10T11:31:19","slug":"2025te-bilesen-odakli-gelistirme-ile-ui-olceklendirme-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/2025te-bilesen-odakli-gelistirme-ile-ui-olceklendirme-rehberi\/","title":{"rendered":"2025’te Bile\u015fen Odakl\u0131 Geli\u015ftirme ile UI \u00d6l\u00e7eklendirme Rehberi"},"content":{"rendered":"

<\/p>\n

Kullan\u0131c\u0131 aray\u00fczlerinin (UI) s\u00fcrekli b\u00fcy\u00fcd\u00fc\u011f\u00fc ve karma\u015f\u0131kla\u015ft\u0131\u011f\u0131 g\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda, geli\u015ftiricilerin en b\u00fcy\u00fck meydan okumalar\u0131ndan biri \u00f6l\u00e7eklenebilirliktir. Bu makalede, 2025 ve \u00f6tesinde UI geli\u015ftirme s\u00fcre\u00e7lerinizi radikal bir \u015fekilde d\u00f6n\u00fc\u015ft\u00fcrecek, Bile\u015fen Odakl\u0131 Geli\u015ftirme (Component-Driven Development – CDD) yakla\u015f\u0131m\u0131n\u0131 derinlemesine inceleyece\u011fiz. CDD ile projelerinizde tutarl\u0131l\u0131\u011f\u0131, yeniden kullan\u0131labilirli\u011fi ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 nas\u0131l sa\u011flayabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedeceksiniz.<\/p>\n

Modern web uygulamalar\u0131, g\u00fcn ge\u00e7tik\u00e7e daha fazla \u00f6zellik ve karma\u015f\u0131k etkile\u015fimle dolup ta\u015f\u0131yor. Bir e-ticaret sitesinin \u00fcr\u00fcn sayfalar\u0131n\u0131, bir bankac\u0131l\u0131k uygulamas\u0131n\u0131n i\u015flem ekranlar\u0131n\u0131 veya bir sosyal medya platformunun ak\u0131\u015f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn. Her biri, y\u00fczlerce farkl\u0131 bile\u015fenin uyumlu bir \u015fekilde bir araya gelmesiyle olu\u015fan devasa yap\u0131lard\u0131r. Ancak, bu b\u00fcy\u00fcme beraberinde ciddi \u00f6l\u00e7eklenebilirlik sorunlar\u0131n\u0131 da getirir. \u00d6zellikle b\u00fcy\u00fck ve b\u00fcy\u00fcyen bir ekipte \u00e7al\u0131\u015f\u0131rken, UI’\u0131 tutarl\u0131 bir \u015fekilde geli\u015ftirmek, s\u00fcrd\u00fcrmek ve geni\u015fletmek adeta bir labirentte yolculuk yapmaya benzer.<\/p>\n

Geleneksel geli\u015ftirme yakla\u015f\u0131mlar\u0131nda, UI elemanlar\u0131 genellikle sayfa baz\u0131nda d\u00fc\u015f\u00fcn\u00fcl\u00fcr ve kod tekrarlar\u0131 ka\u00e7\u0131n\u0131lmaz hale gelir. \u00d6rne\u011fin, bir butonu her kullanmak istedi\u011finizde, ona \u00f6zg\u00fc CSS stillerini ve JavaScript davran\u0131\u015flar\u0131n\u0131 yeniden yazma veya kopyalama e\u011filimi ortaya \u00e7\u0131kar. Bu durum, zamanla kod taban\u0131n\u0131n \u015fi\u015fmesine, hatalar\u0131n artmas\u0131na ve yeni \u00f6zellik eklemenin yava\u015flamas\u0131na neden olur. Farkl\u0131 geli\u015ftiricilerin ayn\u0131 eleman\u0131n farkl\u0131 versiyonlar\u0131n\u0131 olu\u015fturmas\u0131yla tutarl\u0131l\u0131k sorunlar\u0131 ba\u015f g\u00f6sterir; bu da k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine ve marka imaj\u0131 tutars\u0131zl\u0131klar\u0131na yol a\u00e7ar.<\/p>\n

Bak\u0131m kolayl\u0131\u011f\u0131 da \u00f6l\u00e7eklendirme s\u00fcrecindeki \u00f6nemli engellerden biridir. K\u00fc\u00e7\u00fck bir de\u011fi\u015fiklik, uygulaman\u0131n farkl\u0131 yerlerinde beklenmedik yan etkilere yol a\u00e7abilir. Bu durum, “ke\u015fke o kodu hi\u00e7 ellemeseydim” anlar\u0131na ve geli\u015ftiricilerin korkulu r\u00fcyalar\u0131na sebep olur. Test s\u00fcre\u00e7leri de bu karma\u015f\u0131kl\u0131kta zorla\u015f\u0131r; her yeni \u00f6zellik veya de\u011fi\u015fiklik, mevcut i\u015flevselli\u011fi bozup bozmad\u0131\u011f\u0131n\u0131 anlamak i\u00e7in kapsaml\u0131 manuel veya otomatik testler gerektirir. \u00d6zetle, UI’\u0131 \u00f6l\u00e7eklendirmek, sadece daha fazla kod yazmak de\u011fil, ayn\u0131 zamanda bu kodu y\u00f6netilebilir, tutarl\u0131 ve s\u00fcrd\u00fcr\u00fclebilir k\u0131lmakla ilgilidir. \u0130\u015fte tam da bu noktada, Bile\u015fen Odakl\u0131 Geli\u015ftirme (CDD) devreye girer ve bu zorluklara modern ve etkili \u00e7\u00f6z\u00fcmler sunar.<\/p>\n

Bile\u015fen Odakl\u0131 Geli\u015ftirme (CDD) Nedir ve Temel Prensipleri Nelerdir?<\/h2>\n

Bile\u015fen Odakl\u0131 Geli\u015ftirme (CDD), kullan\u0131c\u0131 aray\u00fczlerini, ba\u011f\u0131ms\u0131z, yeniden kullan\u0131labilir ve izole edilmi\u015f par\u00e7alara, yani “bile\u015fenlere” ay\u0131rma felsefesidir. T\u0131pk\u0131 bir Legoland yap\u0131s\u0131 gibi; her bir Lego par\u00e7as\u0131 kendi ba\u015f\u0131na bir anlam ta\u015f\u0131r, ancak bir araya geldiklerinde \u00e7ok daha b\u00fcy\u00fck ve karma\u015f\u0131k yap\u0131lar olu\u015fturabilirler. CDD’nin temel amac\u0131, bu par\u00e7alar\u0131 ayr\u0131 ayr\u0131 geli\u015ftirmek, test etmek ve y\u00f6netmektir, b\u00f6ylece b\u00fcy\u00fck bir uygulaman\u0131n in\u015fas\u0131 \u00e7ok daha d\u00fczenli ve verimli hale gelir.<\/p>\n

Bu yakla\u015f\u0131m, modern frontend \u00e7er\u00e7evelerinin (React, Vue, Angular gibi) ortaya \u00e7\u0131k\u0131\u015f\u0131yla pop\u00fclerle\u015fmi\u015f ve g\u00fcn\u00fcm\u00fczde end\u00fcstri standard\u0131 haline gelmi\u015ftir. CDD’nin \u00f6z\u00fcnde, her bile\u015fenin belirli bir UI par\u00e7as\u0131n\u0131 temsil etmesi yatar; bu bir buton, bir kart, bir form alan\u0131 veya bir navigasyon men\u00fcs\u00fc olabilir. Her bile\u015fen kendi mant\u0131\u011f\u0131na, stilizasyonuna ve verisine sahip olup, d\u0131\u015f d\u00fcnyadan m\u00fcmk\u00fcn oldu\u011funca ba\u011f\u0131ms\u0131zd\u0131r. Bu izolasyon, bir bile\u015fende yap\u0131lan de\u011fi\u015fikli\u011fin uygulaman\u0131n di\u011fer k\u0131s\u0131mlar\u0131n\u0131 beklenmedik \u015fekilde etkileme riskini minimize eder.<\/p>\n

CDD’nin temel prensipleri birka\u00e7 ana ba\u015fl\u0131k alt\u0131nda toplanabilir:<\/p>\n

    \n
  1. Mod\u00fclerlik ve \u0130zolasyon:<\/strong> Her bile\u015fen kendi ba\u015f\u0131na \u00e7al\u0131\u015fabilen, ba\u011f\u0131ms\u0131z bir birimdir. Bu sayede, geli\u015ftiriciler belirli bir bile\u015fen \u00fczerinde \u00e7al\u0131\u015f\u0131rken, uygulaman\u0131n geri kalan\u0131yla ilgili endi\u015fe duymak zorunda kalmazlar. Bu, daha h\u0131zl\u0131 geli\u015ftirme, daha az hata ve daha kolay hata ay\u0131klama anlam\u0131na gelir.<\/li>\n
  2. Yeniden Kullan\u0131labilirlik:<\/strong> Bir kez olu\u015fturulan bir bile\u015fen, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde veya hatta farkl\u0131 projelerde kolayca kullan\u0131labilir. Bu, kod tekrar\u0131n\u0131 azalt\u0131r, geli\u015ftirme s\u00fcresini k\u0131salt\u0131r ve UI genelinde tutarl\u0131l\u0131\u011f\u0131 art\u0131r\u0131r. \u00d6rne\u011fin, bir “Kaydet” butonu, uygulaman\u0131n bir\u00e7ok farkl\u0131 noktas\u0131nda ayn\u0131 g\u00f6r\u00fcn\u00fcm ve davran\u0131\u015fla kullan\u0131labilir.<\/li>\n
  3. Tutarl\u0131l\u0131k:<\/strong> Bile\u015fen k\u00fct\u00fcphaneleri ve tasar\u0131m sistemleri sayesinde, t\u00fcm uygulaman\u0131n g\u00f6rsel ve i\u015flevsel tutarl\u0131l\u0131\u011f\u0131 sa\u011flan\u0131r. Tasar\u0131mc\u0131lar ve geli\u015ftiriciler, ortak bir dil ve referans noktas\u0131 \u00fczerinde anla\u015farak, marka kimli\u011fine uygun ve kullan\u0131c\u0131 dostu aray\u00fczler olu\u015fturabilirler.<\/li>\n
  4. Test Edilebilirlik:<\/strong> Ba\u011f\u0131ms\u0131z bile\u015fenler, daha kolay ve daha etkin bir \u015fekilde test edilebilir. Her bile\u015fen kendi ba\u015f\u0131na farkl\u0131 durumlar ve girdilerle test edilerek, uygulaman\u0131n genel g\u00fcvenilirli\u011fi art\u0131r\u0131l\u0131r. Bu, karma\u015f\u0131k entegrasyon testlerine duyulan ihtiyac\u0131 azalt\u0131r.<\/li>\n
  5. \u0130\u015fbirli\u011fi Kolayl\u0131\u011f\u0131:<\/strong> B\u00fcy\u00fck ekiplerde, farkl\u0131 geli\u015ftiriciler ayn\u0131 anda farkl\u0131 bile\u015fenler \u00fczerinde \u00e7al\u0131\u015fabilirler. Bu, paralel geli\u015ftirmeyi te\u015fvik eder ve projenin genel ilerlemesini h\u0131zland\u0131r\u0131r. Tasar\u0131mc\u0131lar ve \u00fcr\u00fcn y\u00f6neticileri de bile\u015fen k\u00fct\u00fcphanesi \u00fczerinden uygulaman\u0131n durumunu kolayca g\u00f6rebilir ve geri bildirimde bulunabilirler.<\/li>\n<\/ol>\n

    K\u0131sacas\u0131, CDD sadece bir geli\u015ftirme metodolojisi de\u011fil, ayn\u0131 zamanda UI geli\u015ftirme s\u00fcrecine d\u00fczen, verimlilik ve kalite getiren kapsaml\u0131 bir yakla\u015f\u0131md\u0131r. Gelecekteki UI \u00f6l\u00e7eklendirme hedefleriniz i\u00e7in vazge\u00e7ilmez bir stratejidir.<\/p>\n

    CDD’yi Projelerinize Nas\u0131l Entegre Edebilirsiniz: Ad\u0131m Ad\u0131m Uygulama Rehberi<\/h2>\n

    Bile\u015fen Odakl\u0131 Geli\u015ftirme felsefesini anlamak bir ba\u015flang\u0131\u00e7t\u0131r, ancak as\u0131l de\u011ferini projelerinize entegre etti\u011finizde g\u00f6sterir. Bu b\u00f6l\u00fcmde, CDD’yi mevcut veya yeni projelerinize nas\u0131l ad\u0131m ad\u0131m uygulayabilece\u011finizi ve bir bile\u015fen k\u00fct\u00fcphanesi ile tasar\u0131m sistemini nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Unutmay\u0131n, bu bir s\u00fcre\u00e7tir ve projenizin ihtiya\u00e7lar\u0131na g\u00f6re \u015fekillenebilir.<\/p>\n

    Bile\u015fen K\u00fct\u00fcphanesi Olu\u015fturma S\u00fcreci Nas\u0131l \u0130\u015fler?<\/h3>\n

    Bile\u015fen k\u00fct\u00fcphanesi, uygulaman\u0131z\u0131n temel yap\u0131 ta\u015flar\u0131n\u0131 bar\u0131nd\u0131ran merkezi bir depodur. Bu k\u00fct\u00fcphane, sadece geli\u015ftiriciler i\u00e7in de\u011fil, tasar\u0131mc\u0131lar ve \u00fcr\u00fcn y\u00f6neticileri i\u00e7in de canl\u0131 bir UI rehberi g\u00f6revi g\u00f6r\u00fcr. \u0130\u015fte ad\u0131m ad\u0131m nas\u0131l olu\u015fturabilece\u011finiz:<\/p>\n

      \n
    1. Do\u011fru Teknolojiyi Se\u00e7me:<\/strong> Modern frontend \u00e7er\u00e7eveleri CDD’ye do\u011fal olarak uyum sa\u011flar. React, Vue veya Angular gibi bir \u00e7er\u00e7eve se\u00e7imi, bile\u015fen tabanl\u0131 geli\u015ftirmenin temellerini atman\u0131z\u0131 kolayla\u015ft\u0131racakt\u0131r. Her biri kendi ekosistemine ve ara\u00e7lar\u0131na sahip olsa da, temel CDD prensipleri hepsi i\u00e7in ge\u00e7erlidir.<\/li>\n
    2. Bile\u015fenleri Tan\u0131mlama ve Ay\u0131klama:<\/strong> Mevcut bir uygulaman\u0131z varsa, UI’\u0131 tarayarak tekrar eden desenleri, ba\u011f\u0131ms\u0131z i\u015flevselli\u011fi olan bloklar\u0131 belirleyin. \u00d6rne\u011fin, butonlar, kartlar, modal pencereler, form girdileri gibi. Her birini potansiyel bir bile\u015fen olarak d\u00fc\u015f\u00fcn\u00fcn. Yeni bir proje i\u00e7in ise, tasar\u0131m sisteminizden ba\u015flayarak en k\u00fc\u00e7\u00fck atomik bile\u015fenleri tasarlay\u0131n.<\/li>\n
    3. Bile\u015fenleri Geli\u015ftirme ve \u0130zole Etme:<\/strong> Her bile\u015feni ayr\u0131 bir dizinde, kendi stil dosyas\u0131, mant\u0131\u011f\u0131 ve testleriyle birlikte olu\u015fturun. Bu, ba\u011f\u0131ms\u0131zl\u0131klar\u0131n\u0131 ve yeniden kullan\u0131labilirliklerini garanti eder. Storybook gibi ara\u00e7lar, bile\u015fenlerinizi izole bir ortamda, farkl\u0131 durumlarla (\u00f6rne\u011fin, aktif, devre d\u0131\u015f\u0131, y\u00fckleniyor) g\u00f6r\u00fcnt\u00fclemenize ve geli\u015ftirmenize olanak tan\u0131r. Bu, uygulaman\u0131z\u0131n geri kalan\u0131ndan ba\u011f\u0131ms\u0131z olarak bile\u015fenlerinizi test etmenizi ve belgelemenizi sa\u011flar.<\/li>\n<\/ol>\n

      Bir React bile\u015feni ve Storybook hikayesi \u00f6rne\u011fi:<\/p>\n

      \n\/\/ components\/Button\/Button.jsx\nimport React from 'react';\nimport '.\/Button.css';\n\nconst Button = ({ children, onClick, variant = 'primary', size = 'medium', disabled = false }) => {\n  const className = button ${variant} ${size} ${disabled ? 'disabled' : ''}<\/code>;\n  return (\n