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: DeviceEventEmitter kullanarak 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:

1. Geliştirici kodu "Feature Repo"suna push eder.
2. CI süreci çalışır ve yeni bundle'ı (remoteEntry.js) bir CDN'e (S3, Azure Blob vb.) yükler.
3. Uygulama açıldığında, en güncel bundle URL'ini çekerek kullanıcıya sunar.

Mimari Karşılaştırma Matrisi

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.