Yazılım geliştirmede, özellikle büyük ve karmaşık uygulamalarda, bileşenlerin sorumluluklarını yönetmek bazen içinden çıkılmaz bir hal alabilir. Bu makale, “Tanrı Bileşen” sorununu ve Bileşen Sorumluluk Skoru (CRS) kavramını derinlemesine inceleyerek projelerinizde modülerliği nasıl artırabileceğinizi gösteriyor.

Her geliştiricinin kariyerinde en az bir kez karşılaştığı, uygulamadaki birçok işlevi tek başına üstlenen, aşırı büyük ve karmaşık bir bileşen türü vardır: “Tanrı Bileşen” (God Component). Bu tür bileşenler, adeta bir tanrı gibi her şeyi bilir, her şeye müdahale eder ve uygulamanın en kritik işlevlerini merkezileştirir. Başlangıçta basit bir ihtiyacı karşılamak üzere tasarlanmış olsa da, zamanla yeni özellikler ve gereksinimlerle şişerek devasa bir yapıya dönüşürler. Örneğin, bir kullanıcı arayüzü (UI) bileşeni düşünün; başlangıçta sadece veri göstermekle yükümlüyken, zamanla veri alma, gönderme, durum yönetimi, doğrulama, hatta yetkilendirme gibi onlarca farklı sorumluluğu üzerine alabilir. Bu durum, yazılım geliştirme sürecinde ciddi sorunlara yol açar.

Peki, bir “Tanrı Bileşen”in ortaya çıkardığı sorunlar nelerdir? Öncelikle, bakım kolaylığını derinden etkiler. Tek bir dosyada yüzlerce, hatta binlerce satır kodun bir araya gelmesi, herhangi bir hatayı bulmayı veya yeni bir özellik eklemeyi kabusa çevirir. Kodun hangi kısmının hangi işlevi yerine getirdiğini anlamak bile önemli bir çaba gerektirir. İkinci olarak, test edilebilirlik büyük ölçüde azalır. Çok sayıda sorumluluğu olan bir bileşeni izole bir şekilde test etmek neredeyse imkansızdır. Her test, bileşenin tüm bağımlılıklarını ve işlevlerini dikkate almak zorunda kalır, bu da testlerin yavaşlamasına ve kırılgan hale gelmesine neden olur. Üçüncü olarak, yeniden kullanılabilirlik ortadan kalkar. Bir “Tanrı Bileşen” o kadar çok özel işlevi içerir ki, uygulamanın farklı bir yerinde veya başka bir projede bu bileşeni doğrudan kullanmak genellikle mümkün olmaz. Çünkü ihtiyaç duyulmayan birçok ek işlevselliği de beraberinde getirir. Son olarak, ölçeklenebilirlik ve performans da olumsuz etkilenir. Gereksiz bağımlılıklar ve karmaşık mantık, uygulamanın yavaşlamasına ve hatta bellek sorunlarına yol açabilir. Bu yüzden, yazılım mimarisi açısından sağlıklı bir yapı kurmak ve sürdürülebilir bir geliştirme süreci sağlamak için bu tür bileşenlerden kaçınmak kritik öneme sahiptir. Bu sorunun üstesinden gelmek için sistemli bir yaklaşıma ihtiyacımız var ve burada devreye Bileşen Sorumluluk Skoru (CRS) giriyor.

Bileşen Sorumluluk Skoru (CRS) Nedir ve Neden Önemlidir?

Bileşen Sorumluluk Skoru (CRS), bir bileşenin ne kadar fazla sorumluluğa sahip olduğunu niceliksel olarak ölçmek için geliştirilmiş framework-agnostik bir ölçüttür. Basitçe ifade etmek gerekirse, bir bileşenin sahip olduğu farklı işlevsel veya mantıksal sorumlulukların sayısının bir göstergesidir. Amacımız, CRS değerini mümkün olduğunca düşük tutmaktır; çünkü düşük bir CRS, bileşenin daha odaklı, daha anlaşılır, daha test edilebilir ve dolayısıyla daha sürdürülebilir olduğu anlamına gelir. Bu skor, “Tek Sorumluluk Prensibi” (Single Responsibility Principle – SRP) gibi SOLID prensiplerinin somut bir uygulamasını sunar ve yazılım kalitesini artırmak için pratik bir yol haritası çizer.

CRS’in önemi birkaç ana başlıkta özetlenebilir:

1. Nesnel Değerlendirme: “Bu bileşen çok mu büyük?” sorusuna “Evet, çünkü CRS değeri 7, hedefimiz 2’nin altında olması!” gibi somut bir cevap vermemizi sağlar. Bu, takım içinde daha net tartışmalar yapılmasına ve refactoring kararlarının daha kolay alınmasına yardımcı olur.
2. Erken Uyarı Sistemi: Geliştirme sürecinin başlarında bileşenlerin CRS değerlerini düzenli olarak kontrol ederek, “Tanrı Bileşen” oluşumunu henüz başlangıç aşamasında tespit edip önleyebiliriz. Bu, maliyetli ve zaman alıcı refactoring işlemlerinden kaçınmamızı sağlar.
3. Sürdürülebilirliğin Anahtarı: Düşük CRS’li bileşenler, hata ayıklamayı kolaylaştırır, yeni özellik ekleme sürecini hızlandırır ve genel olarak kod tabanının yaşam döngüsünü uzatır. Her bileşen kendi küçük işini en iyi şekilde yapmaya odaklanır.
4. Ekip Verimliliği: Bileşenler daha küçük ve anlaşılır olduğunda, farklı ekip üyeleri aynı bileşen üzerinde daha az çakışma ile çalışabilir. Ayrıca, yeni ekip üyelerinin projeye adaptasyon süresi kısalır çünkü kodun karmaşıklığı azalır.
5. Framework-Agnostik Yaklaşım: CRS, belirli bir programlama diline, kütüphaneye veya framework’e (React, Angular, Vue, Svelte vb.) bağlı değildir. Temel yazılım mühendisliği prensipleri üzerine inşa edildiği için her türlü projede uygulanabilir. Bu evrensellik, onu çok değerli bir araç haline getirir.

