Clean Code ve temel prensipler

Bu rehber frontend geliştiriciler için yazıldı. Örnekler React ve TypeScript ile, ama fikirler her dilde geçerli. Üç kısa prensip öğreneceksiniz: DRY, KISS ve YAGNI. Her biri bir soruya cevap veriyor.

Clean Code neyi hedefler?

Çalışan kod yetmez. Robert C. Martin'in Clean Code kitabının çıkış noktası şu: temiz olmayan kod çalışsa bile bir geliştirme ekibini çökertebilir.¹ Kitap iyi ile kötü kodu ayırmayı, anlaşılır isim ve fonksiyon yazmayı öğretiyor.¹

Bu derste anlatılan üç prensip bu hedefin parçaları. Hepsi aynı soruya çıkıyor: bu kod yarın değiştirilmesi gerektiğinde kolay mı olacak?

DRY: Aynı bilgiyi bir yerde tutun

The Pragmatic Programmer kitabındaki tanım: her bilgi parçasının sistemde tek, net ve yetkili bir temsili olmalı.² Buradaki anahtar kelime bilgi. DRY, benzer görünen satırları birleştirmek demek değil.

// ❌ Aynı kural üç dosyada
const free = total >= 500 // CartPage.tsx
const isFree = price > 499 // CartSummary.tsx
const shippingFree = sum >= 500 // Checkout.tsx

// ✅ Kural tek yerde
export const FREE_SHIPPING_THRESHOLD = 500
export const hasFreeShipping = (total: number) => total >= FREE_SHIPPING_THRESHOLD

Eşik değişince tek dosyayı değiştirirsiniz. Üç dosya ise biri unutulduğunda tutarsız davranır.

Tersi de var: iki kod parçası bugün aynı görünüyor ama farklı sebeplerle değişecekse, birleştirmek sorun çıkarır. Kent C. Dodds'ın AHA ilkesi bunu söylüyor: tekrar gerçekten görülene ve neyin değiştiği anlaşılana kadar soyutlamayı bekletin.³ Yanlış soyutlamanın nasıl oluştuğunu Klasör Yapısı ve İsimlendirme rehberinde anlatmıştık.

KISS: Sade tutun

İşi gören en basit çözümü seçin. Martin Fowler'ın aktardığı Kent Beck'in basit tasarım kurallarının sonuncusu bunu söylüyor: ilk üç kurala hizmet etmeyen her şeyi çıkarın.⁴ The Pragmatic Programmer da aynı yönde: sade kodda hata saklanacak yer azalır.²

Frontend'de en sık görülen karmaşıklık, gereksiz state ve Effect:

// ❌ Fazladan state ve Effect
const [fullName, setFullName] = useState('')
useEffect(() => {
  setFullName(firstName + ' ' + lastName)
}, [firstName, lastName])

// ✅ Render sırasında hesaplayın
const fullName = firstName + ' ' + lastName

React dokümanına göre gereksiz Effect'leri kaldırmak kodu daha hızlı, takibi kolay ve daha az hata yapan hâle getirir.⁵ Sade, kısa demek değil: bir satırlık zekice kod, üç satırlık açık koddan daha zor okunur. Beck'in ikinci kuralı da niyeti açık göstermek.⁴

YAGNI: İhtiyaç olmadan yapmayın

You Aren't Gonna Need It: henüz gerekmeyen bir yeteneği, ileride lazım olur diye şimdi eklemeyin. Fowler dört maliyet sayıyor: yazma maliyeti, ertelenen gerçek işin maliyeti, kodu taşımanın maliyeti ve yanlış yazıldıysa onarım maliyeti.⁶

// ❌ Tek bir tablo için 15 proptan oluşan genel DataTable
<DataTable columns={columns} sortable filterable paginated groupBy="status" />

// ✅ Bugün gereken
<ProductTable products={products} />

Genel bileşeni ikinci tablo gerçekten gelince çıkarırsınız. O zaman neyin ortak olduğunu bilirsiniz.

YAGNI "kodu değiştirmeyi kolaylaştırma" demek değil. Fowler açıkça belirtiyor: bu prensip yalnızca henüz gerekmeyen özellik için eklenen yetenekleri kapsıyor, refactoring buna aykırı değil.⁶

Ne zaman gerekmez?