Micro-Frontend Nedir ve Neden Gerekli?

Monolitik frontend büyür. Kod tabanı şişer. Ekipler birbirini bloklar. Çözüm: Micro-frontend. Frontend dikey parçalara bölünür. Her parça bağımsız ekip tarafından geliştirilir, test edilir, deploy edilir. Modern web projelerinde hız ve izolasyon sağlar.

Adım Adım Micro-Frontend ve Takım Organizasyonu

Adım 1: Etki Alanına Göre Ekipleri Bölün (Domain Decomposition)

Yatay (UI/API) değil, dikey (iş alanı) bölünme yapın:

Sepet ve Ödeme Ekibi: Checkout akışını yönetir.
Ürün Arama Ekibi: Filtreleme, katalog ve detay sayfalarına bakar.
Kullanıcı Yönetim Ekibi: Auth, profil ve bildirimleri sahiplenir.

Adım 2: Entegrasyon Modelini Seçin

Dijital ajans ve kurumsal projeler için geçerli trendler:

Build-time (NPM Paketleri): Bağımlılık kilitlenmesi yaratır. Önerilmez.
Run-time Webpack Module Federation: En yaygın modern web yaklaşımı. Mikro uygulamalar çalışma anında yüklenir.
Native ES Modules & Import Maps: Sıfır ek kütüphane. Modern tarayıcı desteği yeterliyse en temiz yol.

Adım 3: Ekipler Arası İletişim Standartlarını Belirleyin

Mikro uygulamalar state paylaşmamalı. Minimum paylaşılan veri prensibi uygulayın:

Custom Events: window.dispatchEvent(new CustomEvent('cart:updated', { detail: payload })) ile gevşek bağlı (loosely coupled) iletişim.
URL State: Sayfalar arası veri aktarımını query params ile çözün.

Kural: Bir micro-frontend çökerse diğeri çalışmaya devam etmeli. Core layout hata toleranslı (fault-tolerant) tasarlanmalı.

Takım Yönetimi İçin Pratik İpuçları

Tasarım Sistemi (Design System): Tek merkezden yönetilen CSS değişkenleri ve headless UI bileşenleri kullanın.
Bağımsız CI/CD: Her takım kendi pipeline'ına sahip olmalı. Merkezi deploy kilidi olmamalı.
Sürüm Çakışmalarını Önleyin: Paylaşılan bağımlılıkları (React, Vue vb.) `shared` singleton olarak yapılandırın, bundle boyutunu şişirmeyin.