CRS, karmaşık yazılım metrikleri olan Döngüsel Karmaşıklık (Cyclomatic Complexity) veya Kaynak Kodu Satır Sayısı (SLOC) gibi değerlere kıyasla daha sezgisel ve doğrudan “sorumluluk” kavramına odaklanır. Bir bileşenin ne kadar iş yaptığını değil, kaç farklı *türde* iş yaptığını ölçmeyi hedefler. Bu sayede, “Tanrı Bileşen” sendromunun yaygın olduğu projelerde, kod kalitesini artırmak ve daha sağlıklı bir mimari oluşturmak için güçlü bir başlangıç noktası sunar. Şimdi CRS’i nasıl hesaplayacağımıza geçelim.

CRS Nasıl Hesaplanır? Adım Adım Yaklaşım

Bileşen Sorumluluk Skoru (CRS) hesaplamak için standart bir “tek doğru formül” yoktur, çünkü sorumlulukların tanımlanması kısmen sübjektif bir süreçtir. Ancak, pratik bir yaklaşım benimseyerek tutarlı ve faydalı bir skor elde edebiliriz. İşte adım adım bir hesaplama yöntemi:

1. Bileşeninizi Belirleyin: Analiz etmek istediğiniz bileşeni seçin. Bu bir React bileşeni, bir Angular servisi, bir Vue bileşeni veya herhangi bir sınıfla temsil edilen bir modül olabilir.
2. Tüm Sorumlulukları Listeleyin: Bileşenin gerçekleştirdiği tüm farklı işlevleri, eylemleri ve etkileşimleri belirleyin. Bu aşamada mümkün olduğunca detaylı olmaya çalışın. Bir sorumluluk, genellikle bir “neden değişme” prensibiyle tanımlanır. Yani, “Bu bileşen neden değişmeli?” sorusunun her farklı cevabı, ayrı bir sorumluluk olarak kabul edilebilir.
   • Veri Gösterme (Rendering Data): Bileşenin temel amacı olan veriyi kullanıcıya sunma.
   • Veri Alma (Fetching Data): API çağrıları veya diğer kaynaklardan veri çekme.
   • Veri Gönderme (Submitting Data): Form gönderimi veya diğer kullanıcı eylemleriyle veri kaydetme/güncelleme.
   • Durum Yönetimi (State Management): Bileşenin kendi iç durumunu (örn: bir formun input değerleri, bir menünün açık/kapalı durumu) veya global durumu yönetme.
   • Girdi Doğrulama (Input Validation): Kullanıcı girdilerini kontrol etme.
   • Yetkilendirme/İzin Kontrolü (Authorization/Permission Check): Kullanıcının belirli bir eylemi gerçekleştirme veya veriyi görme iznine sahip olup olmadığını kontrol etme.
   • Olay Yönetimi (Event Handling): Kullanıcı etkileşimlerini (tıklama, yazma vb.) işleme.
   • Görsel Etkileşimler/Animasyonlar (Visual Interactions/Animations): UI animasyonları veya karmaşık görsel efektler.
   • Depolama İşlemleri (Storage Operations): LocalStorage, SessionStorage gibi yerel depolama birimleriyle etkileşim.
   • Routing/Navigasyon (Routing/Navigation): Uygulama içi sayfa yönlendirmeleri.
3. Sorumlulukları Niteliksel Olarak Değerlendirin: Her bir sorumluluğun karmaşıklığına veya etkisine göre bir ağırlık atayabilirsiniz. Basit bir “Evet/Hayır” değerlendirmesi (her sorumluluk 1 puan) başlangıç için yeterli olsa da, daha gelişmiş bir sistemde bazı sorumluluklar (örn: veri alma/gönderme) daha yüksek puan alabilirken, diğerleri (örn: basit veri gösterme) daha düşük puan alabilir. Ancak genelde, her farklı sorumluluk bir birim olarak sayılır.
4. Skoru Hesaplayın: Tüm belirlediğiniz sorumlulukların sayısını toplayın. Bu, bileşeninizin CRS değeridir.

Örnek Hesaplama:

Bir UserProfile bileşenimiz olduğunu varsayalım. Bu bileşen hem kullanıcının profil bilgilerini gösteriyor, hem bu bilgileri bir API’den çekiyor, hem de kullanıcının profilini düzenlemesine olanak tanıyan bir formu yönetiyor. Ayrıca, kullanıcının avatarını yükleme ve gösterimini de kendisi hallediyor.

• Veri Gösterme (Profil bilgileri): 1 puan
• Veri Alma (API’den profil çekme): 1 puan
• Veri Gönderme (Profil güncelleme): 1 puan
• Durum Yönetimi (Form inputları ve yükleme durumu): 1 puan
• Girdi Doğrulama (Form inputları için): 1 puan
• Dosya Yükleme (Avatar yükleme): 1 puan
• Görsel Etkileşimler (Avatar önizlemesi): 1 puan

