Web Geliştirme Best Practices: Kod Kalitesi ve Bakım
Web geliştirme best practices, kod kalitesini, bakım kolaylığını ve ekip verimliliğini artırır. Bu rehberde kod organizasyonu, naming convention, testing ve documentation best practices'lerini anlatıyoruz.
Son güncelleme:
Proje Yapısı ve Organizasyon
Feature-based structure: Her özellik için ayrı klasör. components/, pages/, hooks/, utils/, services/ gibi ortak klasörler.
Colocation: İlgili dosyaları bir arada tutun. Button component'i ile Button test'i ve Button style'ı aynı klasörde.
Naming convention: Dosya isimleri kebab-case (user-profile.tsx), component isimleri PascalCase (UserProfile), fonksiyon isimleri camelCase (getUserProfile).
Import ordering: External (react, next) → Internal (components, utils) → Relative (./, ../). ESLint import/order ile otomatik sıralama.
Barrel exports: index.ts ile klasörden export. import { Button, Input } from '@/components' gibi temiz import'lar.
Kod Kalitesi
DRY (Don't Repeat Yourself): Tekrarlanan kodu fonksiyon/komponent olarak çıkarın. Ama premature abstraction'dan kaçının.
SOLID prensipleri: Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, Dependency Inversion.
KISS (Keep It Simple, Stupid): Basit çözümü tercih edin. Over-engineering'den kaçının.
YAGNI (You Aren't Gonna Need It): Şu an ihtiyaç olmayan özelliği eklemeyin. İhtiyaç olduğunda ekleyin.
Code review: Her değişiklik review'dan geçmeli. Constructive feedback. Pair programming ile bilgi paylaşımı.
Testing Best Practices
Test piramidi: Unit test (çok), integration test (orta), E2E test (az). Her seviye farklı amaç ve maliyet.
Unit test: Fonksiyon ve komponent testleri. Jest, Vitest. Hızlı ve izole. Mock'lar ile bağımlılıkları izole edin.
Integration test: Birden fazla modülün birlikte çalışmasını test edin. API endpoint'leri, database queries.
E2E test: Kullanıcı akışlarını test edin. Playwright, Cypress. Yavaş ama yüksek güven. Kritik akışlar (login, checkout) için.
Test coverage: %80+ coverage hedefleyin. Ama coverage %100 olmalı diye zorlamayın. Kalite > miktar.
Documentation Best Practices
README: Proje açıklaması, kurulum, kullanım, katkıda bulunma. İlk izlenim ve onboarding.
Code comments: 'Ne' değil 'Neden' açıklayın. Karmaşık logic için comment. Self-documenting kod tercih edin.
API documentation: OpenAPI/Swagger. Her endpoint, parametre, response ve hata kodu dokümante edilmiş.
Architecture Decision Records (ADR): Mimari kararları dokümante edin. Neden bu teknoloji seçildi?
Changelog: Her release'in değişikliklerini dokümante edin. Semantic versioning (major.minor.patch).
Performance Best Practices
Image optimization: WebP/AVIF format, lazy loading, responsive images, CDN.
Code splitting: Route-based ve component-based splitting. Lazy loading ile bundle size azaltın.
Caching: HTTP cache headers, Service Worker, CDN caching. Static assets için uzun TTL.
Minification: CSS, JS, HTML minification. Gzip/Brotli compression.
Monitoring: Lighthouse, Web Vitals, RUM. Performans regresyonlarını tespit edin.
Security Best Practices
Input validation: Tüm kullanıcı girdilerini validate edin. Server-side validation zorunlu.
XSS prevention: innerHTML yerine textContent. React/Vue otomatik escaping. CSP header.
CSRF protection: CSRF token'ları. SameSite cookie attribute.
Authentication: JWT veya session-based. Secure, HttpOnly, SameSite cookie'ler.
Dependency security: npm audit, Snyk, Dependabot. Güncel ve güvenli bağımlılıklar.
İlgili araçlar
Adım adım kullanım rehberleri
Aynı konuda uygulamalı yazılar
API Tasarımı Best Practices: RESTful API ve En İyi Uygulamalar
İyi tasarlanmış bir API, geliştirici deneyimini ve uygulama performansını doğrudan etkiler.
JSON ve Veri Formatları: Web Geliştirme İçin Rehber
JSON (JavaScript Object Notation), web uygulamalarında veri alışverişi için en yaygın format.
Yeşil Düğmede Beyaz Yazı: Kontrastı Görünüşe Göre Seçmeyin
Bir kayıt düğmesi canlı yeşil olduğunda dikkat çekebilir; üzerindeki beyaz yazının rahat okunması ise ayrı bir konudur.