{ "title": "Micro-Frontend Mimarisi ile Takım Yönetimi Rehberi: Modern Web ve Ölçekleme", "slug": "micro-frontend-mimarisi-takim-yonetimi-rehberi", "summary": "Büyük ölçekli modern web projelerinde micro-frontend mimarisi kurma, otonom takımları yönetme ve bağımsız dağıtım sağlama rehberi.", "content": "

Micro-Frontend Nedir ve Neden Gerekli?

Monolitik frontend büyür. Kod tabanı şişer. Takımlar birbirini bekler, deployment gecikir. Micro-frontend, monolitik arayüzü bağımsız parçalara böler. Her parça tek domaine bakar, tek takım tarafından geliştirilir, bağımsız deploy edilir. Dijital ajans ve enterprise ekipler için modern web ölçekleme standardıdır.

Adım 1: Domain Ayrımı ve Takım Sınırları Belirleme

Koddan önce organizasyon bölünür. Conway Kanunu: Sistem mimarisi organizasyon iletişim yapısını yansıtır.

Checkout Takımı: Sepet, ödeme, sipariş onay.
Catalog Takımı: Ürün listeleme, arama, filtreleme, ürün detay.
Auth & Account Takımı: Giriş, profil, ayarlar, bildirimler.

Domain Driven Design (DDD) sınırları net değilse micro-frontend dağıtık monolite dönüşür. Takım sınırlarını iş mantığına göre çiz, UI bileşenine göre değil.

Adım 2: Entegrasyon Modelini Seçme

Mimaride en popüler trendler üç ana entegrasyon modeli kullanır:

1. Build-Time Entegrasyon (Önerilmez)

NPM paketleri olarak derleme anında birleşir. Tek repo bağımlılığı yaratır, bağımsız deploy engellenir. Micro-frontend amacını bozar.

2. Run-Time Entegrasyon: Module Federation (Önerilen)

Webpack 5 veya Vite (Module Federation plugin) ile çalışma anında script yükler. Kod paylaşımı yüksek, deploy bağımsız, performans optimal.

3. Run-Time Entegrasyon: Web Components / iframe

Teknoloji bağımsızlığı tam. Web Components stil izolasyonu için Shadow DOM kullanır. iframe en sert izolasyonu sağlar ancak iletişim maliyeti ve UX yükü yüksektir.

Adım 3: Module Federation ile Host ve Remote Yapılandırması

Uygulama kabuğu (Host/Shell) ve bağımsız micro-app (Remote) yapılandırma adımı.

Remote (Ürün Listesi) Webpack Yapılandırması

webpack.config.js dosyasında ModuleFederationPlugin tanımlanır:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'product_catalog',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductList': './src/components/ProductList',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
      }
    })
  ]
};

Host (Shell) Webpack Yapılandırması

Host uygulama Remote modülü runtime içinde çeker:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app_shell',
      remotes: {
        product_catalog: 'product_catalog@https://cdn.example.com/catalog/remoteEntry.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
      }
    })
  ]
};

Adım 4: Takımlar Arası İletişim ve State Yönetimi

Micro-frontend uygulamaları birbirinin state'ini doğrudan mutate etmez. İletişim yöntemleri:

Custom Events (Event Bus): Tarayıcı yerel API'si `window.dispatchEvent` ve `window.addEventListener`. Framework bağımsız, hafif.
URL State: Sayfa durumu, query parametreleri üzerinden senkronize edilir. Sayfa yenilemelerinde durum korunur.
Bumble/Global Store (Minimum düzeyde): Sadece auth token, dil, tema bilgisi tutulur. İş mantığı state'i remote içinde kalır.

Adım 5: Stil İzolasyonu ve Tasarım Sistemi (Design System)

CSS çakışmalarını önlemek için şu yollar izlenir:

CSS Modules / Scoped CSS: Sınıf adlarına hash ekler. Çakışmayı engeller.
Shadow DOM: Tam stil izolasyonu sağlar. Dış stiller içeri sızmaz.
Ortak Tasarım Sistemi (Design System): Tüm takımların kullandığı atomik bileşen kütüphanesi NPM üzerinden versiyonlanarak dağıtılır.

Adım 6: Bağımsız CI/CD ve Dağıtım Stratejisi

Her takımın ayrı Git reposu ve CI/CD pipeline'ı olmalıdır. Shell uygulaması yeniden build edilmeden Remote güncellenir:

Takım kodu remote repo içine push eder.
Pipeline testleri ve build'i çalıştırır.
Derlenen `remoteEntry.js` ve chunk'lar CDN bucket içine yüklenir.
Kullanıcı sayfayı yenilediğinde yeni sürüm anında yüklenir. Host deploy gerekmez.

Özet Kontrol Listesi

Sınırlar iş domainine göre ayrıldı mı?
Ortak kütüphaneler (React, UI core) singleton olarak paylaşıldı mı?
Global state minimumda tutuldu mu?
Her remote için bağımsız CI/CD devrede mi?

", "schema_type": "HowTo", "suggested_tags": [ "micro-frontend", "modern web", "rehber", "takim-yonetimi", "dijital ajans", "trendler", "module-federation", "yazilim-mimarisi" ] }