Bu durumda, UserProfile bileşeninin CRS değeri 7 olacaktır. Bu skor, tek bir bileşen için oldukça yüksektir ve bu bileşenin “Tanrı Bileşen” olma eğiliminde olduğunu gösterir. Ideal olarak, çoğu bileşen için CRS değerinin 1-3 arasında olması hedeflenmelidir. Şimdi bu tür bir bileşeni nasıl dönüştürebileceğimize dair bir vaka analizine göz atalım.

Vaka Analizi: Bir “Tanrı Bileşen”in CRS Değeri ve Dönüşümü

Vaka: E-ticaret sitemizdeki ProductDetailPage (Ürün Detay Sayfası) bileşeni, başlangıçta sadece ürün bilgilerini göstermek için tasarlanmıştı. Ancak zamanla, ürünün varyantlarını seçme, sepete ekleme, yorumları gösterme, yorum ekleme, ürünle ilgili öneriler sunma ve hatta “Favorilere Ekle” gibi birçok farklı işlevi tek başına yöneten bir “Tanrı Bileşen” haline geldi. Ekip, bu bileşende değişiklik yapmaktan çekiniyor, her güncelleme yeni bir hatayı tetikliyor ve performans sorunları yaşanıyordu.

Başlangıç Durumu: Yüksek CRS Değeri

ProductDetailPage bileşeninin mevcut sorumluluklarını listeleyelim:

1. Ürün bilgilerini gösterme (isim, fiyat, açıklama) – 1 puan
2. Ürün varyantlarını seçme ve yönetme – 1 puan
3. Sepete ürün ekleme mantığı – 1 puan
4. Ürün yorumlarını API’den çekme – 1 puan
5. Ürün yorumlarını gösterme – 1 puan
6. Yeni yorum gönderme formu ve mantığı – 1 puan
7. İlgili ürün önerilerini API’den çekme – 1 puan
8. İlgili ürün önerilerini gösterme – 1 puan
9. “Favorilere Ekle” butonu mantığı (API ile etkileşim) – 1 puan
10. Ürün görsel galerisi yönetimi (büyük/küçük resim geçişleri) – 1 puan
11. Sayfa yükleme ve hata durumlarını yönetme – 1 puan

Initial CRS: 11. Bu değer, beklendiği gibi oldukça yüksek ve bileşenin adeta bir monolit gibi davrandığını gösteriyor. İşte bu bileşenden basitleştirilmiş bir kod parçası:

// ProductDetailPage.js (Kısaltılmış "Tanrı Bileşen" örneği)
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ProductDetailPage({ productId }) {
    const [product, setProduct] = useState(null);
    const [variants, setVariants] = useState([]);
    const [selectedVariant, setSelectedVariant] = useState(null);
    const [comments, setComments] = useState([]);
    const [newCommentText, setNewCommentText] = useState('');
    const [relatedProducts, setRelatedProducts] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    // 1. Ürün verilerini çekme
    // 4. Yorumları çekme
    // 7. İlgili ürünleri çekme
    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            try {
                const productRes = await axios.get(/api/products/${productId});
                setProduct(productRes.data);
                setVariants(productRes.data.variants);
                setSelectedVariant(productRes.data.variants[0]);

                const commentsRes = await axios.get(/api/products/${productId}/comments);
                setComments(commentsRes.data);

                const relatedRes = await axios.get(/api/products/${productId}/related);
                setRelatedProducts(relatedRes.data);
            } catch (err) {
                setError(err);
            } finally {
                setIsLoading(false);
            }
        };
        fetchData();
    }, [productId]);

    // 3. Sepete Ekle mantığı
    const handleAddToCart = () => {
        // Sepete ekleme API çağrısı ve bildirim mantığı
        console.log(Ürün ${product.name}, varyant ${selectedVariant.name} sepete eklendi.);
    };

    // 6. Yeni yorum gönderme mantığı
    const handleAddComment = async () => {
        if (!newCommentText.trim()) return;
        try {
            const res = await axios.post(/api/products/${productId}/comments, { text: newCommentText });
            setComments([...comments, res.data]);
            setNewCommentText('');
        } catch (err) {
            console.error("Yorum eklenemedi", err);
        }
    };

    // 9. Favorilere Ekle mantığı
    const handleAddToFavorites = () => {
        // Favorilere ekleme API çağrısı
        console.log(${product.name} favorilere eklendi.);
    };

    if (isLoading) return 
Yükleniyor...
;
    if (error) return 
Hata: {error.message}
;
    if (!product) return null;

    return (
        

            {/* 1. Ürün bilgilerini gösterme */}
            
{product.name}
            
Fiyat: {product.price}
             {/* 10. Görsel yönetimi */}

            {/* 2. Varyant seçimi */}
             setSelectedVariant(variants.find(v => v.id === e.target.value))}>
                {variants.map(v => {v.name})}
            

            Sepete Ekle
            Favorilere Ekle

            
Yorumlar
            {/* 5. Yorumları gösterme */}
            {comments.map(comment => (
                
{comment.text}
            ))}
             setNewCommentText(e.target.value)} />
            <button onClick={handleAddComment}>Yorum Ekle</button>

            <h2>İlgili Ürünler</h2>
            {/* 8. İlgili ürünleri gösterme */}
            {relatedProducts.map(rp => (
                <div key={rp.id}>{rp.name}</div>
            ))}
        </div>
    );
}

