Mikro hizmet mimarisi, arka uç geliştirmede devrim yaratmıştı. Şimdi aynı felsefe frontend dünyasına da taşınıyor. Mikro frontend mimarisi, büyük ve karmaşık frontend uygulamalarını yönetilebilir parçalara bölerek ekiplerin bağımsız çalışmasını mümkün kılıyor. BUZ Yazılım olarak, ölçeklenebilir frontend çözümlerinde bu yaklaşımı değerlendiriyoruz.
Mikro Frontend Nedir?
Mikro frontend, büyük bir frontend uygulamasının bağımsız olarak geliştirilebilen, test edilebilen ve dağıtılabilen küçük parçalara bölünmesidir. Her parça, farklı bir ekip tarafından farklı teknolojilerle bile geliştirilebilir.
Temel Prensipler
- Teknoloji bağımsızlığı: Her mikro frontend farklı framework kullanabilir
- Bağımsız dağıtım: Bir parçayı güncellemek için diğerlerini etkilemek gerekmez
- Ekip özerkliği: Her ekip kendi alanından sorumludur
- İzole çalışma: Bir parçadaki hata diğerlerini etkilemez
Uygulama Yaklaşımları
Module Federation (Webpack 5)
Module Federation, Webpack 5 ile gelen ve mikro frontend'lerin en popüler uygulama yöntemidir:
- Çalışma zamanında JavaScript modüllerini paylaşma
- Ortak bağımlılıkları tekrar yüklemeden kullanma
- Her mikro frontend ayrı bir Webpack build'ine sahip
- Dinamik uzak modül yükleme
Iframe Tabanlı
- En basit yaklaşım, ancak sınırlamaları fazla
- SEO sorunları ve erişilebilirlik kısıtları
- İletişim karmaşıklığı
- Yalnızca belirli senaryolar için uygun
Web Components
- Tarayıcı standartlarına dayalı, framework bağımsız
- Shadow DOM ile stil izolasyonu
- Custom elements ile yeniden kullanılabilir bileşenler
- Herhangi bir framework ile çalışabilir
Server-Side Composition
- Sunucu tarafında parçaların birleştirilmesi
- SEO dostu yaklaşım
- İlk yükleme performansı iyi
- Edge Side Includes (ESI) veya sunucu tarafı şablonlama
Mimari Kararlar
Paylaşılan Durumlar
- Event bus: Mikro frontend'ler arası iletişim
- Custom events: Tarayıcı seviyesinde olay paylaşımı
- URL/query parametreleri: Basit durum aktarımı
- Paylaşılan store: Dikkatli kullanılmalı, bağımlılık oluşturabilir
Stil Yönetimi
- CSS modules veya CSS-in-JS ile izolasyon
- Tasarım sistemi ve ortak bileşen kütüphanesi
- BEM veya benzeri adlandırma kuralları
- Shadow DOM ile tam izolasyon
Yönlendirme (Routing)
- Üst düzey uygulama kabuk (shell) yönlendirmeyi yönetir
- Her mikro frontend kendi iç yönlendirmesine sahip
- URL değişikliklerini dinleme ve uygun parçayı yükleme
Avantajları
- Bağımsız deploy: Her ekip kendi hızında ilerleyebilir
- Teknoloji çeşitliliği: Yeni teknolojileri kademeli olarak benimseme
- Ekip ölçekleme: Yeni ekipler eklendiğinde darboğaz oluşmaz
- Hata izolasyonu: Bir modüldeki hata tüm uygulamayı çökertmez
- Kademeli modernizasyon: Eski kodu parça parça yenileyebilme
Dezavantajları
- Karmaşıklık: Altyapı ve araç seti yönetimi zorlaşır
- Performans riski: Yanlış uygulamada yinelenen bağımlılıklar ve büyük paketler
- Tutarlılık: Farklı ekiplerin tutarlı UX sunması zor olabilir
- Test zorlukları: Entegrasyon testleri karmaşıklaşır
- Overengineering riski: Küçük projeler için gereksiz karmaşıklık
Ne Zaman Mikro Frontend?
Uygun Durumlar
- Büyük ekipler (10+ geliştirici) aynı uygulamada çalışıyorsa
- Bağımsız deploy ve sürüm döngüleri gerekiyorsa
- Eski bir uygulamayı kademeli olarak modernize etmek istiyorsanız
- Farklı iş birimleri farklı uygulama bölümlerinden sorumluysa
Uygun Olmayan Durumlar
- Küçük ekipler ve basit uygulamalar
- Tek bir teknoloji yığını yeterli olduğunda
- Ekipler arası iletişimin güçlü olduğu küçük organizasyonlar
Sonuç
Mikro frontend mimarisi, büyük ölçekli frontend projelerinin yönetiminde güçlü bir araçtır. Ancak her güçlü araç gibi, doğru kullanım senaryolarında uygulanmalıdır.
BUZ Yazılım olarak, projenizin ölçeğine ve ekip yapınıza uygun mimari kararlar almanızda size rehberlik ediyoruz. Frontend mimarinizi modernize etmek için bizimle iletişime geçin.