Micro-Frontend Mimarisi Neden Gerekli?

Monolitik frontend büyüdükçe build süresi uzar, bağımlılık çakışması artar, takımlar birbirini bloklar. Micro-frontend, monolitik yapıyı bağımsız deploy edilebilir küçük parçalara böler. Her takım kendi alanına (domain) odaklanır.

Adım Adım Micro-Frontend ve Takım Yapılandırması

Adım 1: Domain ve Takım Sınırlarını Çizme (Domain-Driven Design)

Uygulamayı dikey işlevlere bölün. Yatay katmanlar (HTML/CSS takımı, JS takımı) yerine uçtan uca dikey takımlar kurun:

Auth & Shell Takımı: Ana kapsayıcı uygulama, auth state, genel layout ve routing yönetir.
Katalog Takımı: Ürün listeleme, arama, filtreleme domainini yönetir.
Checkout Takımı: Sepet ve ödeme akışlarını bağımsız yürütür.

Adım 2: Entegrasyon Yöntemini Seçme

Modern web projelerinde en yaygın yaklaşımlar:

Webpack Module Federation / Vite Module Federation: Runtime entegrasyonu sağlar. En popüler trendler arasındadır. Kod paylaşımı kolaydır, bundle boyutu optimize edilir.
Web Components: Framework bağımsızdır. Takımların farklı stack (React, Vue, Svelte) kullanmasına izin verir. Standart web API'lerine dayanır.
Iframes: Tam izolasyon gerekirken kullanılır. İletişim maliyeti ve UX kısıtları yüksektir; sadece kritik güvenlik/legacy senaryolarında tercih edilir.

Adım 3: Ortak Tasarım Sistemi (Design System) ve Sözleşmeler

Dijital ajans ve kurumsal yapılarda marka tutarlılığı kritiktir. UI tutarlılığı için:

Bağımsız bir npm paketi veya Web Component kütüphanesi olarak dağıtılan Design System kullanın.
CSS çakışmalarını önlemek için CSS Modules, Tailwind veya Shadow DOM zorunlu tutun.
Micro-frontend'ler arası veri transferini tarayıcı standartları (CustomEvents, BroadcastChannel) veya Shell context üzerinden sınırlandırın.

Adım 4: Bağımsız CI/CD Pipeline Kurulumu

Her takımın kendi repository veya monorepo workspace'i olmalıdır:

Takım A deploy çıktığında Takım B'nin build alması gerekmez.
Shell uygulaması uzak modülleri dinamik yükler (`import('remoteApp/Widget')`).
Sürümleme ve geri alma (rollback) süreçleri mikro düzeyde bağımsız işler.

Takım Yönetimi İçin Kritik Pratikler

Özerklik kuralsızlık değildir. Takımlara teknoloji seçimi özgürlüğü verirken ortak performans bütçeleri (Core Web Vitals) ve erişilebilirlik standartları sözleşmeye bağlanmalıdır.

Governance Modeli: Ortak bağımlılıkların (React core, router) versiyon kontrolü için bir mimari komite belirleyin.
State İzolasyonu: Global state'i minimumda tutun. Mikro parçaların birbirinin dahili state'ine doğrudan erişmesini engelleyin.
Hata İzolasyonu (Error Boundaries): Bir mikro uygulamanın çökmesi tüm sayfayı kilitler. Her uzak modülü bir Error Boundary ile sarın.