export default ProductDetailPage;
</pre>
<p></code></p>
<h4>Dönüşüm: Refactoring ve Düşük CRS</h4>
<p>Bu bileşeni, her bir sorumluluğu ayrı bir modüle veya daha küçük bir bileşene delege ederek refactor edebiliriz. Amacımız, <code>ProductDetailPage</code> bileşeninin sadece ana düzeni ve alt bileşenleri bir araya getirme sorumluluğunu üstlenmesini sağlamaktır. İşte nasıl refactor edebileceğimize dair bir örnek:</p>
<ol>
<li><code>ProductDisplay</code>: Ürün bilgilerini, varyantları ve görsel galerisini gösterme.</li>
<li><code>AddToCartButton</code>: Sepete ekleme mantığı.</li>
<li><code>FavoriteButton</code>: Favorilere ekleme mantığı.</li>
<li><code>ProductCommentsSection</code>: Yorumları çekme, gösterme ve yeni yorum ekleme.</li>
<li><code>RelatedProductsList</code>: İlgili ürünleri çekme ve gösterme.</li>
<li><code>useProductData</code>: Ürün, yorum ve ilgili ürün verilerini çeken özel bir hook (mantık delege edildi).</li>
</ol>
<p><strong>Refactor Sonrası <code>ProductDetailPage</code> Sorumlulukları:</strong></p>
<ul>
<li>Alt bileşenleri bir araya getirme ve düzenleme - <strong>1 puan</strong></li>
<li>Veri alma özel hook'unu çağırma ve veriyi alt bileşenlere iletme - <strong>1 puan</strong></li>
<li>Yükleme ve hata durumlarını yönetme (hook'tan gelen durumu kullanarak) - <strong>1 puan</strong></li>
</ul>
<p><strong>Refactor Sonrası CRS: 3</strong>. Bu, önemli bir iyileşmedir ve bileşenin artık çok daha odaklı olduğunu gösterir. Diğer bileşenlerin CRS değeri de genellikle 1-3 arasında olacaktır. Örneğin, <code>AddToCartButton</code>'ın CRS değeri 1 (sepete ekleme mantığı), <code>ProductCommentsSection</code>'ın CRS değeri 3 (yorum çekme, gösterme, gönderme) olabilir.</p>
<pre><code>
// useProductData.js (Özel Hook)
import { useState, useEffect } from 'react';
import axios from 'axios';

function useProductData(productId) {
    const [product, setProduct] = useState(null);
    const [comments, setComments] = useState([]);
    const [relatedProducts, setRelatedProducts] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            try {
                const [productRes, commentsRes, relatedRes] = await Promise.all([
                    axios.get(<code>/api/products/${productId}</code>),
                    axios.get(<code>/api/products/${productId}/comments</code>),
                    axios.get(<code>/api/products/${productId}/related</code>)
                ]);
                setProduct(productRes.data);
                setComments(commentsRes.data);
                setRelatedProducts(relatedRes.data);
            } catch (err) {
                setError(err);
            } finally {
                setIsLoading(false);
            }
        };
        fetchData();
    }, [productId]);

    return { product, comments, relatedProducts, isLoading, error, setComments };
}

export default useProductData;

// ProductDisplay.js
import React from 'react';

function ProductDisplay({ product, variants, selectedVariant, onVariantChange }) {
    return (
        <div>
            <h1>{product.name}</h1>
            <p>Fiyat: {product.price}</p>
            <img src={product.imageUrl} alt={product.name} style={{ maxWidth: '100%' }} />
            {variants && variants.length > 0 && (
                <select value={selectedVariant?.id || ''} onChange={(e) => onVariantChange(e.target.value)}>
                    {variants.map(v => <option key={v.id} value={v.id}>{v.name}</option>)}
                </select>
            )}
        </div>
    );
}
export default ProductDisplay;

// AddToCartButton.js
import React from 'react';

function AddToCartButton({ product, selectedVariant }) {
    const handleAddToCart = () => {
        console.log(<code>Ürün ${product.name}, varyant ${selectedVariant.name} sepete eklendi.</code>);
        // API çağrısı
    };
    return <button onClick={handleAddToCart}>Sepete Ekle</button>;
}
export default AddToCartButton;

// ProductCommentsSection.js
import React, { useState } from 'react';
import axios from 'axios';

function ProductCommentsSection({ productId, comments, setComments }) {
    const [newCommentText, setNewCommentText] = useState('');

    const handleAddComment = async () => {
        if (!newCommentText.trim()) return;
        try {
            const res = await axios.post(<code>/api/products/${productId}/comments</code>, { text: newCommentText });
            setComments([...comments, res.data]);
            setNewCommentText('');
        } catch (err) {
            console.error("Yorum eklenemedi", err);
        }
    };

    return (
        <div>
            <h2>Yorumlar</h2>
            {comments.map(comment => (
                <div key={comment.id}>{comment.text}</div>
            ))}
            <textarea value={newCommentText} onChange={(e) => setNewCommentText(e.target.value)} placeholder="Yorumunuzu buraya yazın..." />
            <button onClick={handleAddComment}>Yorum Ekle</button>
        </div>
    );
}
export default ProductCommentsSection;

// RelatedProductsList.js
import React from 'react';

function RelatedProductsList({ products }) {
    return (
        <div>
            <h2>İlgili Ürünler</h2>
            {products.map(rp => (
                <div key={rp.id}>{rp.name}</div>
            ))}
        </div>
    );
}
export default RelatedProductsList;

