{"id":35370,"date":"2025-11-28T23:01:10","date_gmt":"2025-11-28T20:01:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/"},"modified":"2025-11-28T23:01:10","modified_gmt":"2025-11-28T20:01:10","slug":"taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/","title":{"rendered":"Taming the &#8220;God Component&#8221;: A Framework-Agnostic Guide to the Component Responsibility Score (CRS)"},"content":{"rendered":"<style>\n    \/* Mobil uyumluluk i\u00e7in temel stiller *\/\n    body {\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        line-height: 1.6;\n        color: #333;\n        margin: 0 auto;\n        padding: 20px;\n        max-width: 1000px;\n        background-color: #f9f9f9;\n    }\n    h2, h3 {\n        color: #2c3e50;\n        margin-top: 30px;\n        margin-bottom: 15px;\n    }\n    h2 {\n        border-bottom: 2px solid #3498db;\n        padding-bottom: 10px;\n    }\n    h3 {\n        border-bottom: 1px dashed #7f8c8d;\n        padding-bottom: 5px;\n    }\n    p {\n        margin-bottom: 15px;\n    }\n    ul, ol {\n        margin-bottom: 15px;\n        padding-left: 25px;\n    }\n    li {\n        margin-bottom: 8px;\n    }\n    pre {\n        background-color: #ecf0f1;\n        border: 1px solid #bdc3c7;\n        padding: 15px;\n        border-radius: 5px;\n        overflow-x: auto;\n        font-family: 'Consolas', 'Monaco', monospace;\n        font-size: 0.9em;\n        margin-bottom: 20px;\n    }\n    code {\n        font-family: 'Consolas', 'Monaco', monospace;\n        background-color: #e0e6e7;\n        padding: 2px 4px;\n        border-radius: 3px;\n    }\n    table {\n        width: 100%;\n        border-collapse: collapse;\n        margin-bottom: 20px;\n    }\n    th, td {\n        border: 1px solid #ddd;\n        padding: 10px;\n        text-align: left;\n    }\n    th {\n        background-color: #3498db;\n        color: white;\n    }\n    .expert-tip {\n        background-color: #d9edf7;\n        border-left: 5px solid #3498db;\n        padding: 15px;\n        margin: 20px 0;\n        border-radius: 4px;\n        color: #31708f;\n        font-style: italic;\n    }\n    .case-study {\n        background-color: #fcf8e3;\n        border-left: 5px solid #8a6d3b;\n        padding: 20px;\n        margin: 30px 0;\n        border-radius: 4px;\n        color: #8a6d3b;\n    }<\/p>\n<p>    \/* Medya sorgular\u0131 ile mobil uyumluluk *\/\n    @media screen and (max-width: 768px) {\n        body {\n            padding: 15px;\n        }\n        h2 {\n            font-size: 1.8em;\n        }\n        h3 {\n            font-size: 1.4em;\n        }\n        table, thead, tbody, th, td, tr {\n            display: block;\n        }\n        thead tr {\n            position: absolute;\n            top: -9999px;\n            left: -9999px;\n        }\n        tr { border: 1px solid #ccc; }\n        td {\n            border: none;\n            border-bottom: 1px solid #eee;\n            position: relative;\n            padding-left: 50%;\n            text-align: right;\n        }\n        td:before {\n            position: absolute;\n            top: 6px;\n            left: 6px;\n            width: 45%;\n            padding-right: 10px;\n            white-space: nowrap;\n            text-align: left;\n            font-weight: bold;\n        }\n        \/* Her s\u00fctun i\u00e7in ba\u015fl\u0131\u011f\u0131 <code>data-label<\/code> \u00f6zniteli\u011finden al *\/\n        td:nth-of-type(1):before { content: attr(data-label); }\n        td:nth-of-type(2):before { content: attr(data-label); }\n        td:nth-of-type(3):before { content: attr(data-label); }\n        td:nth-of-type(4):before { content: attr(data-label); }\n    }\n<\/style>\n<p>Yaz\u0131l\u0131m geli\u015ftirmede, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, bile\u015fenlerin sorumluluklar\u0131n\u0131 y\u00f6netmek bazen i\u00e7inden \u00e7\u0131k\u0131lmaz bir hal alabilir. Bu makale, &#8220;Tanr\u0131 Bile\u015fen&#8221; sorununu ve Bile\u015fen Sorumluluk Skoru (CRS) kavram\u0131n\u0131 derinlemesine inceleyerek projelerinizde mod\u00fclerli\u011fi nas\u0131l art\u0131rabilece\u011finizi g\u00f6steriyor.<\/p>\n<p>Her geli\u015ftiricinin kariyerinde en az bir kez kar\u015f\u0131la\u015ft\u0131\u011f\u0131, uygulamadaki bir\u00e7ok i\u015flevi tek ba\u015f\u0131na \u00fcstlenen, a\u015f\u0131r\u0131 b\u00fcy\u00fck ve karma\u015f\u0131k bir bile\u015fen t\u00fcr\u00fc vard\u0131r: &#8220;Tanr\u0131 Bile\u015fen&#8221; (God Component). Bu t\u00fcr bile\u015fenler, adeta bir tanr\u0131 gibi her \u015feyi bilir, her \u015feye m\u00fcdahale eder ve uygulaman\u0131n en kritik i\u015flevlerini merkezile\u015ftirir. Ba\u015flang\u0131\u00e7ta basit bir ihtiyac\u0131 kar\u015f\u0131lamak \u00fczere tasarlanm\u0131\u015f olsa da, zamanla yeni \u00f6zellikler ve gereksinimlerle \u015fi\u015ferek devasa bir yap\u0131ya d\u00f6n\u00fc\u015f\u00fcrler. \u00d6rne\u011fin, bir kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) bile\u015feni d\u00fc\u015f\u00fcn\u00fcn; ba\u015flang\u0131\u00e7ta sadece veri g\u00f6stermekle y\u00fck\u00fcml\u00fcyken, zamanla veri alma, g\u00f6nderme, durum y\u00f6netimi, do\u011frulama, hatta yetkilendirme gibi onlarca farkl\u0131 sorumlulu\u011fu \u00fczerine alabilir. Bu durum, yaz\u0131l\u0131m geli\u015ftirme s\u00fcrecinde ciddi sorunlara yol a\u00e7ar.<\/p>\n<p>Peki, bir &#8220;Tanr\u0131 Bile\u015fen&#8221;in ortaya \u00e7\u0131kard\u0131\u011f\u0131 sorunlar nelerdir? \u00d6ncelikle, <strong>bak\u0131m kolayl\u0131\u011f\u0131n\u0131<\/strong> derinden etkiler. Tek bir dosyada y\u00fczlerce, hatta binlerce sat\u0131r kodun bir araya gelmesi, herhangi bir hatay\u0131 bulmay\u0131 veya yeni bir \u00f6zellik eklemeyi kabusa \u00e7evirir. Kodun hangi k\u0131sm\u0131n\u0131n hangi i\u015flevi yerine getirdi\u011fini anlamak bile \u00f6nemli bir \u00e7aba gerektirir. \u0130kinci olarak, <strong>test edilebilirlik<\/strong> b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azal\u0131r. \u00c7ok say\u0131da sorumlulu\u011fu olan bir bile\u015feni izole bir \u015fekilde test etmek neredeyse imkans\u0131zd\u0131r. Her test, bile\u015fenin t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve i\u015flevlerini dikkate almak zorunda kal\u0131r, bu da testlerin yava\u015flamas\u0131na ve k\u0131r\u0131lgan hale gelmesine neden olur. \u00dc\u00e7\u00fcnc\u00fc olarak, <strong>yeniden kullan\u0131labilirlik<\/strong> ortadan kalkar. Bir &#8220;Tanr\u0131 Bile\u015fen&#8221; o kadar \u00e7ok \u00f6zel i\u015flevi i\u00e7erir ki, uygulaman\u0131n farkl\u0131 bir yerinde veya ba\u015fka bir projede bu bile\u015feni do\u011frudan kullanmak genellikle m\u00fcmk\u00fcn olmaz. \u00c7\u00fcnk\u00fc ihtiya\u00e7 duyulmayan bir\u00e7ok ek i\u015flevselli\u011fi de beraberinde getirir. Son olarak, <strong>\u00f6l\u00e7eklenebilirlik<\/strong> ve <strong>performans<\/strong> da olumsuz etkilenir. Gereksiz ba\u011f\u0131ml\u0131l\u0131klar ve karma\u015f\u0131k mant\u0131k, uygulaman\u0131n yava\u015flamas\u0131na ve hatta bellek sorunlar\u0131na yol a\u00e7abilir. Bu y\u00fczden, yaz\u0131l\u0131m mimarisi a\u00e7\u0131s\u0131ndan sa\u011fl\u0131kl\u0131 bir yap\u0131 kurmak ve s\u00fcrd\u00fcr\u00fclebilir bir geli\u015ftirme s\u00fcreci sa\u011flamak i\u00e7in bu t\u00fcr bile\u015fenlerden ka\u00e7\u0131nmak kritik \u00f6neme sahiptir. Bu sorunun \u00fcstesinden gelmek i\u00e7in sistemli bir yakla\u015f\u0131ma ihtiyac\u0131m\u0131z var ve burada devreye Bile\u015fen Sorumluluk Skoru (CRS) giriyor.<\/p>\n<h2>Bile\u015fen Sorumluluk Skoru (CRS) Nedir ve Neden \u00d6nemlidir?<\/h2>\n<p>Bile\u015fen Sorumluluk Skoru (CRS), bir bile\u015fenin ne kadar fazla sorumlulu\u011fa sahip oldu\u011funu niceliksel olarak \u00f6l\u00e7mek i\u00e7in geli\u015ftirilmi\u015f framework-agnostik bir \u00f6l\u00e7\u00fctt\u00fcr. Basit\u00e7e ifade etmek gerekirse, bir bile\u015fenin sahip oldu\u011fu farkl\u0131 i\u015flevsel veya mant\u0131ksal sorumluluklar\u0131n say\u0131s\u0131n\u0131n bir g\u00f6stergesidir. Amac\u0131m\u0131z, CRS de\u011ferini m\u00fcmk\u00fcn oldu\u011funca d\u00fc\u015f\u00fck tutmakt\u0131r; \u00e7\u00fcnk\u00fc d\u00fc\u015f\u00fck bir CRS, bile\u015fenin daha odakl\u0131, daha anla\u015f\u0131l\u0131r, daha test edilebilir ve dolay\u0131s\u0131yla daha s\u00fcrd\u00fcr\u00fclebilir oldu\u011fu anlam\u0131na gelir. Bu skor, &#8220;Tek Sorumluluk Prensibi&#8221; (Single Responsibility Principle &#8211; SRP) gibi SOLID prensiplerinin somut bir uygulamas\u0131n\u0131 sunar ve yaz\u0131l\u0131m kalitesini art\u0131rmak i\u00e7in pratik bir yol haritas\u0131 \u00e7izer.<\/p>\n<p>CRS&#8217;in \u00f6nemi birka\u00e7 ana ba\u015fl\u0131kta \u00f6zetlenebilir:<\/p>\n<ol>\n<li><strong>Nesnel De\u011ferlendirme:<\/strong> &#8220;Bu bile\u015fen \u00e7ok mu b\u00fcy\u00fck?&#8221; sorusuna &#8220;Evet, \u00e7\u00fcnk\u00fc CRS de\u011feri 7, hedefimiz 2&#8217;nin alt\u0131nda olmas\u0131!&#8221; gibi somut bir cevap vermemizi sa\u011flar. Bu, tak\u0131m i\u00e7inde daha net tart\u0131\u015fmalar yap\u0131lmas\u0131na ve refactoring kararlar\u0131n\u0131n daha kolay al\u0131nmas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<li><strong>Erken Uyar\u0131 Sistemi:<\/strong> Geli\u015ftirme s\u00fcrecinin ba\u015flar\u0131nda bile\u015fenlerin CRS de\u011ferlerini d\u00fczenli olarak kontrol ederek, &#8220;Tanr\u0131 Bile\u015fen&#8221; olu\u015fumunu hen\u00fcz ba\u015flang\u0131\u00e7 a\u015famas\u0131nda tespit edip \u00f6nleyebiliriz. Bu, maliyetli ve zaman al\u0131c\u0131 refactoring i\u015flemlerinden ka\u00e7\u0131nmam\u0131z\u0131 sa\u011flar.<\/li>\n<li><strong>S\u00fcrd\u00fcr\u00fclebilirli\u011fin Anahtar\u0131:<\/strong> D\u00fc\u015f\u00fck CRS&#8217;li bile\u015fenler, hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r, yeni \u00f6zellik ekleme s\u00fcrecini h\u0131zland\u0131r\u0131r ve genel olarak kod taban\u0131n\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc uzat\u0131r. Her bile\u015fen kendi k\u00fc\u00e7\u00fck i\u015fini en iyi \u015fekilde yapmaya odaklan\u0131r.<\/li>\n<li><strong>Ekip Verimlili\u011fi:<\/strong> Bile\u015fenler daha k\u00fc\u00e7\u00fck ve anla\u015f\u0131l\u0131r oldu\u011funda, farkl\u0131 ekip \u00fcyeleri ayn\u0131 bile\u015fen \u00fczerinde daha az \u00e7ak\u0131\u015fma ile \u00e7al\u0131\u015fabilir. Ayr\u0131ca, yeni ekip \u00fcyelerinin projeye adaptasyon s\u00fcresi k\u0131sal\u0131r \u00e7\u00fcnk\u00fc kodun karma\u015f\u0131kl\u0131\u011f\u0131 azal\u0131r.<\/li>\n<li><strong>Framework-Agnostik Yakla\u015f\u0131m:<\/strong> CRS, belirli bir programlama diline, k\u00fct\u00fcphaneye veya framework&#8217;e (React, Angular, Vue, Svelte vb.) ba\u011fl\u0131 de\u011fildir. Temel yaz\u0131l\u0131m m\u00fchendisli\u011fi prensipleri \u00fczerine in\u015fa edildi\u011fi i\u00e7in her t\u00fcrl\u00fc projede uygulanabilir. Bu evrensellik, onu \u00e7ok de\u011ferli bir ara\u00e7 haline getirir.<\/li>\n<\/ol>\n<p>CRS, karma\u015f\u0131k yaz\u0131l\u0131m metrikleri olan D\u00f6ng\u00fcsel Karma\u015f\u0131kl\u0131k (Cyclomatic Complexity) veya Kaynak Kodu Sat\u0131r Say\u0131s\u0131 (SLOC) gibi de\u011ferlere k\u0131yasla daha sezgisel ve do\u011frudan &#8220;sorumluluk&#8221; kavram\u0131na odaklan\u0131r. Bir bile\u015fenin ne kadar i\u015f yapt\u0131\u011f\u0131n\u0131 de\u011fil, ka\u00e7 farkl\u0131 *t\u00fcrde* i\u015f yapt\u0131\u011f\u0131n\u0131 \u00f6l\u00e7meyi hedefler. Bu sayede, &#8220;Tanr\u0131 Bile\u015fen&#8221; sendromunun yayg\u0131n oldu\u011fu projelerde, kod kalitesini art\u0131rmak ve daha sa\u011fl\u0131kl\u0131 bir mimari olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ba\u015flang\u0131\u00e7 noktas\u0131 sunar. \u015eimdi CRS&#8217;i nas\u0131l hesaplayaca\u011f\u0131m\u0131za ge\u00e7elim.<\/p>\n<h3>CRS Nas\u0131l Hesaplan\u0131r? Ad\u0131m Ad\u0131m Yakla\u015f\u0131m<\/h3>\n<p>Bile\u015fen Sorumluluk Skoru (CRS) hesaplamak i\u00e7in standart bir &#8220;tek do\u011fru form\u00fcl&#8221; yoktur, \u00e7\u00fcnk\u00fc sorumluluklar\u0131n tan\u0131mlanmas\u0131 k\u0131smen s\u00fcbjektif bir s\u00fcre\u00e7tir. Ancak, pratik bir yakla\u015f\u0131m benimseyerek tutarl\u0131 ve faydal\u0131 bir skor elde edebiliriz. \u0130\u015fte ad\u0131m ad\u0131m bir hesaplama y\u00f6ntemi:<\/p>\n<ol>\n<li><strong>Bile\u015feninizi Belirleyin:<\/strong> Analiz etmek istedi\u011finiz bile\u015feni se\u00e7in. Bu bir React bile\u015feni, bir Angular servisi, bir Vue bile\u015feni veya herhangi bir s\u0131n\u0131fla temsil edilen bir mod\u00fcl olabilir.<\/li>\n<li><strong>T\u00fcm Sorumluluklar\u0131 Listeleyin:<\/strong> Bile\u015fenin ger\u00e7ekle\u015ftirdi\u011fi t\u00fcm farkl\u0131 i\u015flevleri, eylemleri ve etkile\u015fimleri belirleyin. Bu a\u015famada m\u00fcmk\u00fcn oldu\u011funca detayl\u0131 olmaya \u00e7al\u0131\u015f\u0131n. Bir sorumluluk, genellikle bir &#8220;neden de\u011fi\u015fme&#8221; prensibiyle tan\u0131mlan\u0131r. Yani, &#8220;Bu bile\u015fen neden de\u011fi\u015fmeli?&#8221; sorusunun her farkl\u0131 cevab\u0131, ayr\u0131 bir sorumluluk olarak kabul edilebilir.\n<ul>\n<li><strong>Veri G\u00f6sterme (Rendering Data):<\/strong> Bile\u015fenin temel amac\u0131 olan veriyi kullan\u0131c\u0131ya sunma.<\/li>\n<li><strong>Veri Alma (Fetching Data):<\/strong> API \u00e7a\u011fr\u0131lar\u0131 veya di\u011fer kaynaklardan veri \u00e7ekme.<\/li>\n<li><strong>Veri G\u00f6nderme (Submitting Data):<\/strong> Form g\u00f6nderimi veya di\u011fer kullan\u0131c\u0131 eylemleriyle veri kaydetme\/g\u00fcncelleme.<\/li>\n<li><strong>Durum Y\u00f6netimi (State Management):<\/strong> Bile\u015fenin kendi i\u00e7 durumunu (\u00f6rn: bir formun input de\u011ferleri, bir men\u00fcn\u00fcn a\u00e7\u0131k\/kapal\u0131 durumu) veya global durumu y\u00f6netme.<\/li>\n<li><strong>Girdi Do\u011frulama (Input Validation):<\/strong> Kullan\u0131c\u0131 girdilerini kontrol etme.<\/li>\n<li><strong>Yetkilendirme\/\u0130zin Kontrol\u00fc (Authorization\/Permission Check):<\/strong> Kullan\u0131c\u0131n\u0131n belirli bir eylemi ger\u00e7ekle\u015ftirme veya veriyi g\u00f6rme iznine sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etme.<\/li>\n<li><strong>Olay Y\u00f6netimi (Event Handling):<\/strong> Kullan\u0131c\u0131 etkile\u015fimlerini (t\u0131klama, yazma vb.) i\u015fleme.<\/li>\n<li><strong>G\u00f6rsel Etkile\u015fimler\/Animasyonlar (Visual Interactions\/Animations):<\/strong> UI animasyonlar\u0131 veya karma\u015f\u0131k g\u00f6rsel efektler.<\/li>\n<li><strong>Depolama \u0130\u015flemleri (Storage Operations):<\/strong> LocalStorage, SessionStorage gibi yerel depolama birimleriyle etkile\u015fim.<\/li>\n<li><strong>Routing\/Navigasyon (Routing\/Navigation):<\/strong> Uygulama i\u00e7i sayfa y\u00f6nlendirmeleri.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Sorumluluklar\u0131 Niteliksel Olarak De\u011ferlendirin:<\/strong> Her bir sorumlulu\u011fun karma\u015f\u0131kl\u0131\u011f\u0131na veya etkisine g\u00f6re bir a\u011f\u0131rl\u0131k atayabilirsiniz. Basit bir &#8220;Evet\/Hay\u0131r&#8221; de\u011ferlendirmesi (her sorumluluk 1 puan) ba\u015flang\u0131\u00e7 i\u00e7in yeterli olsa da, daha geli\u015fmi\u015f bir sistemde baz\u0131 sorumluluklar (\u00f6rn: veri alma\/g\u00f6nderme) daha y\u00fcksek puan alabilirken, di\u011ferleri (\u00f6rn: basit veri g\u00f6sterme) daha d\u00fc\u015f\u00fck puan alabilir. Ancak genelde, her farkl\u0131 sorumluluk bir birim olarak say\u0131l\u0131r.<\/li>\n<li><strong>Skoru Hesaplay\u0131n:<\/strong> T\u00fcm belirledi\u011finiz sorumluluklar\u0131n say\u0131s\u0131n\u0131 toplay\u0131n. Bu, bile\u015feninizin CRS de\u011feridir.<\/li>\n<\/ol>\n<p><strong>\u00d6rnek Hesaplama:<\/strong><\/p>\n<p>Bir <code>UserProfile<\/code> bile\u015fenimiz oldu\u011funu varsayal\u0131m. Bu bile\u015fen hem kullan\u0131c\u0131n\u0131n profil bilgilerini g\u00f6steriyor, hem bu bilgileri bir API&#8217;den \u00e7ekiyor, hem de kullan\u0131c\u0131n\u0131n profilini d\u00fczenlemesine olanak tan\u0131yan bir formu y\u00f6netiyor. Ayr\u0131ca, kullan\u0131c\u0131n\u0131n avatar\u0131n\u0131 y\u00fckleme ve g\u00f6sterimini de kendisi hallediyor.<\/p>\n<ul>\n<li>Veri G\u00f6sterme (Profil bilgileri): 1 puan<\/li>\n<li>Veri Alma (API&#8217;den profil \u00e7ekme): 1 puan<\/li>\n<li>Veri G\u00f6nderme (Profil g\u00fcncelleme): 1 puan<\/li>\n<li>Durum Y\u00f6netimi (Form inputlar\u0131 ve y\u00fckleme durumu): 1 puan<\/li>\n<li>Girdi Do\u011frulama (Form inputlar\u0131 i\u00e7in): 1 puan<\/li>\n<li>Dosya Y\u00fckleme (Avatar y\u00fckleme): 1 puan<\/li>\n<li>G\u00f6rsel Etkile\u015fimler (Avatar \u00f6nizlemesi): 1 puan<\/li>\n<\/ul>\n<p>Bu durumda, <code>UserProfile<\/code> bile\u015feninin CRS de\u011feri <strong>7<\/strong> olacakt\u0131r. Bu skor, tek bir bile\u015fen i\u00e7in olduk\u00e7a y\u00fcksektir ve bu bile\u015fenin &#8220;Tanr\u0131 Bile\u015fen&#8221; olma e\u011filiminde oldu\u011funu g\u00f6sterir. Ideal olarak, \u00e7o\u011fu bile\u015fen i\u00e7in CRS de\u011ferinin 1-3 aras\u0131nda olmas\u0131 hedeflenmelidir. \u015eimdi bu t\u00fcr bir bile\u015feni nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrebilece\u011fimize dair bir vaka analizine g\u00f6z atal\u0131m.<\/p>\n<div class=\"expert-tip\">\n    Uzman \u0130pucu: CRS hesaplamas\u0131na ba\u015flamadan \u00f6nce, ekibinizle &#8220;sorumluluk&#8221; tan\u0131m\u0131 \u00fczerinde anla\u015f\u0131n. Hangi i\u015flevlerin ayr\u0131 bir sorumluluk olarak kabul edilece\u011fi konusunda ortak bir dil olu\u015fturmak, tutarl\u0131 sonu\u00e7lar elde etmenin anahtar\u0131d\u0131r.\n<\/div>\n<h3>Vaka Analizi: Bir &#8220;Tanr\u0131 Bile\u015fen&#8221;in CRS De\u011feri ve D\u00f6n\u00fc\u015f\u00fcm\u00fc<\/h3>\n<p class=\"case-study\">\n    <strong>Vaka:<\/strong> E-ticaret sitemizdeki <code>ProductDetailPage<\/code> (\u00dcr\u00fcn Detay Sayfas\u0131) bile\u015feni, ba\u015flang\u0131\u00e7ta sadece \u00fcr\u00fcn bilgilerini g\u00f6stermek i\u00e7in tasarlanm\u0131\u015ft\u0131. Ancak zamanla, \u00fcr\u00fcn\u00fcn varyantlar\u0131n\u0131 se\u00e7me, sepete ekleme, yorumlar\u0131 g\u00f6sterme, yorum ekleme, \u00fcr\u00fcnle ilgili \u00f6neriler sunma ve hatta &#8220;Favorilere Ekle&#8221; gibi bir\u00e7ok farkl\u0131 i\u015flevi tek ba\u015f\u0131na y\u00f6neten bir &#8220;Tanr\u0131 Bile\u015fen&#8221; haline geldi. Ekip, bu bile\u015fende de\u011fi\u015fiklik yapmaktan \u00e7ekiniyor, her g\u00fcncelleme yeni bir hatay\u0131 tetikliyor ve performans sorunlar\u0131 ya\u015fan\u0131yordu.\n<\/p>\n<h4>Ba\u015flang\u0131\u00e7 Durumu: Y\u00fcksek CRS De\u011feri<\/h4>\n<p><code>ProductDetailPage<\/code> bile\u015feninin mevcut sorumluluklar\u0131n\u0131 listeleyelim:<\/p>\n<ol>\n<li>\u00dcr\u00fcn bilgilerini g\u00f6sterme (isim, fiyat, a\u00e7\u0131klama) &#8211; <strong>1 puan<\/strong><\/li>\n<li>\u00dcr\u00fcn varyantlar\u0131n\u0131 se\u00e7me ve y\u00f6netme &#8211; <strong>1 puan<\/strong><\/li>\n<li>Sepete \u00fcr\u00fcn ekleme mant\u0131\u011f\u0131 &#8211; <strong>1 puan<\/strong><\/li>\n<li>\u00dcr\u00fcn yorumlar\u0131n\u0131 API&#8217;den \u00e7ekme &#8211; <strong>1 puan<\/strong><\/li>\n<li>\u00dcr\u00fcn yorumlar\u0131n\u0131 g\u00f6sterme &#8211; <strong>1 puan<\/strong><\/li>\n<li>Yeni yorum g\u00f6nderme formu ve mant\u0131\u011f\u0131 &#8211; <strong>1 puan<\/strong><\/li>\n<li>\u0130lgili \u00fcr\u00fcn \u00f6nerilerini API&#8217;den \u00e7ekme &#8211; <strong>1 puan<\/strong><\/li>\n<li>\u0130lgili \u00fcr\u00fcn \u00f6nerilerini g\u00f6sterme &#8211; <strong>1 puan<\/strong><\/li>\n<li>&#8220;Favorilere Ekle&#8221; butonu mant\u0131\u011f\u0131 (API ile etkile\u015fim) &#8211; <strong>1 puan<\/strong><\/li>\n<li>\u00dcr\u00fcn g\u00f6rsel galerisi y\u00f6netimi (b\u00fcy\u00fck\/k\u00fc\u00e7\u00fck resim ge\u00e7i\u015fleri) &#8211; <strong>1 puan<\/strong><\/li>\n<li>Sayfa y\u00fckleme ve hata durumlar\u0131n\u0131 y\u00f6netme &#8211; <strong>1 puan<\/strong><\/li>\n<\/ol>\n<p><strong>Initial CRS: 11<\/strong>. Bu de\u011fer, beklendi\u011fi gibi olduk\u00e7a y\u00fcksek ve bile\u015fenin adeta bir monolit gibi davrand\u0131\u011f\u0131n\u0131 g\u00f6steriyor. \u0130\u015fte bu bile\u015fenden basitle\u015ftirilmi\u015f bir kod par\u00e7as\u0131:<\/p>\n<pre><code>\n\/\/ ProductDetailPage.js (K\u0131salt\u0131lm\u0131\u015f \"Tanr\u0131 Bile\u015fen\" \u00f6rne\u011fi)\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nfunction ProductDetailPage({ productId }) {\n    const [product, setProduct] = useState(null);\n    const [variants, setVariants] = useState([]);\n    const [selectedVariant, setSelectedVariant] = useState(null);\n    const [comments, setComments] = useState([]);\n    const [newCommentText, setNewCommentText] = useState('');\n    const [relatedProducts, setRelatedProducts] = useState([]);\n    const [isLoading, setIsLoading] = useState(true);\n    const [error, setError] = useState(null);\n\n    \/\/ 1. \u00dcr\u00fcn verilerini \u00e7ekme\n    \/\/ 4. Yorumlar\u0131 \u00e7ekme\n    \/\/ 7. \u0130lgili \u00fcr\u00fcnleri \u00e7ekme\n    useEffect(() => {\n        const fetchData = async () => {\n            setIsLoading(true);\n            try {\n                const productRes = await axios.get(<code>\/api\/products\/${productId}<\/code>);\n                setProduct(productRes.data);\n                setVariants(productRes.data.variants);\n                setSelectedVariant(productRes.data.variants[0]);\n\n                const commentsRes = await axios.get(<code>\/api\/products\/${productId}\/comments<\/code>);\n                setComments(commentsRes.data);\n\n                const relatedRes = await axios.get(<code>\/api\/products\/${productId}\/related<\/code>);\n                setRelatedProducts(relatedRes.data);\n            } catch (err) {\n                setError(err);\n            } finally {\n                setIsLoading(false);\n            }\n        };\n        fetchData();\n    }, [productId]);\n\n    \/\/ 3. Sepete Ekle mant\u0131\u011f\u0131\n    const handleAddToCart = () => {\n        \/\/ Sepete ekleme API \u00e7a\u011fr\u0131s\u0131 ve bildirim mant\u0131\u011f\u0131\n        console.log(<code>\u00dcr\u00fcn ${product.name}, varyant ${selectedVariant.name} sepete eklendi.<\/code>);\n    };\n\n    \/\/ 6. Yeni yorum g\u00f6nderme mant\u0131\u011f\u0131\n    const handleAddComment = async () => {\n        if (!newCommentText.trim()) return;\n        try {\n            const res = await axios.post(<code>\/api\/products\/${productId}\/comments<\/code>, { text: newCommentText });\n            setComments([...comments, res.data]);\n            setNewCommentText('');\n        } catch (err) {\n            console.error(\"Yorum eklenemedi\", err);\n        }\n    };\n\n    \/\/ 9. Favorilere Ekle mant\u0131\u011f\u0131\n    const handleAddToFavorites = () => {\n        \/\/ Favorilere ekleme API \u00e7a\u011fr\u0131s\u0131\n        console.log(<code>${product.name} favorilere eklendi.<\/code>);\n    };\n\n    if (isLoading) return <div>Y\u00fckleniyor...<\/div>;\n    if (error) return <div>Hata: {error.message}<\/div>;\n    if (!product) return null;\n\n    return (\n        <div>\n            {\/* 1. \u00dcr\u00fcn bilgilerini g\u00f6sterme *\/}\n            <h1>{product.name}<\/h1>\n            <p>Fiyat: {product.price}<\/p>\n            <img src={product.imageUrl} alt={product.name} \/> {\/* 10. G\u00f6rsel y\u00f6netimi *\/}\n\n            {\/* 2. Varyant se\u00e7imi *\/}\n            <select onChange={(e) => setSelectedVariant(variants.find(v => v.id === e.target.value))}>\n                {variants.map(v => <option key={v.id} value={v.id}>{v.name}<\/option>)}\n            <\/select>\n\n            <button onClick={handleAddToCart}>Sepete Ekle<\/button>\n            <button onClick={handleAddToFavorites}>Favorilere Ekle<\/button>\n\n            <h2>Yorumlar<\/h2>\n            {\/* 5. Yorumlar\u0131 g\u00f6sterme *\/}\n            {comments.map(comment => (\n                <div key={comment.id}>{comment.text}<\/div>\n            ))}\n            <textarea value={newCommentText} onChange={(e) => setNewCommentText(e.target.value)} \/>\n            <button onClick={handleAddComment}>Yorum Ekle<\/button>\n\n            <h2>\u0130lgili \u00dcr\u00fcnler<\/h2>\n            {\/* 8. \u0130lgili \u00fcr\u00fcnleri g\u00f6sterme *\/}\n            {relatedProducts.map(rp => (\n                <div key={rp.id}>{rp.name}<\/div>\n            ))}\n        <\/div>\n    );\n}\n\nexport default ProductDetailPage;\n<\/pre>\n<p><\/code><\/p>\n<h4>D\u00f6n\u00fc\u015f\u00fcm: Refactoring ve D\u00fc\u015f\u00fck CRS<\/h4>\n<p>Bu bile\u015feni, her bir sorumlulu\u011fu ayr\u0131 bir mod\u00fcle veya daha k\u00fc\u00e7\u00fck bir bile\u015fene delege ederek refactor edebiliriz. Amac\u0131m\u0131z, <code>ProductDetailPage<\/code> bile\u015feninin sadece ana d\u00fczeni ve alt bile\u015fenleri bir araya getirme sorumlulu\u011funu \u00fcstlenmesini sa\u011flamakt\u0131r. \u0130\u015fte nas\u0131l refactor edebilece\u011fimize dair bir \u00f6rnek:<\/p>\n<ol>\n<li><code>ProductDisplay<\/code>: \u00dcr\u00fcn bilgilerini, varyantlar\u0131 ve g\u00f6rsel galerisini g\u00f6sterme.<\/li>\n<li><code>AddToCartButton<\/code>: Sepete ekleme mant\u0131\u011f\u0131.<\/li>\n<li><code>FavoriteButton<\/code>: Favorilere ekleme mant\u0131\u011f\u0131.<\/li>\n<li><code>ProductCommentsSection<\/code>: Yorumlar\u0131 \u00e7ekme, g\u00f6sterme ve yeni yorum ekleme.<\/li>\n<li><code>RelatedProductsList<\/code>: \u0130lgili \u00fcr\u00fcnleri \u00e7ekme ve g\u00f6sterme.<\/li>\n<li><code>useProductData<\/code>: \u00dcr\u00fcn, yorum ve ilgili \u00fcr\u00fcn verilerini \u00e7eken \u00f6zel bir hook (mant\u0131k delege edildi).<\/li>\n<\/ol>\n<p><strong>Refactor Sonras\u0131 <code>ProductDetailPage<\/code> Sorumluluklar\u0131:<\/strong><\/p>\n<ul>\n<li>Alt bile\u015fenleri bir araya getirme ve d\u00fczenleme - <strong>1 puan<\/strong><\/li>\n<li>Veri alma \u00f6zel hook'unu \u00e7a\u011f\u0131rma ve veriyi alt bile\u015fenlere iletme - <strong>1 puan<\/strong><\/li>\n<li>Y\u00fckleme ve hata durumlar\u0131n\u0131 y\u00f6netme (hook'tan gelen durumu kullanarak) - <strong>1 puan<\/strong><\/li>\n<\/ul>\n<p><strong>Refactor Sonras\u0131 CRS: 3<\/strong>. Bu, \u00f6nemli bir iyile\u015fmedir ve bile\u015fenin art\u0131k \u00e7ok daha odakl\u0131 oldu\u011funu g\u00f6sterir. Di\u011fer bile\u015fenlerin CRS de\u011feri de genellikle 1-3 aras\u0131nda olacakt\u0131r. \u00d6rne\u011fin, <code>AddToCartButton<\/code>'\u0131n CRS de\u011feri 1 (sepete ekleme mant\u0131\u011f\u0131), <code>ProductCommentsSection<\/code>'\u0131n CRS de\u011feri 3 (yorum \u00e7ekme, g\u00f6sterme, g\u00f6nderme) olabilir.<\/p>\n<pre><code>\n\/\/ useProductData.js (\u00d6zel Hook)\nimport { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nfunction useProductData(productId) {\n    const [product, setProduct] = useState(null);\n    const [comments, setComments] = useState([]);\n    const [relatedProducts, setRelatedProducts] = useState([]);\n    const [isLoading, setIsLoading] = useState(true);\n    const [error, setError] = useState(null);\n\n    useEffect(() => {\n        const fetchData = async () => {\n            setIsLoading(true);\n            try {\n                const [productRes, commentsRes, relatedRes] = await Promise.all([\n                    axios.get(<code>\/api\/products\/${productId}<\/code>),\n                    axios.get(<code>\/api\/products\/${productId}\/comments<\/code>),\n                    axios.get(<code>\/api\/products\/${productId}\/related<\/code>)\n                ]);\n                setProduct(productRes.data);\n                setComments(commentsRes.data);\n                setRelatedProducts(relatedRes.data);\n            } catch (err) {\n                setError(err);\n            } finally {\n                setIsLoading(false);\n            }\n        };\n        fetchData();\n    }, [productId]);\n\n    return { product, comments, relatedProducts, isLoading, error, setComments };\n}\n\nexport default useProductData;\n\n\/\/ ProductDisplay.js\nimport React from 'react';\n\nfunction ProductDisplay({ product, variants, selectedVariant, onVariantChange }) {\n    return (\n        <div>\n            <h1>{product.name}<\/h1>\n            <p>Fiyat: {product.price}<\/p>\n            <img src={product.imageUrl} alt={product.name} style={{ maxWidth: '100%' }} \/>\n            {variants && variants.length > 0 && (\n                <select value={selectedVariant?.id || ''} onChange={(e) => onVariantChange(e.target.value)}>\n                    {variants.map(v => <option key={v.id} value={v.id}>{v.name}<\/option>)}\n                <\/select>\n            )}\n        <\/div>\n    );\n}\nexport default ProductDisplay;\n\n\/\/ AddToCartButton.js\nimport React from 'react';\n\nfunction AddToCartButton({ product, selectedVariant }) {\n    const handleAddToCart = () => {\n        console.log(<code>\u00dcr\u00fcn ${product.name}, varyant ${selectedVariant.name} sepete eklendi.<\/code>);\n        \/\/ API \u00e7a\u011fr\u0131s\u0131\n    };\n    return <button onClick={handleAddToCart}>Sepete Ekle<\/button>;\n}\nexport default AddToCartButton;\n\n\/\/ ProductCommentsSection.js\nimport React, { useState } from 'react';\nimport axios from 'axios';\n\nfunction ProductCommentsSection({ productId, comments, setComments }) {\n    const [newCommentText, setNewCommentText] = useState('');\n\n    const handleAddComment = async () => {\n        if (!newCommentText.trim()) return;\n        try {\n            const res = await axios.post(<code>\/api\/products\/${productId}\/comments<\/code>, { text: newCommentText });\n            setComments([...comments, res.data]);\n            setNewCommentText('');\n        } catch (err) {\n            console.error(\"Yorum eklenemedi\", err);\n        }\n    };\n\n    return (\n        <div>\n            <h2>Yorumlar<\/h2>\n            {comments.map(comment => (\n                <div key={comment.id}>{comment.text}<\/div>\n            ))}\n            <textarea value={newCommentText} onChange={(e) => setNewCommentText(e.target.value)} placeholder=\"Yorumunuzu buraya yaz\u0131n...\" \/>\n            <button onClick={handleAddComment}>Yorum Ekle<\/button>\n        <\/div>\n    );\n}\nexport default ProductCommentsSection;\n\n\/\/ RelatedProductsList.js\nimport React from 'react';\n\nfunction RelatedProductsList({ products }) {\n    return (\n        <div>\n            <h2>\u0130lgili \u00dcr\u00fcnler<\/h2>\n            {products.map(rp => (\n                <div key={rp.id}>{rp.name}<\/div>\n            ))}\n        <\/div>\n    );\n}\nexport default RelatedProductsList;\n\n\/\/ ProductDetailPage.js (Refactor edilmi\u015f hali)\nimport React, { useState } from 'react';\nimport useProductData from '.\/useProductData';\nimport ProductDisplay from '.\/ProductDisplay';\nimport AddToCartButton from '.\/AddToCartButton';\nimport FavoriteButton from '.\/FavoriteButton'; \/\/ Yeni olu\u015fturulacak\nimport ProductCommentsSection from '.\/ProductCommentsSection';\nimport RelatedProductsList from '.\/RelatedProductsList';\n\nfunction ProductDetailPage({ productId }) {\n    const { product, comments, relatedProducts, isLoading, error, setComments } = useProductData(productId);\n    const [selectedVariant, setSelectedVariant] = useState(null);\n\n    if (isLoading) return <div>Y\u00fckleniyor...<\/div>;\n    if (error) return <div>Hata: {error.message}<\/div>;\n    if (!product) return null;\n\n    \/\/ selectedVariant'\u0131 product.variants \u00fczerinden y\u00f6net\n    useState(() => {\n        if (product && product.variants && product.variants.length > 0) {\n            setSelectedVariant(product.variants[0]);\n        }\n    }, [product]);\n\n    return (\n        <div>\n            <ProductDisplay\n                product={product}\n                variants={product.variants}\n                selectedVariant={selectedVariant}\n                onVariantChange={(variantId) => setSelectedVariant(product.variants.find(v => v.id === variantId))}\n            \/>\n            <AddToCartButton product={product} selectedVariant={selectedVariant} \/>\n            <FavoriteButton productId={productId} \/> {\/* Sorumlulu\u011fu kendine ait olacak *\/}\n\n            <ProductCommentsSection productId={productId} comments={comments} setComments={setComments} \/>\n            <RelatedProductsList products={relatedProducts} \/>\n        <\/div>\n    );\n}\n\nexport default ProductDetailPage;\n<\/pre>\n<p><\/code><\/p>\n<p>Bu d\u00f6n\u00fc\u015f\u00fcm sayesinde, <code>ProductDetailPage<\/code> bile\u015feni art\u0131k sadece alt bile\u015fenleri d\u00fczenlemekle ve veri hook'undan gelen bilgileri da\u011f\u0131tmakla sorumlu. Her bir alt bile\u015fen kendi \u00f6zel i\u015fini yap\u0131yor. Bu, hem kodun okunabilirli\u011fini art\u0131r\u0131yor hem de her bir par\u00e7an\u0131n ayr\u0131 ayr\u0131 test edilmesini ve yeniden kullan\u0131lmas\u0131n\u0131 sa\u011fl\u0131yor.<\/p>\n<h2>CRS'i D\u00fc\u015f\u00fcrmek \u0130\u00e7in Hangi Teknikleri Kullanabiliriz?<\/h2>\n<p>CRS de\u011ferini d\u00fc\u015f\u00fcrmek ve daha mod\u00fcler, s\u00fcrd\u00fcr\u00fclebilir bile\u015fenler olu\u015fturmak i\u00e7in bir\u00e7ok yaz\u0131l\u0131m m\u00fchendisli\u011fi prensibi ve tasar\u0131m deseni kullan\u0131labilir. \u0130\u015fte bu tekniklerden baz\u0131lar\u0131:<\/p>\n<ol>\n<li>\n        <strong>Tek Sorumluluk Prensibi (SRP - Single Responsibility Principle):<\/strong> SOLID prensiplerinin ilk harfi olan SRP, her mod\u00fcl\u00fcn, s\u0131n\u0131f\u0131n veya bile\u015fenin yaln\u0131zca tek bir de\u011fi\u015fiklik nedenine sahip olmas\u0131 gerekti\u011fini belirtir. Bu, CRS'yi d\u00fc\u015f\u00fcrmek i\u00e7in en temel ve en etkili yakla\u015f\u0131md\u0131r. E\u011fer bir bile\u015fenin birden fazla sorumlulu\u011fu varsa, bu sorumluluklar\u0131 ayr\u0131 bile\u015fenlere veya mod\u00fcllere ay\u0131rarak SRP'ye uygun hale getirebiliriz. \u00d6rne\u011fin, veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 ayr\u0131 bir servise veya \u00f6zel bir hook'a, UI g\u00f6sterme mant\u0131\u011f\u0131n\u0131 ayr\u0131 bir g\u00f6rsel bile\u015fene ay\u0131rmak gibi.\n    <\/li>\n<li>\n        <strong>Kompozisyon (Composition) Kullan\u0131m\u0131:<\/strong> Kal\u0131t\u0131m (Inheritance) yerine kompozisyonu tercih etmek, daha esnek ve daha az ba\u011f\u0131ml\u0131 yap\u0131lar olu\u015fturmam\u0131z\u0131 sa\u011flar. K\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z bile\u015fenleri bir araya getirerek daha b\u00fcy\u00fck ve karma\u015f\u0131k i\u015flevler olu\u015fturmak, her bir alt bile\u015fenin CRS'sini d\u00fc\u015f\u00fck tutarken, ana bile\u015fenin de sadece bu alt bile\u015fenleri d\u00fczenleme sorumlulu\u011funu \u00fcstlenmesini sa\u011flar. Bu sayede, \"Tanr\u0131 Bile\u015fen\" olu\u015fumunu engelleriz.\n    <\/li>\n<li>\n        <strong>Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu (Dependency Injection - DI):<\/strong> Bile\u015fenlerin ihtiya\u00e7 duyduklar\u0131 ba\u011f\u0131ml\u0131l\u0131klar\u0131 (servisler, yard\u0131mc\u0131 fonksiyonlar vb.) kendilerinin olu\u015fturmas\u0131 yerine d\u0131\u015far\u0131dan almas\u0131n\u0131 sa\u011flamak, bile\u015fenlerin daha az bilgi sahibi olmas\u0131n\u0131 ve dolay\u0131s\u0131yla daha az sorumluluk \u00fcstlenmesini sa\u011flar. DI, test edilebilirli\u011fi art\u0131r\u0131r ve bile\u015fenlerin belirli bir uygulama ba\u011flam\u0131na s\u0131k\u0131ca ba\u011flanmas\u0131n\u0131 engeller. \u00d6zellikle Angular gibi framework'lerde bu do\u011fal bir yakla\u015f\u0131md\u0131r.\n    <\/li>\n<li>\n        <strong>Soyutlama ve Aray\u00fczler (Abstraction and Interfaces):<\/strong> Belirli bir i\u015flevselli\u011fin nas\u0131l uyguland\u0131\u011f\u0131na dair detaylar\u0131 gizleyerek, bile\u015fenlerin sadece soyut bir aray\u00fczle etkile\u015fime girmesini sa\u011flamak. Bu, bile\u015fenin sadece \"ne\" yap\u0131ld\u0131\u011f\u0131n\u0131 bilmesini, \"nas\u0131l\" yap\u0131ld\u0131\u011f\u0131n\u0131 bilmemesini sa\u011flar. \u00d6rne\u011fin, bir API servisi i\u00e7in bir aray\u00fcz tan\u0131mlayarak, bu servisin farkl\u0131 implementasyonlar\u0131 bile\u015feni etkilemeden de\u011fi\u015ftirilebilir.\n    <\/li>\n<li>\n        <strong>Delegasyon (Delegation):<\/strong> Bir bile\u015fenin, yapmas\u0131 gereken bir i\u015fi ba\u015fka bir bile\u015fene veya mod\u00fcle devretmesi. \u00d6rne\u011fin, bir ana bile\u015fen, bir listenin filtrelenmesi sorumlulu\u011funu ayr\u0131 bir filtreleme bile\u015fenine delege edebilir. Bu, ana bile\u015fenin sadece filtreleme bile\u015feninin sonucunu kullanmas\u0131n\u0131 sa\u011flar ve CRS'sini d\u00fc\u015f\u00fcr\u00fcr.\n    <\/li>\n<li>\n        <strong>\u00d6zel Hook'lar veya Servisler (Custom Hooks\/Services):<\/strong> \u00d6zellikle React ekosisteminde \u00f6zel hook'lar (<code>useProductData<\/code> \u00f6rne\u011fimizdeki gibi) veya di\u011fer framework'lerde servis katmanlar\u0131, durum y\u00f6netimi, veri \u00e7ekme, do\u011frulama gibi mant\u0131ksal sorumluluklar\u0131 UI bile\u015fenlerinden ay\u0131rmak i\u00e7in m\u00fckemmel ara\u00e7lard\u0131r. Bu, bile\u015fenlerin sadece g\u00f6rsel sunumla ilgili sorumluluklara odaklanmas\u0131n\u0131 sa\u011flar.\n    <\/li>\n<li>\n        <strong>Kapsay\u0131c\u0131 (Container) ve Sunumsal (Presentational) Bile\u015fenler:<\/strong> Bu desen, bile\u015fenleri iki kategoriye ay\u0131r\u0131r: Kapsay\u0131c\u0131 bile\u015fenler (ak\u0131ll\u0131 bile\u015fenler) veriyi y\u00f6netir ve mant\u0131\u011f\u0131 i\u00e7erir; Sunumsal bile\u015fenler (aptal bile\u015fenler) ise sadece veriyi al\u0131r ve g\u00f6r\u00fcnt\u00fcler, kendi i\u00e7lerinde neredeyse hi\u00e7 mant\u0131k bar\u0131nd\u0131rmazlar. Bu ayr\u0131m, sorumluluklar\u0131 net bir \u015fekilde b\u00f6lmeye yard\u0131mc\u0131 olur ve her bir bile\u015fenin CRS'sini d\u00fc\u015f\u00fck tutar.\n    <\/li>\n<\/ol>\n<div class=\"expert-tip\">\n    Uzman \u0130pucu: Kodunuzda \"callback hell\" veya i\u00e7 i\u00e7e API \u00e7a\u011fr\u0131lar\u0131 g\u00f6rmeye ba\u015flad\u0131\u011f\u0131n\u0131zda, bu genellikle yeni bir sorumlulu\u011fun ortaya \u00e7\u0131kt\u0131\u011f\u0131n\u0131n veya mevcut bir sorumlulu\u011fun a\u015f\u0131r\u0131 b\u00fcy\u00fcd\u00fc\u011f\u00fcn\u00fcn i\u015faretidir. Bu t\u00fcr durumlar\u0131 tespit etti\u011finizde hemen CRS analizi yap\u0131n.\n<\/div>\n<h3>Farkl\u0131 \u00c7er\u00e7evelerde CRS Uygulamalar\u0131: React, Angular, Vue ve \u00d6tesi<\/h3>\n<p>Bile\u015fen Sorumluluk Skoru'nun (CRS) en g\u00fczel yanlar\u0131ndan biri, onun tamamen framework-agnostik olmas\u0131d\u0131r. Yani, ister React, ister Angular, ister Vue, ister Svelte, isterse de backend'de bir Node.js mod\u00fcl\u00fc ile \u00e7al\u0131\u015f\u0131yor olun, CRS prensipleri ayn\u0131 \u015fekilde uygulanabilir. Temelde yatan yaz\u0131l\u0131m m\u00fchendisli\u011fi prensipleri, dil veya \u00e7er\u00e7eve se\u00e7iminden ba\u011f\u0131ms\u0131z olarak ge\u00e7erlili\u011fini korur. Ancak, her \u00e7er\u00e7eve, bu prensipleri uygulamak i\u00e7in farkl\u0131 ara\u00e7lar ve yakla\u015f\u0131mlar sunar. Bu b\u00f6l\u00fcmde, pop\u00fcler \u00f6n y\u00fcz \u00e7er\u00e7evelerinde CRS'i nas\u0131l d\u00fc\u015f\u00fcrebilece\u011fimize dair genel yakla\u015f\u0131mlara de\u011finece\u011fiz.<\/p>\n<h4>React Eko-sisteminde CRS<\/h4>\n<p>React'te \"Tanr\u0131 Bile\u015fen\"ler genellikle \u00e7ok fazla <code>useState<\/code>, <code>useEffect<\/code> hook'u i\u00e7eren, karma\u015f\u0131k render mant\u0131\u011f\u0131na sahip bile\u015fenler olarak kar\u015f\u0131m\u0131za \u00e7\u0131kar. CRS'i d\u00fc\u015f\u00fcrmek i\u00e7in \u015fu teknikler kullan\u0131labilir:<\/p>\n<ul>\n<li><strong>Custom Hook'lar:<\/strong> Veri \u00e7ekme, durum y\u00f6netimi, form do\u011frulama gibi mant\u0131ksal sorumluluklar\u0131 custom hook'lara ta\u015f\u0131yarak bile\u015fenlerin sadece UI sunumuna odaklanmas\u0131n\u0131 sa\u011flay\u0131n. \u00d6rne\u011fin, <code>useProductData<\/code> veya <code>useFormValidation<\/code> gibi hook'lar.<\/li>\n<li><strong>Higher-Order Components (HOC) \/ Render Props:<\/strong> Payla\u015f\u0131lan mant\u0131\u011f\u0131 bile\u015fenler aras\u0131nda yeniden kullanmak ve karma\u015f\u0131kl\u0131\u011f\u0131 da\u011f\u0131tmak i\u00e7in bu desenleri kullanabilirsiniz (ancak modern React'te genellikle custom hook'lar tercih edilir).<\/li>\n<li><strong>Kompozisyon:<\/strong> K\u00fc\u00e7\u00fck, odaklanm\u0131\u015f bile\u015fenler olu\u015fturup bunlar\u0131 ana bile\u015fen i\u00e7inde bir araya getirin. <code>ProductDisplay<\/code>, <code>AddToCartButton<\/code> gibi alt bile\u015fenler buna iyi bir \u00f6rnektir.<\/li>\n<\/ul>\n<h4>Angular Eko-sisteminde CRS<\/h4>\n<p>Angular, mod\u00fcler yap\u0131ya ve ba\u011f\u0131ml\u0131l\u0131k enjeksiyonuna (DI) do\u011fal olarak yatk\u0131n bir \u00e7er\u00e7evedir. Bu, CRS'yi d\u00fc\u015f\u00fck tutmak i\u00e7in harika f\u0131rsatlar sunar:<\/p>\n<ul>\n<li><strong>Servisler:<\/strong> Veri i\u015fleme, API \u00e7a\u011fr\u0131lar\u0131, durum y\u00f6netimi, i\u015f mant\u0131\u011f\u0131 gibi t\u00fcm g\u00f6revleri bile\u015fenlerden ay\u0131rarak Angular servislerine ta\u015f\u0131y\u0131n. Bile\u015fenler sadece servisleri enjekte edip kullanmal\u0131, mant\u0131\u011f\u0131 kendileri uygulamamal\u0131d\u0131r.<\/li>\n<li><strong>Pipe'lar ve Direktifler:<\/strong> Veri formatlama veya DOM manip\u00fclasyonu gibi sunumsal sorumluluklar\u0131 pipe'lara veya \u00f6zel direktiflere delege edin.<\/li>\n<li><strong>Mod\u00fcller:<\/strong> Uygulaman\u0131z\u0131, her biri belirli bir i\u015flevsel alan\u0131 temsil eden daha k\u00fc\u00e7\u00fck \u00f6zellik mod\u00fcllerine ay\u0131r\u0131n. Bu, bile\u015fenlerin sorumluluklar\u0131n\u0131 do\u011fal olarak s\u0131n\u0131rlar.<\/li>\n<li><strong>Smart\/Dumb Component Pattern:<\/strong> Kapsay\u0131c\u0131 bile\u015fenler (Smart) servisleri kullanarak veriyi al\u0131r ve mant\u0131\u011f\u0131 y\u00f6netirken, sunumsal bile\u015fenler (Dumb) sadece <code>@Input()<\/code> ve <code>@Output()<\/code> ile ileti\u015fim kurarak veriyi g\u00f6r\u00fcnt\u00fcler.<\/li>\n<\/ul>\n<h4>Vue.js Eko-sisteminde CRS<\/h4>\n<p>Vue.js, esnekli\u011fi ile bilinir ve CRS'yi y\u00f6netmek i\u00e7in hem Options API hem de Composition API'de \u00e7e\u015fitli y\u00f6ntemler sunar:<\/p>\n<ul>\n<li><strong>Composable'lar (Composition API):<\/strong> React'teki custom hook'lara benzer \u015fekilde, mant\u0131ksal sorumluluklar\u0131 yeniden kullan\u0131labilir composable fonksiyonlara ta\u015f\u0131y\u0131n (\u00f6rn: <code>useFetchData.js<\/code>, <code>useFormValidation.js<\/code>).<\/li>\n<li><strong>Mixins (Options API):<\/strong> Payla\u015f\u0131lan i\u015flevselli\u011fi farkl\u0131 bile\u015fenlere enjekte etmek i\u00e7in mixin'leri kullanabilirsiniz, ancak Composition API genellikle daha tercih edilen ve daha temiz bir yakla\u015f\u0131md\u0131r.<\/li>\n<li><strong>Props ve Emit Olaylar\u0131:<\/strong> Bile\u015fenler aras\u0131nda net bir veri ak\u0131\u015f\u0131 ve ileti\u015fim mekanizmas\u0131 kurarak her bile\u015fenin kendi sorumluluk alan\u0131nda kalmas\u0131n\u0131 sa\u011flay\u0131n.<\/li>\n<li><strong>Slot'lar:<\/strong> Bile\u015fenlerin i\u00e7eri\u011fini dinamik olarak enjekte etmek i\u00e7in slot'lar\u0131 kullanarak, bir bile\u015fenin kendi i\u00e7eri\u011finin d\u00fczeninden ba\u011f\u0131ms\u0131z olmas\u0131n\u0131 sa\u011flay\u0131n ve sunumsal sorumluluklar\u0131 d\u0131\u015fa aktar\u0131n.<\/li>\n<\/ul>\n<p>A\u015fa\u011f\u0131daki tablo, farkl\u0131 \u00e7er\u00e7evelerde CRS'i d\u00fc\u015f\u00fcrmek i\u00e7in kullan\u0131labilecek yayg\u0131n desenleri \u00f6zetlemektedir:<\/p>\n<table>\n<thead>\n<tr>\n<th>Desen \/ \u0130lke<\/th>\n<th>React Kar\u015f\u0131l\u0131\u011f\u0131<\/th>\n<th>Angular Kar\u015f\u0131l\u0131\u011f\u0131<\/th>\n<th>Vue.js Kar\u015f\u0131l\u0131\u011f\u0131<\/th>\n<th>Amac\u0131<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Desen \/ \u0130lke\">Mant\u0131k Ay\u0131rma<\/td>\n<td data-label=\"React Kar\u015f\u0131l\u0131\u011f\u0131\">Custom Hooks<\/td>\n<td data-label=\"Angular Kar\u015f\u0131l\u0131\u011f\u0131\">Services<\/td>\n<td data-label=\"Vue.js Kar\u015f\u0131l\u0131\u011f\u0131\">Composables<\/td>\n<td data-label=\"Amac\u0131\">Veri \u00e7ekme, durum y\u00f6netimi gibi i\u015f mant\u0131\u011f\u0131n\u0131 UI'dan ay\u0131rmak.<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Desen \/ \u0130lke\">UI Ay\u0131rma<\/td>\n<td data-label=\"React Kar\u015f\u0131l\u0131\u011f\u0131\">Kompozisyon (K\u00fc\u00e7\u00fck Bile\u015fenler)<\/td>\n<td data-label=\"Angular Kar\u015f\u0131l\u0131\u011f\u0131\">Dumb Components, Pipe'lar, Directifler<\/td>\n<td data-label=\"Vue.js Kar\u015f\u0131l\u0131\u011f\u0131\">Kompozisyon, Slot'lar<\/td>\n<td data-label=\"Amac\u0131\">G\u00f6rsel sunumu ve etkile\u015fimleri daha k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir par\u00e7alara b\u00f6lmek.<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Desen \/ \u0130lke\">Mod\u00fclerlik<\/td>\n<td data-label=\"React Kar\u015f\u0131l\u0131\u011f\u0131\">Klas\u00f6r Yap\u0131s\u0131, Shared Components<\/td>\n<td data-label=\"Angular Kar\u015f\u0131l\u0131\u011f\u0131\">Feature Modules<\/td>\n<td data-label=\"Vue.js Kar\u015f\u0131l\u0131\u011f\u0131\">Klas\u00f6r Yap\u0131s\u0131, Bile\u015fen K\u00fct\u00fcphaneleri<\/td>\n<td data-label=\"Amac\u0131\">Uygulaman\u0131n farkl\u0131 k\u0131s\u0131mlar\u0131n\u0131 izole edilmi\u015f birimlere ay\u0131rmak.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u00d6zetle, \u00e7er\u00e7eveden ba\u011f\u0131ms\u0131z olarak, ana fikir ayn\u0131d\u0131r: Sorumluluklar\u0131 belirleyin, \u00f6l\u00e7\u00fcn ve a\u015f\u0131r\u0131 y\u00fcklenmi\u015f bile\u015fenleri daha k\u00fc\u00e7\u00fck, daha odakl\u0131 par\u00e7alara ay\u0131rmak i\u00e7in \u00e7er\u00e7evenizin sundu\u011fu en iyi ara\u00e7lar\u0131 kullan\u0131n. Bu sayede, \"Tanr\u0131 Bile\u015fen\"lerden kurtulacak ve daha temiz, daha s\u00fcrd\u00fcr\u00fclebilir bir kod taban\u0131 olu\u015fturacaks\u0131n\u0131z.<\/p>\n<h2>Sonu\u00e7: Temiz Kod ve S\u00fcrd\u00fcr\u00fclebilir Geli\u015ftirme \u0130\u00e7in CRS<\/h2>\n<p>\"Tanr\u0131 Bile\u015fen\"ler, yaz\u0131l\u0131m projelerinin gizli d\u00fc\u015fmanlar\u0131d\u0131r. Ba\u015flang\u0131\u00e7ta masum gibi g\u00f6r\u00fcnen bu bile\u015fenler, zamanla b\u00fcy\u00fcyerek bak\u0131m maliyetlerini art\u0131r\u0131r, test s\u00fcre\u00e7lerini karma\u015f\u0131kla\u015ft\u0131r\u0131r ve geli\u015ftirme h\u0131z\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr. Bu makalede ele ald\u0131\u011f\u0131m\u0131z Bile\u015fen Sorumluluk Skoru (CRS), bu g\u00f6r\u00fcnmez tehlikeyi somut bir metrikle \u00f6l\u00e7mek ve y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc, framework-agnostik bir ara\u00e7 sunar.<\/p>\n<p>CRS, bile\u015fenlerinizi de\u011ferlendirirken size objektif bir bak\u0131\u015f a\u00e7\u0131s\u0131 sa\u011flar ve refactoring ihtiyac\u0131n\u0131 net bir \u015fekilde ortaya koyar. D\u00fc\u015f\u00fck bir CRS de\u011feri, bile\u015feninizin Tek Sorumluluk Prensibi'ne uygun oldu\u011funu, daha kolay test edilebilir, daha yeniden kullan\u0131labilir ve daha anla\u015f\u0131l\u0131r oldu\u011funu g\u00f6sterir. Vaka analizimizde g\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, y\u00fcksek CRS'e sahip bir \"Tanr\u0131 Bile\u015fen\"i par\u00e7alara ay\u0131rarak ve her bir par\u00e7ay\u0131 kendi sorumluluk alan\u0131na odaklayarak, genel kod kalitesini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabiliriz.<\/p>\n<p>Unutmay\u0131n, yaz\u0131l\u0131m geli\u015ftirme s\u00fcrekli bir evrim s\u00fcrecidir. CRS'yi bir kez hesaplay\u0131p b\u0131rakmak yerine, onu geli\u015ftirme s\u00fcrecinizin bir par\u00e7as\u0131 haline getirmek \u00f6nemlidir. Yeni \u00f6zellikler eklenirken veya mevcut kodda de\u011fi\u015fiklik yap\u0131l\u0131rken bile\u015fenlerin sorumluluklar\u0131n\u0131 g\u00f6zden ge\u00e7irmek, \"Tanr\u0131 Bile\u015fen\"lerin yeniden ortaya \u00e7\u0131kmas\u0131n\u0131 engellemenin en iyi yoludur. Mod\u00fcler ve bak\u0131m\u0131 kolay bir kod taban\u0131 olu\u015fturmak, sadece bug\u00fcn\u00fcn sorunlar\u0131n\u0131 \u00e7\u00f6zmekle kalmaz, ayn\u0131 zamanda gelecekteki geli\u015ftirmeler i\u00e7in sa\u011flam bir temel atar. Bu yakla\u015f\u0131m, ekip verimlili\u011fini art\u0131r\u0131r, yeni \u00fcyelerin adaptasyonunu kolayla\u015ft\u0131r\u0131r ve uzun vadede projenizin ba\u015far\u0131s\u0131na katk\u0131da bulunur.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>1. CRS'i hangi s\u0131kl\u0131kla hesaplamal\u0131y\u0131m?<\/strong><\/p>\n<p>CRS'yi d\u00fczenli aral\u0131klarla (\u00f6rne\u011fin, her sprint sonunda veya b\u00fcy\u00fck bir \u00f6zellik geli\u015ftirmesi tamamland\u0131\u011f\u0131nda) veya kritik bile\u015fenlerde \u00f6nemli de\u011fi\u015fiklikler yap\u0131ld\u0131\u011f\u0131nda hesaplamak iyi bir uygulamad\u0131r. Ayr\u0131ca, yeni bir bile\u015fen olu\u015fturdu\u011funuzda veya mevcut bir bile\u015fenin \u00e7ok karma\u015f\u0131k hissettirdi\u011fini d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fczde de hemen kontrol edebilirsiniz. Otomatik ara\u00e7larla entegrasyon, bu s\u00fcreci daha verimli hale getirebilir.<\/p>\n<p><strong>2. \u0130deal bir CRS de\u011feri nedir?<\/strong><\/p>\n<p>Genellikle, bir bile\u015fen i\u00e7in ideal CRS de\u011feri 1 ile 3 aras\u0131ndad\u0131r. Yani, bir bile\u015fenin 1 ila 3 aras\u0131nda farkl\u0131 sorumlulu\u011fa sahip olmas\u0131 beklenir. Ancak bu bir kuraldan \u00e7ok bir rehberdir; baz\u0131 karma\u015f\u0131k domain bile\u015fenleri i\u00e7in bu de\u011fer biraz daha y\u00fcksek olabilir. \u00d6nemli olan, ekibinizin kendi ba\u011flam\u0131na g\u00f6re \"kabul edilebilir\" bir \u00fcst s\u0131n\u0131r belirlemesi ve bu s\u0131n\u0131r\u0131 a\u015fan bile\u015fenleri refactoring i\u00e7in i\u015faretlemesidir.<\/p>\n<p><strong>3. CRS'i otomatik olarak hesaplayabilir miyim?<\/strong><\/p>\n<p>Do\u011frudan CRS'i hesaplayan genel bir otomatik ara\u00e7 bulunmamaktad\u0131r \u00e7\u00fcnk\u00fc \"sorumluluk\" kavram\u0131 kod metrikleri kadar net de\u011fildir ve bazen insan yorumu gerektirir. Ancak, AST (Abstract Syntax Tree) analizi yapan veya belirli kal\u0131plar\u0131 (\u00f6rn: \u00e7ok say\u0131da <code>useEffect<\/code> ba\u011f\u0131ml\u0131l\u0131\u011f\u0131, \u00e7ok fazla prop ge\u00e7me) tespit eden statik analiz ara\u00e7lar\u0131, potansiyel \"Tanr\u0131 Bile\u015fen\" adaylar\u0131n\u0131 bulman\u0131za yard\u0131mc\u0131 olabilir. Daha sonra bu adaylar\u0131n CRS'ini manuel olarak de\u011ferlendirebilirsiniz.<\/p>\n<p><strong>4. CRS sadece \u00f6n y\u00fcz (frontend) geli\u015ftirme i\u00e7in mi ge\u00e7erlidir?<\/strong><\/p>\n<p>Kesinlikle hay\u0131r. CRS, yaz\u0131l\u0131m m\u00fchendisli\u011finin temel bir prensibi olan \"Tek Sorumluluk Prensibi\"ne dayan\u0131r ve bu prensip \u00f6n y\u00fcz, arka y\u00fcz, mobil veya herhangi bir yaz\u0131l\u0131m mimarisi i\u00e7in ge\u00e7erlidir. Bir backend servisi, bir veritaban\u0131 s\u0131n\u0131f\u0131 veya bir i\u015f mant\u0131\u011f\u0131 mod\u00fcl\u00fc de birden fazla sorumlulu\u011fu \u00fcstlenerek \"Tanr\u0131 Bile\u015fen\" haline gelebilir. CRS, bu t\u00fcr durumlar\u0131 tespit etmek ve d\u00fczeltmek i\u00e7in evrensel bir k\u0131lavuzdur.<\/p>\n","protected":false},"excerpt":{"rendered":"Yaz\u0131l\u0131m geli\u015ftirmede, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, bile\u015fenlerin sorumluluklar\u0131n\u0131 y\u00f6netmek bazen i\u00e7inden \u00e7\u0131k\u0131lmaz bir hal alabilir. Bu makale,&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-35370","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Taming the &quot;God Component&quot;: A Framework-Agnostic Guide to the Component Responsibility Score (CRS)<\/title>\n<meta name=\"description\" content=\"Yaz\u0131l\u0131m geli\u015ftirmede, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, bile\u015fenlerin sorumluluklar\u0131n\u0131 y\u00f6netmek bazen i\u00e7inden \u00e7\u0131k\u0131lmaz bir hal alabilir. Bu makale, &quot;Tanr\u0131 Bile\u015fen&quot; sorununu ve Bile\u015fen Sorumluluk Skoru (CRS) kavram\u0131n\u0131 derinlemesine inceleyerek projelerinizde mod\u00fclerli\u011fi nas\u0131l art\u0131rabilece\u011finizi g\u00f6steriyor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Taming the &quot;God Component&quot;: A Framework-Agnostic Guide to the Component Responsibility Score (CRS)\" \/>\n<meta property=\"og:description\" content=\"Yaz\u0131l\u0131m geli\u015ftirmede, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, bile\u015fenlerin sorumluluklar\u0131n\u0131 y\u00f6netmek bazen i\u00e7inden \u00e7\u0131k\u0131lmaz bir hal alabilir. Bu makale, &quot;Tanr\u0131 Bile\u015fen&quot; sorununu ve Bile\u015fen Sorumluluk Skoru (CRS) kavram\u0131n\u0131 derinlemesine inceleyerek projelerinizde mod\u00fclerli\u011fi nas\u0131l art\u0131rabilece\u011finizi g\u00f6steriyor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-28T20:01:10+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Taming the &#8220;God Component&#8221;: A Framework-Agnostic Guide to the Component Responsibility Score (CRS)\",\"datePublished\":\"2025-11-28T20:01:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/\"},\"wordCount\":4231,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/\",\"name\":\"Taming the \\\"God Component\\\": A Framework-Agnostic Guide to the Component Responsibility Score (CRS)\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-28T20:01:10+00:00\",\"description\":\"Yaz\u0131l\u0131m geli\u015ftirmede, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, bile\u015fenlerin sorumluluklar\u0131n\u0131 y\u00f6netmek bazen i\u00e7inden \u00e7\u0131k\u0131lmaz bir hal alabilir. Bu makale, \\\"Tanr\u0131 Bile\u015fen\\\" sorununu ve Bile\u015fen Sorumluluk Skoru (CRS) kavram\u0131n\u0131 derinlemesine inceleyerek projelerinizde mod\u00fclerli\u011fi nas\u0131l art\u0131rabilece\u011finizi g\u00f6steriyor.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Taming the &#8220;God Component&#8221;: A Framework-Agnostic Guide to the Component Responsibility Score (CRS)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Taming the \"God Component\": A Framework-Agnostic Guide to the Component Responsibility Score (CRS)","description":"Yaz\u0131l\u0131m geli\u015ftirmede, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, bile\u015fenlerin sorumluluklar\u0131n\u0131 y\u00f6netmek bazen i\u00e7inden \u00e7\u0131k\u0131lmaz bir hal alabilir. Bu makale, \"Tanr\u0131 Bile\u015fen\" sorununu ve Bile\u015fen Sorumluluk Skoru (CRS) kavram\u0131n\u0131 derinlemesine inceleyerek projelerinizde mod\u00fclerli\u011fi nas\u0131l art\u0131rabilece\u011finizi g\u00f6steriyor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/","og_locale":"tr_TR","og_type":"article","og_title":"Taming the \"God Component\": A Framework-Agnostic Guide to the Component Responsibility Score (CRS)","og_description":"Yaz\u0131l\u0131m geli\u015ftirmede, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, bile\u015fenlerin sorumluluklar\u0131n\u0131 y\u00f6netmek bazen i\u00e7inden \u00e7\u0131k\u0131lmaz bir hal alabilir. Bu makale, \"Tanr\u0131 Bile\u015fen\" sorununu ve Bile\u015fen Sorumluluk Skoru (CRS) kavram\u0131n\u0131 derinlemesine inceleyerek projelerinizde mod\u00fclerli\u011fi nas\u0131l art\u0131rabilece\u011finizi g\u00f6steriyor.","og_url":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-28T20:01:10+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"24 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Taming the &#8220;God Component&#8221;: A Framework-Agnostic Guide to the Component Responsibility Score (CRS)","datePublished":"2025-11-28T20:01:10+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/"},"wordCount":4231,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/","url":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/","name":"Taming the \"God Component\": A Framework-Agnostic Guide to the Component Responsibility Score (CRS)","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-28T20:01:10+00:00","description":"Yaz\u0131l\u0131m geli\u015ftirmede, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, bile\u015fenlerin sorumluluklar\u0131n\u0131 y\u00f6netmek bazen i\u00e7inden \u00e7\u0131k\u0131lmaz bir hal alabilir. Bu makale, \"Tanr\u0131 Bile\u015fen\" sorununu ve Bile\u015fen Sorumluluk Skoru (CRS) kavram\u0131n\u0131 derinlemesine inceleyerek projelerinizde mod\u00fclerli\u011fi nas\u0131l art\u0131rabilece\u011finizi g\u00f6steriyor.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Taming the &#8220;God Component&#8221;: A Framework-Agnostic Guide to the Component Responsibility Score (CRS)"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35370"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35370\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}