Mikro Frontend Nedir?
Mikro Frontend, backend dünyasındaki Microservices mimarisinin frontend karşılığıdır. Büyük bir monolitik frontend uygulamasını, bağımsız olarak geliştirilebilen, test edilebilen ve deploy edilebilen küçük parçalara ayırmayı hedefler.
Neden İhtiyaç Duyuldu?
Modern web uygulamaları dev boyutlara ulaştı. Bir e-ticaret sitesinde ürün kataloğu, sepet, ödeme, kullanıcı profili ve admin paneli aynı codebase içinde yaşadığında:
- Build süreleri katlanarak artar
- Takımlar arası bağımlılık sprint planlamasını zorlaştırır
- Teknoloji geçişleri imkansız hale gelir
- Deployment riski her release'de artar
Implementasyon Stratejileri
1. Build-Time Integration
{
"dependencies": {
"@team-a/product-catalog": "^2.1.0",
"@team-b/shopping-cart": "^1.5.0",
"@team-c/checkout": "^3.0.0"
}
}
Avantaj: Basit, tip güvenliği Dezavantaj: Bağımsız deployment yok
2. Run-Time Integration (Module Federation)
Webpack 5 Module Federation ile runtime'da micro-app'leri yükleme:
new ModuleFederationPlugin({
name: 'shell',
remotes: {
catalog: 'catalog@https://catalog.example.com/remoteEntry.js',
cart: 'cart@https://cart.example.com/remoteEntry.js'
}
});
3. Server-Side Composition
Nginx veya Edge Functions ile HTML fragment'larını birleştirme:
location /product {
ssi on;
proxy_pass http://product-service;
}
Ne Zaman Kullanmalısınız?
✅ Kullanın:
- 5+ bağımsız takım aynı frontend üzerinde çalışıyorsa
- Farklı framework'ler aynı anda desteklenmek isteniyorsa
- Bağımsız deployment ve release cycle'lar gerekiyorsa
❌ Kullanmayın:
- Küçük-orta ölçekli projeler (gereksiz karmaşıklık)
- Tek takım geliştiriyorsa
- Performans kritik uygulamalar (extra bundle overhead)
Micro Frontend Framework'leri
| Framework | Yaklaşım | Popülerlik |
|---|---|---|
| Module Federation | Webpack native | ⭐⭐⭐⭐⭐ |
| Single-SPA | Framework agnostic | ⭐⭐⭐⭐ |
| Qiankun | Ant Design ekosistemi | ⭐⭐⭐ |
| Piral | Extension-based | ⭐⭐ |
Sonuç
Mikro Frontend mimarisi güçlü bir araçtır, ancak her proje için uygun değildir. Doğru kullanıldığında takım bağımsızlığı, teknoloji esnekliği ve daha hızlı release cycle'lar sunar. Yanlış kullanıldığında ise gereksiz karmaşıklık, performans sorunları ve bakım maliyetleri getirir.