// ProductDetailPage.js (Refactor edilmiş hali)
import React, { useState } from 'react';
import useProductData from './useProductData';
import ProductDisplay from './ProductDisplay';
import AddToCartButton from './AddToCartButton';
import FavoriteButton from './FavoriteButton'; // Yeni oluşturulacak
import ProductCommentsSection from './ProductCommentsSection';
import RelatedProductsList from './RelatedProductsList';

function ProductDetailPage({ productId }) {
    const { product, comments, relatedProducts, isLoading, error, setComments } = useProductData(productId);
    const [selectedVariant, setSelectedVariant] = useState(null);

    if (isLoading) return <div>Yükleniyor...</div>;
    if (error) return <div>Hata: {error.message}</div>;
    if (!product) return null;

    // selectedVariant'ı product.variants üzerinden yönet
    useState(() => {
        if (product && product.variants && product.variants.length > 0) {
            setSelectedVariant(product.variants[0]);
        }
    }, [product]);

    return (
        <div>
            <ProductDisplay
                product={product}
                variants={product.variants}
                selectedVariant={selectedVariant}
                onVariantChange={(variantId) => setSelectedVariant(product.variants.find(v => v.id === variantId))}
            />
            <AddToCartButton product={product} selectedVariant={selectedVariant} />
            <FavoriteButton productId={productId} /> {/* Sorumluluğu kendine ait olacak */}

            <ProductCommentsSection productId={productId} comments={comments} setComments={setComments} />
            <RelatedProductsList products={relatedProducts} />
        </div>
    );
}

export default ProductDetailPage;
</pre>
<p></code></p>
<p>Bu dönüşüm sayesinde, <code>ProductDetailPage</code> bileşeni artık sadece alt bileşenleri düzenlemekle ve veri hook'undan gelen bilgileri dağıtmakla sorumlu. Her bir alt bileşen kendi özel işini yapıyor. Bu, hem kodun okunabilirliğini artırıyor hem de her bir parçanın ayrı ayrı test edilmesini ve yeniden kullanılmasını sağlıyor.</p>
<h2>CRS'i Düşürmek İçin Hangi Teknikleri Kullanabiliriz?</h2>
<p>CRS değerini düşürmek ve daha modüler, sürdürülebilir bileşenler oluşturmak için birçok yazılım mühendisliği prensibi ve tasarım deseni kullanılabilir. İşte bu tekniklerden bazıları:</p>
<ol>
<li>
        <strong>Tek Sorumluluk Prensibi (SRP - Single Responsibility Principle):</strong> SOLID prensiplerinin ilk harfi olan SRP, her modülün, sınıfın veya bileşenin yalnızca tek bir değişiklik nedenine sahip olması gerektiğini belirtir. Bu, CRS'yi düşürmek için en temel ve en etkili yaklaşımdır. Eğer bir bileşenin birden fazla sorumluluğu varsa, bu sorumlulukları ayrı bileşenlere veya modüllere ayırarak SRP'ye uygun hale getirebiliriz. Örneğin, veri çekme mantığını ayrı bir servise veya özel bir hook'a, UI gösterme mantığını ayrı bir görsel bileşene ayırmak gibi.
    </li>
<li>
        <strong>Kompozisyon (Composition) Kullanımı:</strong> Kalıtım (Inheritance) yerine kompozisyonu tercih etmek, daha esnek ve daha az bağımlı yapılar oluşturmamızı sağlar. Küçük, bağımsız bileşenleri bir araya getirerek daha büyük ve karmaşık işlevler oluşturmak, her bir alt bileşenin CRS'sini düşük tutarken, ana bileşenin de sadece bu alt bileşenleri düzenleme sorumluluğunu üstlenmesini sağlar. Bu sayede, "Tanrı Bileşen" oluşumunu engelleriz.
    </li>
<li>
        <strong>Bağımlılık Enjeksiyonu (Dependency Injection - DI):</strong> Bileşenlerin ihtiyaç duydukları bağımlılıkları (servisler, yardımcı fonksiyonlar vb.) kendilerinin oluşturması yerine dışarıdan almasını sağlamak, bileşenlerin daha az bilgi sahibi olmasını ve dolayısıyla daha az sorumluluk üstlenmesini sağlar. DI, test edilebilirliği artırır ve bileşenlerin belirli bir uygulama bağlamına sıkıca bağlanmasını engeller. Özellikle Angular gibi framework'lerde bu doğal bir yaklaşımdır.
    </li>
<li>
        <strong>Soyutlama ve Arayüzler (Abstraction and Interfaces):</strong> Belirli bir işlevselliğin nasıl uygulandığına dair detayları gizleyerek, bileşenlerin sadece soyut bir arayüzle etkileşime girmesini sağlamak. Bu, bileşenin sadece "ne" yapıldığını bilmesini, "nasıl" yapıldığını bilmemesini sağlar. Örneğin, bir API servisi için bir arayüz tanımlayarak, bu servisin farklı implementasyonları bileşeni etkilemeden değiştirilebilir.
    </li>
<li>
        <strong>Delegasyon (Delegation):</strong> Bir bileşenin, yapması gereken bir işi başka bir bileşene veya modüle devretmesi. Örneğin, bir ana bileşen, bir listenin filtrelenmesi sorumluluğunu ayrı bir filtreleme bileşenine delege edebilir. Bu, ana bileşenin sadece filtreleme bileşeninin sonucunu kullanmasını sağlar ve CRS'sini düşürür.
    </li>
