Micro-Frontend: Monolit Frontend Darboğazını Kırma

Monolitik frontend büyür. Kod tabanı şişer. Takımlar aynı repoda çakışır. Birleştirme krizleri artar. Dağıtım riskli hale gelir. Modern web ekosisteminde ölçek büyüdükçe çözüm: Micro-Frontend mimarisi. Bu rehber, büyük ölçekli projelerde bağımsız çalışan ekipler kurma adımlarını kapsar.

Frontend monolitini kırmak teknoloji seçimi değil, organizasyonel sınır belirleme sorunudur. Conway Kanunu devrededir: Sistem tasarımı organizasyon yapısını taklit eder.

Adım 1: Takım Sınırlarını Belirleme (Domain-Driven Slicing)

Yatay değil, dikey kesim uygulayın. Sayfayı bileşen bazlı değil, iş yeteneği bazlı bölün.

Yanlış (Yatay): Bir takım butonları yazar, bir takım formları yazar. Koordinasyon maliyeti tavan yapar.
Doğru (Dikey): Bir takım Ödeme (Checkout) alanına, diğer takım Ürün Keşfi (Catalog) alanına baştan uca sahip olur.

Her takım kendi API tüketimini, UI akışını ve iş mantığını bağımsız yönetir. Dijital ajans ve geniş kurumsal ekiplerde bu ayrım, paralel teslimat hızını maksimize eder.

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

Gereksiz soyutlama yapmayın. İhtiyaca göre en basit mimariyi seçin:

Module Federation (Webpack / Rspack): Çalışma zamanı (runtime) entegrasyonu. En popüler trendler arasındadır. Paylaşılan bağımlılıkları tekilleştirir.
Web Components: Çatı bağımsız (framework-agnostic) izolasyon. Native browser standardı. İletişim Custom Events üzerinden yürür.
Build-time Entegrasyon (NPM Packages): Basit ama bağımsız dağıtım (deployment) sağlamaz. Versiyon kilitlenmesi riski taşır.
Server-Side Composition: Edge/CDN seviyesinde fragment birleştirme (ör. SSI, Edge Workers). SEO kritik sayfalar için idealdir.

Adım 3: Bağımsız CI/CD ve Dağıtım Hattı Kurma

Micro-frontend mimarisinin temel vaadi: Bir takım çökerse sistemin kalanı çalışır.

Her micro-app bağımsız repoda veya izole mono-repo paketinde yaşar.
Her micro-frontend kendi pipeline'ı ile doğrudan CDN/S3 ortamına versiyonlu asset olarak yüklenir.
Ana taşıyıcı kabuk (Host/Shell Application), manifest dosyası üzerinden micro-app'lerin en güncel URL adreslerini dinamik okur.

Adım 4: Paylaşılan Durum (State) ve İletişim Kuralları

Global state yönetimini minimuma indirin. Micro-app'ler arası doğrudan bellek paylaşımı coupling (sıkı bağlılık) yaratır.

CustomEvent API: Native tarayıcı event bus mekanizmasını kullanın. Harici kütüphane eklemeyin.
URL Query Params: Sayfa durumunu URL üzerinden aktarın. En dayanıklı ve standart yöntemdir.
Sıkı Veri Sözleşmeleri (Contracts): Takımlar arası arayüz değişiklikleri semantic versioning (SemVer) ile yönetilmelidir.

Adım 5: Paylaşılan Tasarım Sistemi (Design System) Yönetimi

Kullanıcı arayüzünde tutarsızlık modern web projelerinin itibarını zedeler. Dijital ajans ölçeğinde çoklu takım yönetirken tasarım sistemi çekirdek pakettir:

Bileşen kütüphanesini bağımsız ve dilsiz (stateless) bir paket olarak yayınlayın.
Micro-frontend uygulamalarına CSS çatışmalarını engellemek için CSS Scoping (CSS Modules, Tailwind namespace veya Shadow DOM) uygulayın.
Tasarım token'larını (renk, tipografi, boşluk) merkezi bir kaynaktan dağıtın.

Takım Yönetişimi (Governance) İçin Kontrol Listesi

Hata İzolasyonu (Error Boundaries): Bir micro-frontend hata verirse Host Shell çökmeyi yakalar, arayüzün kalanını açık tutar.
Ortak Bağımlılık Politikası: React, Vue veya core vendor paketlerini host üzerinde singleton olarak tutun, dublike yüklemeleri engelleyin.
Ekipler Arası SLA: API veya event kontratı kıran değişiklikler için geriye dönük uyumluluk protokolü uygulayın.