React Native ile Micro Frontend ve Modüler Mimari: Ölçeklenebilir Uygulama Tasarımı
Mobil uygulama geliştirme dünyasında proje büyüdükçe, kod tabanının devasa bir "monolit" haline gelmesi kaçınılmazdır. Yüzlerce geliştiricinin aynı repo üzerinde çalıştığı, bir "push" işleminin onlarca teste takıldığı ve derleme sürelerinin kahve molalarını aştığı bir senaryoda çözüm, web dünyasından ödünç aldığımız bir kavramda gizli: Micro Frontends.
1. Spektrum: Build-time vs. Runtime Modülerlik
React Native'de modülerlik iki ana kolda incelenir. Hangi yöntemi seçeceğiniz, ekibinizin yapısına ve ihtiyaçlarına bağlıdır:
- Build-time Modularity (Monorepo): Kod fiziksel olarak ayrı paketlerdedir ancak uygulama derlenirken tüm kodlar tek bir paket (bundle) haline getirilir. (Nx, Turborepo).
- Runtime Modularity (Micro Frontend): Modüller uygulama çalışırken, genellikle uzak bir sunucudan (CDN) yüklenir. Bu gerçek anlamda bağımsız dağıtım (Independent Deployment) sağlar. (Re.Pack, Module Federation).
2. Nx ile Modüler Monolit Yapısı
Gerçek bir Micro Frontend mimarisine geçmeden önce, kodunuzu "logical" olarak ayırmak en sağlıklı adımdır. Nx gibi araçlar, bağımlılık grafiğini (Dependency Graph) yönetmenize olanak tanır.
Domain-Driven Design (DDD) Uygulanışı
// apps/shell-app/src/app.tsx
import { ProductModule } from '@my-app/products';
import { AuthModule } from '@my-app/auth';
// Her kütüphane kendi içinde izole edilmiştir
const Root = () => (
<AuthProvider>
<ProductModule />
</AuthProvider>
);
Bu yapıda, auth kütüphanesinde yapılan bir değişiklik sadece ilgili testleri tetikler, tüm uygulamayı etkilemez. Ancak her güncellemede mağazaya yeni bir paket çıkmanız gerekir.
3. Re.Pack ve Module Federation: Gerçek Micro Frontend
Eğer "Ödeme" ekibi, uygulamanın geri kalanını beklemeden yeni bir özelliği yayına almak istiyorsa, Re.Pack kullanarak Webpack'in Module Federation özelliğini React Native'e taşımalıyız.
Kritik Konfigürasyon: Bağımlılıkların Paylaşılması (Shared Dependencies)
Micro Frontend yapılarında en büyük risk, her modülün kendi içinde react veya react-native paketlerini tekrar yüklemesidir. Bu hem hafıza şişmesine hem de çalışma zamanı hatalarına yol açar. Re.Pack bunu "singleton" stratejisiyle çözer:
// webpack.config.mjs (Host Config)
new ModuleFederationPlugin({
name: 'main_app',
shared: {
react: {
singleton: true,
eager: true, // Host uygulama için true olmalı
requiredVersion: '18.2.0',
},
'react-native': {
singleton: true,
eager: true,
requiredVersion: '0.72.x',
},
},
});
Dinamik Modül Yükleme ve Hata Yönetimi
Uzak modülün (Remote) yüklenememesi durumunda uygulamanın çökmemesi için ErrorBoundary ve Suspense kullanımı hayatidir:
import { Federation } from '@callstack/repack';
const RemoteCart = React.lazy(() => Federation.importModule('cart', './App'));
function CartFeature() {
return (
<ErrorBoundary fallback={<Text>Sepet şu an yüklenemiyor...</Text>}>
<Suspense fallback={<ActivityIndicator />}>
<RemoteCart />
</Suspense>
</ErrorBoundary>
);
}
4. Modüller Arası İletişim: State Management
Micro Frontend yapısında her modül kendi state'ine (Zustand, Redux vb.) sahip olmalıdır. Ancak "Kullanıcı Oturumu" gibi global verilerin paylaşılması gerekir. İki yöntem yaygındır:
- Event Bus:
DeviceEventEmitterkullanarak modüller arası mesajlaşma. - Shared Context: Ana uygulama (Host) tarafından sağlanan bir Context Provider'ın tüm uzak modüllere enjekte edilmesi.
5. OTA (Over-the-Air) ve Deployment Stratejisi
Micro Frontend'in asıl gücü deployment aşamasında ortaya çıkar. Her modül kendi CI/CD hattına sahiptir:
- Geliştirici kodu "Feature Repo"suna push eder.
- CI süreci çalışır ve yeni bundle'ı (remoteEntry.js) bir CDN'e (S3, Azure Blob vb.) yükler.
- Uygulama açıldığında, en güncel bundle URL'ini çekerek kullanıcıya sunar.
Mimari Karşılaştırma Matrisi
| Kriter | Monorepo (Modular Monolith) | Module Federation (MFE) |
|---|---|---|
| Deployment | Tüm uygulama beraber (Mağaza onayı) | Modül bazlı bağımsız (Mağaza onayı gerekebilir*) |
| Bağımlılık Çatışması | Derleme zamanında çözülür (Güvenli) | Çalışma zamanında çözülür (Riskli) |
| Geliştirme Hızı | Orta | Çok Yüksek (Büyük ekipler için) |
Sonuç: Hangi Yapıyı Seçmelisiniz?
Eğer uygulamanızda 5-10 geliştirici varsa, Micro Frontend mimarisinin getireceği konfigürasyon yükü, sağlayacağı faydadan daha fazla olabilir. Bu durumda Nx ile Modüler Monolit en mantıklı yoldur. Ancak 50+ geliştiricinin olduğu, farklı ekiplerin farklı sorumluluklara sahip olduğu "Super App" projelerinde Re.Pack ve Module Federation kaçınılmaz bir kurtarıcıdır.