<li>
        <strong>Özel Hook'lar veya Servisler (Custom Hooks/Services):</strong> Özellikle React ekosisteminde özel hook'lar (<code>useProductData</code> örneğimizdeki gibi) veya diğer framework'lerde servis katmanları, durum yönetimi, veri çekme, doğrulama gibi mantıksal sorumlulukları UI bileşenlerinden ayırmak için mükemmel araçlardır. Bu, bileşenlerin sadece görsel sunumla ilgili sorumluluklara odaklanmasını sağlar.
    </li>
<li>
        <strong>Kapsayıcı (Container) ve Sunumsal (Presentational) Bileşenler:</strong> Bu desen, bileşenleri iki kategoriye ayırır: Kapsayıcı bileşenler (akıllı bileşenler) veriyi yönetir ve mantığı içerir; Sunumsal bileşenler (aptal bileşenler) ise sadece veriyi alır ve görüntüler, kendi içlerinde neredeyse hiç mantık barındırmazlar. Bu ayrım, sorumlulukları net bir şekilde bölmeye yardımcı olur ve her bir bileşenin CRS'sini düşük tutar.
    </li>
</ol>
<div class="expert-tip">
    Uzman İpucu: Kodunuzda "callback hell" veya iç içe API çağrıları görmeye başladığınızda, bu genellikle yeni bir sorumluluğun ortaya çıktığının veya mevcut bir sorumluluğun aşırı büyüdüğünün işaretidir. Bu tür durumları tespit ettiğinizde hemen CRS analizi yapın.
