Micro-frontend mimarisi nedir? Ne zaman tercih edilir, dezavantajları nelerdir?
Cevap
Micro-frontend; büyük bir frontend uygulamasını bağımsız geliştirilen ve deploy edilen parçalara bölmektir. Backend'deki mikroservis fikrinin UI karşılığıdır; asıl çözdüğü problem teknik değil organizasyoneldir (çok sayıda ekip, tek monolit).
Entegrasyon yöntemleri
| Yöntem | Açıklama |
|---|---|
| Build-time (npm paketi) | Basit ama bağımsız deploy yok |
| Module Federation (webpack/Rspack, Vite eklentisi) | Runtime'da başka uygulamanın modülünü yükler, paylaşılan bağımlılıklar |
| single-spa / route bazlı | Her route farklı uygulama |
| Web Components | Framework bağımsız sınır |
| iframe | En güçlü izolasyon, ama UX/performans/SEO sorunları |
| Sunucu tarafı kompozisyon (edge/SSI) | HTML parçalarını sunucuda birleştirme |
Avantajları
- Ekipler bağımsız deploy eder, farklı release döngüleri olur.
- Eski bir kod tabanını parça parça yeni teknolojiye taşımak (strangler pattern).
Dezavantajları
- Aynı kütüphanenin birden fazla kopyası yüklenebilir (React iki kez yüklenirse hook'lar bozulur);
sharedvesingletonayarı gerekir. - Tutarsız UX, ortak design system zorunlu hale gelir.
- Uygulamalar arası iletişim (custom event, URL, ortak küçük store) ve versiyon uyumu karmaşıklaşır.
- Toplam bundle boyutu ve debug/test zorluğu artar.
// Module Federation host config (özet)
new ModuleFederationPlugin({
name: "shell",
remotes: { checkout: "checkout@https://cdn.example.com/remoteEntry.js" },
shared: { react: { singleton: true }, "react-dom": { singleton: true } },
});Küçük/orta ekipler için genelde iyi modülerleştirilmiş bir monorepo daha doğru seçimdir.
İlgili Frontend Sistem Tasarımı soruları
- Bir autocomplete (typeahead) arama bileşenini nasıl tasarlarsınız?
- Bir frontend sistem tasarımı mülakatına nasıl yaklaşırsınız? Hangi adımları izlersiniz?
- Offline-first çalışan bir web uygulamasını (ör. not alma uygulaması) nasıl tasarlarsınız?
- Çok dilli (i18n) bir frontend uygulamasını nasıl tasarlarsınız?
- Büyük bir React uygulamasında state management mimarisini nasıl kurgularsınız?
- Şirket genelinde kullanılacak bir design system / component library nasıl kurarsınız?
Bu konuda başka bir soru biliyor musun?
Mülakatta karşılaştığın soruları ekle, onaylandıktan sonra yayına alınsın.