</div>
<h3>Farklı Çerçevelerde CRS Uygulamaları: React, Angular, Vue ve Ötesi</h3>
<p>Bileşen Sorumluluk Skoru'nun (CRS) en güzel yanlarından biri, onun tamamen framework-agnostik olmasıdır. Yani, ister React, ister Angular, ister Vue, ister Svelte, isterse de backend'de bir Node.js modülü ile çalışıyor olun, CRS prensipleri aynı şekilde uygulanabilir. Temelde yatan yazılım mühendisliği prensipleri, dil veya çerçeve seçiminden bağımsız olarak geçerliliğini korur. Ancak, her çerçeve, bu prensipleri uygulamak için farklı araçlar ve yaklaşımlar sunar. Bu bölümde, popüler ön yüz çerçevelerinde CRS'i nasıl düşürebileceğimize dair genel yaklaşımlara değineceğiz.</p>
<h4>React Eko-sisteminde CRS</h4>
<p>React'te "Tanrı Bileşen"ler genellikle çok fazla <code>useState</code>, <code>useEffect</code> hook'u içeren, karmaşık render mantığına sahip bileşenler olarak karşımıza çıkar. CRS'i düşürmek için şu teknikler kullanılabilir:</p>
<ul>
<li><strong>Custom Hook'lar:</strong> Veri çekme, durum yönetimi, form doğrulama gibi mantıksal sorumlulukları custom hook'lara taşıyarak bileşenlerin sadece UI sunumuna odaklanmasını sağlayın. Örneğin, <code>useProductData</code> veya <code>useFormValidation</code> gibi hook'lar.</li>
<li><strong>Higher-Order Components (HOC) / Render Props:</strong> Paylaşılan mantığı bileşenler arasında yeniden kullanmak ve karmaşıklığı dağıtmak için bu desenleri kullanabilirsiniz (ancak modern React'te genellikle custom hook'lar tercih edilir).</li>
<li><strong>Kompozisyon:</strong> Küçük, odaklanmış bileşenler oluşturup bunları ana bileşen içinde bir araya getirin. <code>ProductDisplay</code>, <code>AddToCartButton</code> gibi alt bileşenler buna iyi bir örnektir.</li>
</ul>
<h4>Angular Eko-sisteminde CRS</h4>
<p>Angular, modüler yapıya ve bağımlılık enjeksiyonuna (DI) doğal olarak yatkın bir çerçevedir. Bu, CRS'yi düşük tutmak için harika fırsatlar sunar:</p>
<ul>
<li><strong>Servisler:</strong> Veri işleme, API çağrıları, durum yönetimi, iş mantığı gibi tüm görevleri bileşenlerden ayırarak Angular servislerine taşıyın. Bileşenler sadece servisleri enjekte edip kullanmalı, mantığı kendileri uygulamamalıdır.</li>
<li><strong>Pipe'lar ve Direktifler:</strong> Veri formatlama veya DOM manipülasyonu gibi sunumsal sorumlulukları pipe'lara veya özel direktiflere delege edin.</li>
<li><strong>Modüller:</strong> Uygulamanızı, her biri belirli bir işlevsel alanı temsil eden daha küçük özellik modüllerine ayırın. Bu, bileşenlerin sorumluluklarını doğal olarak sınırlar.</li>
<li><strong>Smart/Dumb Component Pattern:</strong> Kapsayıcı bileşenler (Smart) servisleri kullanarak veriyi alır ve mantığı yönetirken, sunumsal bileşenler (Dumb) sadece <code>@Input()</code> ve <code>@Output()</code> ile iletişim kurarak veriyi görüntüler.</li>
</ul>
<h4>Vue.js Eko-sisteminde CRS</h4>
<p>Vue.js, esnekliği ile bilinir ve CRS'yi yönetmek için hem Options API hem de Composition API'de çeşitli yöntemler sunar:</p>
<ul>
<li><strong>Composable'lar (Composition API):</strong> React'teki custom hook'lara benzer şekilde, mantıksal sorumlulukları yeniden kullanılabilir composable fonksiyonlara taşıyın (örn: <code>useFetchData.js</code>, <code>useFormValidation.js</code>).</li>
<li><strong>Mixins (Options API):</strong> Paylaşılan işlevselliği farklı bileşenlere enjekte etmek için mixin'leri kullanabilirsiniz, ancak Composition API genellikle daha tercih edilen ve daha temiz bir yaklaşımdır.</li>
<li><strong>Props ve Emit Olayları:</strong> Bileşenler arasında net bir veri akışı ve iletişim mekanizması kurarak her bileşenin kendi sorumluluk alanında kalmasını sağlayın.</li>
<li><strong>Slot'lar:</strong> Bileşenlerin içeriğini dinamik olarak enjekte etmek için slot'ları kullanarak, bir bileşenin kendi içeriğinin düzeninden bağımsız olmasını sağlayın ve sunumsal sorumlulukları dışa aktarın.</li>
</ul>
<p>Aşağıdaki tablo, farklı çerçevelerde CRS'i düşürmek için kullanılabilecek yaygın desenleri özetlemektedir:</p>
<table>
<thead>
<tr>
<th>Desen / İlke</th>
<th>React Karşılığı</th>
<th>Angular Karşılığı</th>
<th>Vue.js Karşılığı</th>
<th>Amacı</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Desen / İlke">Mantık Ayırma</td>
<td data-label="React Karşılığı">Custom Hooks</td>
<td data-label="Angular Karşılığı">Services</td>
<td data-label="Vue.js Karşılığı">Composables</td>
<td data-label="Amacı">Veri çekme, durum yönetimi gibi iş mantığını UI'dan ayırmak.</td>
</tr>
<tr>
<td data-label="Desen / İlke">UI Ayırma</td>
<td data-label="React Karşılığı">Kompozisyon (Küçük Bileşenler)</td>
<td data-label="Angular Karşılığı">Dumb Components, Pipe'lar, Directifler</td>
<td data-label="Vue.js Karşılığı">Kompozisyon, Slot'lar</td>
<td data-label="Amacı">Görsel sunumu ve etkileşimleri daha küçük, yeniden kullanılabilir parçalara bölmek.</td>
</tr>
<tr>
<td data-label="Desen / İlke">Modülerlik</td>
<td data-label="React Karşılığı">Klasör Yapısı, Shared Components</td>
<td data-label="Angular Karşılığı">Feature Modules</td>
<td data-label="Vue.js Karşılığı">Klasör Yapısı, Bileşen Kütüphaneleri</td>
<td data-label="Amacı">Uygulamanın farklı kısımlarını izole edilmiş birimlere ayırmak.</td>
</tr>
</tbody>
</table>
<p>Özetle, çerçeveden bağımsız olarak, ana fikir aynıdır: Sorumlulukları belirleyin, ölçün ve aşırı yüklenmiş bileşenleri daha küçük, daha odaklı parçalara ayırmak için çerçevenizin sunduğu en iyi araçları kullanın. Bu sayede, "Tanrı Bileşen"lerden kurtulacak ve daha temiz, daha sürdürülebilir bir kod tabanı oluşturacaksınız.</p>
<h2>Sonuç: Temiz Kod ve Sürdürülebilir Geliştirme İçin CRS</h2>
<p>"Tanrı Bileşen"ler, yazılım projelerinin gizli düşmanlarıdır. Başlangıçta masum gibi görünen bu bileşenler, zamanla büyüyerek bakım maliyetlerini artırır, test süreçlerini karmaşıklaştırır ve geliştirme hızını düşürür. Bu makalede ele aldığımız Bileşen Sorumluluk Skoru (CRS), bu görünmez tehlikeyi somut bir metrikle ölçmek ve yönetmek için güçlü, framework-agnostik bir araç sunar.</p>
<p>CRS, bileşenlerinizi değerlendirirken size objektif bir bakış açısı sağlar ve refactoring ihtiyacını net bir şekilde ortaya koyar. Düşük bir CRS değeri, bileşeninizin Tek Sorumluluk Prensibi'ne uygun olduğunu, daha kolay test edilebilir, daha yeniden kullanılabilir ve daha anlaşılır olduğunu gösterir. Vaka analizimizde gördüğümüz gibi, yüksek CRS'e sahip bir "Tanrı Bileşen"i parçalara ayırarak ve her bir parçayı kendi sorumluluk alanına odaklayarak, genel kod kalitesini ve sürdürülebilirliği önemli ölçüde artırabiliriz.</p>
<p>Unutmayın, yazılım geliştirme sürekli bir evrim sürecidir. CRS'yi bir kez hesaplayıp bırakmak yerine, onu geliştirme sürecinizin bir parçası haline getirmek önemlidir. Yeni özellikler eklenirken veya mevcut kodda değişiklik yapılırken bileşenlerin sorumluluklarını gözden geçirmek, "Tanrı Bileşen"lerin yeniden ortaya çıkmasını engellemenin en iyi yoludur. Modüler ve bakımı kolay bir kod tabanı oluşturmak, sadece bugünün sorunlarını çözmekle kalmaz, aynı zamanda gelecekteki geliştirmeler için sağlam bir temel atar. Bu yaklaşım, ekip verimliliğini artırır, yeni üyelerin adaptasyonunu kolaylaştırır ve uzun vadede projenizin başarısına katkıda bulunur.</p>
<h3>Sıkça Sorulan Sorular (SSS)</h3>
<p><strong>1. CRS'i hangi sıklıkla hesaplamalıyım?</strong></p>
<p>CRS'yi düzenli aralıklarla (örneğin, her sprint sonunda veya büyük bir özellik geliştirmesi tamamlandığında) veya kritik bileşenlerde önemli değişiklikler yapıldığında hesaplamak iyi bir uygulamadır. Ayrıca, yeni bir bileşen oluşturduğunuzda veya mevcut bir bileşenin çok karmaşık hissettirdiğini düşündüğünüzde de hemen kontrol edebilirsiniz. Otomatik araçlarla entegrasyon, bu süreci daha verimli hale getirebilir.</p>
<p><strong>2. İdeal bir CRS değeri nedir?</strong></p>
<p>Genellikle, bir bileşen için ideal CRS değeri 1 ile 3 arasındadır. Yani, bir bileşenin 1 ila 3 arasında farklı sorumluluğa sahip olması beklenir. Ancak bu bir kuraldan çok bir rehberdir; bazı karmaşık domain bileşenleri için bu değer biraz daha yüksek olabilir. Önemli olan, ekibinizin kendi bağlamına göre "kabul edilebilir" bir üst sınır belirlemesi ve bu sınırı aşan bileşenleri refactoring için işaretlemesidir.</p>
<p><strong>3. CRS'i otomatik olarak hesaplayabilir miyim?</strong></p>
<p>Doğrudan CRS'i hesaplayan genel bir otomatik araç bulunmamaktadır çünkü "sorumluluk" kavramı kod metrikleri kadar net değildir ve bazen insan yorumu gerektirir. Ancak, AST (Abstract Syntax Tree) analizi yapan veya belirli kalıpları (örn: çok sayıda <code>useEffect</code> bağımlılığı, çok fazla prop geçme) tespit eden statik analiz araçları, potansiyel "Tanrı Bileşen" adaylarını bulmanıza yardımcı olabilir. Daha sonra bu adayların CRS'ini manuel olarak değerlendirebilirsiniz.</p>
<p><strong>4. CRS sadece ön yüz (frontend) geliştirme için mi geçerlidir?</strong></p>
<p>Kesinlikle hayır. CRS, yazılım mühendisliğinin temel bir prensibi olan "Tek Sorumluluk Prensibi"ne dayanır ve bu prensip ön yüz, arka yüz, mobil veya herhangi bir yazılım mimarisi için geçerlidir. Bir backend servisi, bir veritabanı sınıfı veya bir iş mantığı modülü de birden fazla sorumluluğu üstlenerek "Tanrı Bileşen" haline gelebilir. CRS, bu tür durumları tespit etmek ve düzeltmek için evrensel bir kılavuzdur.</p>
			</div>

			
<div class="cs-entry__footer">
	<div class="cs-entry__footer-left">
		<div class="cs-entry__post-meta" ><div class="cs-meta-author"><a class="cs-meta-author-link url fn n" href="https://fatihsoysal.com/blog/author/fatihsoysal/"><span class="cs-meta-author-by">by</span><span class="cs-meta-author-name">Fatih Soysal</span></a></div><div class="cs-meta-comments"><a href="https://fatihsoysal.com/blog/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs/#respond" class="comments-link" >0</a></div></div>	</div>
	<div class="cs-entry__footer-right">
		
		<div class="cs-share">

			
			<a class="cs-share__link" target="_blank" href="https://www.facebook.com/sharer.php?text=Taming%20the%20%E2%80%9CGod%20Component%E2%80%9D%3A%20A%20Framework-Agnostic%20Guide%20to%20the%20Component%20Responsibility%20Score%20%28CRS%29&u=https://fatihsoysal.com/blog/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs/">
				<i class="cs-icon cs-icon-facebook"></i>
			</a>

			<a class="cs-share__link" target="_blank" href="https://twitter.com/share?t=Taming%20the%20%E2%80%9CGod%20Component%E2%80%9D%3A%20A%20Framework-Agnostic%20Guide%20to%20the%20Component%20Responsibility%20Score%20%28CRS%29&url=https://fatihsoysal.com/blog/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs/">
				<i class="cs-icon cs-icon-twitter-x"></i>
			</a>

			<a class="cs-share__link" target="_blank" href="https://t.me/share/url?url=%5BURL%5D&text=https://fatihsoysal.com/blog/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs/">
				<i class="cs-icon cs-icon-telegram"></i>
			</a>

			<a class="cs-share__link cs-share__copy-link" target="_blank" href="https://fatihsoysal.com/blog/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs/">
				<i class="cs-icon cs-icon-link"></i>
			</a>

		</div>

			</div>
</div>


<div class="cs-entry__comments" id="comments">

	<div class="cs-entry__comments-header">
		<div class="cs-entry__comments-left">
			<div class="cs-entry__comments-heading">Yorumlar</div>
			<div class="cs-entry__comments-description h2">İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.</div>
		</div>
		<div class="cs-entry__comments-right">
			<div class="cs-entry__comments-toggle">
				<span class="cs-button" role="button" aria-label="Yorumlar">
					<span>Yorum Yaz</span>
				</span>
			</div>
		</div>

	</div>

	<div class="cs-entry__comments-inner">

			<div id="respond" class="comment-respond">
		<h2 id="reply-title" class="comment-reply-title">Bir yanıt yazın <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/taming-the-god-component-a-framework-agnostic-guide-to-the-component-responsibility-score-crs/#respond" style="display:none;">Yanıtı iptal et</a></small></h2><form action="https://fatihsoysal.com/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">E-posta adresiniz yayınlanmayacak.</span> <span class="required-field-message">Gerekli alanlar <span class="required">*</span> ile işaretlenmişlerdir</span></p><p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" aria-required="true" placeholder="Your Comment *">


Save my name and email in this browser for the next time I comment.
Gönder  

Δ