Webpack Module Federation ile Mikrofrontend Mimarileri

Modern web uygulamaları, kullanıcı beklentilerinin artmasıyla birlikte giderek daha karmaşık hale geliyor. Peki, bu büyüklükteki projeleri yönetmek, geliştirmek ve ölçeklendirmek neden bir kabusa dönüşebiliyor? Genellikle, bunun temel nedeni, tek bir büyük, iç içe geçmiş kod tabanına sahip olan monolitik mimarilerdir. Bu yapı, başlangıçta hızlı gelişim vaat etse de, zamanla yeni özellikler eklemeyi, farklı teknolojileri denemeyi veya bağımsız ekiplerin aynı kod üzerinde çalışmasını zorlaştırır. Değişiklikler genellikle domino etkisi yaratır, küçük bir hata tüm uygulamanın çökmesine neden olabilir ve her yeni dağıtım, tüm uygulamanın yeniden build edilmesini ve deploy edilmesini gerektirir. Bu durum, geliştirme süreçlerini yavaşlatır, ekiplerin otonomisini kısıtlar ve inovasyonun önünde ciddi bir engel teşkil eder.

İşte tam da bu noktada, yazılım mimarisinde “böl, parçala, yönet” ilkesini benimseyen mikrofrontendler sahneye çıkar. Mikrofrontend mimarisi, büyük ve karmaşık bir frontend uygulamasını, bağımsız olarak geliştirilebilen, test edilebilen ve dağıtılabilen daha küçük, özerk parçalara ayırma yaklaşımını ifade eder. Tıpkı mikroservislerin backend dünyasında getirdiği devrim gibi, mikrofrontendler de frontend dünyasında benzer bir dönüşümü hedefler. Bu sayede, farklı ekipler, kendi alanlarına odaklanarak, diledikleri teknolojileri kullanarak ve birbirlerinden bağımsız olarak çalışabilirler. Ancak bu parçaları bir araya getirmek, yani farklı kaynaklardan gelen kodları tek bir kullanıcı arayüzünde sorunsuz bir şekilde birleştirmek teknik bir zorluktur. Geleneksel yöntemler genellikle iframe’ler, Web Bileşenleri veya istemci tarafı JavaScript çözümleri gibi karmaşık entegrasyon stratejileri gerektirirken, Webpack 5 ile gelen Module Federation özelliği, bu zorluğa yepyeni ve çok daha verimli bir çözüm sunar. Module Federation, dağıtık uygulamaların çalışma zamanında birbirleriyle modül paylaşımını mümkün kılarak, mikrofrontend mimarilerinin hayata geçirilmesini oldukça kolaylaştırır. Bu makale, Module Federation’ın temel prensiplerinden başlayarak, pratik uygulamalarına, gerçek dünya senaryolarına ve ileri düzey optimizasyon tekniklerine kadar kapsamlı bir rehber sunacaktır. Böylece, monolitik yapılardan kurtulup daha esnek, ölçeklenebilir ve yönetilebilir frontend mimarileri inşa etmek isteyen herkes için değerli bilgiler içerecektir.

Mikrofrontendler Nedir ve Neden Önemli? Temel Kavramlara Derin Bir Bakış

Mikrofrontendler, bir web uygulamasının kullanıcı arayüzünü, bağımsız olarak geliştirilebilen ve dağıtılabilen küçük, özerk modüllere bölme yaklaşımıdır. Bu kavram, backend dünyasındaki mikroservis mimarisinden ilham almıştır ve büyük ölçekli uygulamaların yönetimini kolaylaştırmayı amaçlar. Geleneksel monolitik frontend uygulamalarında, tüm kod tek bir projede yer alır ve herhangi bir küçük değişiklik bile tüm uygulamanın yeniden derlenip dağıtılmasını gerektirir. Bu durum, özellikle büyük ekiplerde ve sık güncellemelerin olduğu projelerde ciddi darboğazlara yol açar. Mikrofrontendler ise bu sorunu ortadan kaldırır. Her bir mikrofrontend (örneğin, bir e-ticaret sitesindeki ürün listesi, sepet veya ödeme modülü gibi), kendi bağımsız geliştirme yaşam döngüsüne sahip olabilir. Bu, ekiplerin kendi teknolojilerini seçebilmelerini, bağımsız olarak geliştirme yapabilmelerini ve dağıtım süreçlerini hızlandırabilmelerini sağlar.

Peki, mikrofrontendlerin sunduğu avantajlar nelerdir? Öncelikle, bağımsız dağıtım imkanı sayesinde, bir mikrofrontendi değiştirmek veya güncellemek, diğer mikrofrontendleri etkilemez. Bu da riskleri azaltır ve daha hızlı iterasyon sağlar. İkincil olarak, teknoloji agnostisizmi önemli bir faydadır. Farklı mikrofrontendler farklı frontend framework’lerini (React, Vue, Angular vb.) kullanabilir. Örneğin, yeni bir bölümü React ile geliştirirken, mevcut bir bölümü Vue ile çalışmaya devam ettirebilirsiniz. Bu, teknoloji borcunu yönetme ve yeni teknolojilere adapte olma esnekliği sunar. Üçüncül olarak, ölçeklenebilirlik ve ekip otonomisi artar. Büyük bir frontend ekibi, küçük, çapraz fonksiyonel ekiplere bölünebilir ve her ekip kendi mikrofrontendinden sorumlu olur. Bu, koordinasyon maliyetlerini düşürür ve ekiplerin daha hızlı karar alıp hareket etmelerine olanak tanır. Son olarak, daha küçük ve yönetilebilir kod tabanları sayesinde, yeni geliştiricilerin projeye adaptasyonu kolaylaşır ve kodun anlaşılırlığı artar. Hata ayıklama süreçleri de daha hedeflidir.

Elbette, mikrofrontendlerin kendi zorlukları da vardır. Bunlar arasında mikrofrontendler arası iletişim, stil çakışmaları, ortak bağımlılıkların yönetimi ve global durum yönetimi gibi konular yer alır. Geleneksel olarak bu sorunlar, karmaşık olay yayınlama/abonelik sistemleri, izolasyon teknikleri (Shadow DOM gibi) veya manuel bağımlılık yönetimi ile çözülmeye çalışılmıştır. Ancak Webpack Module Federation, özellikle bu entegrasyon zorluklarını ele almak için tasarlanmıştır. Module Federation, farklı Webpack build’lerinin çalışma zamanında birbirleriyle kod paylaşmasına olanak tanıyarak, bu zorlukların çoğunu basitleştirir ve mikrofrontend mimarilerinin uygulanabilirliğini önemli ölçüde artırır. Bu teknoloji sayesinde, her mikrofrontend, kendi başına bağımsız bir uygulama gibi davranabilirken, gerektiğinde diğer mikrofrontendlerin bileşenlerini veya yardımcı modüllerini doğrudan tüketebilir. Bu durum, özellikle ortak bir tasarım sistemi veya paylaşılan yardımcı fonksiyonlar gibi senaryolarda büyük kolaylık sağlar ve geliştirme deneyimini üst düzeye taşır.

Webpack Module Federation’ın Gücü: Nasıl Çalışır? Temel Mekanizmalar

Webpack Module Federation, Webpack 5 ile tanıtılan devrim niteliğinde bir özelliktir ve dağıtık JavaScript uygulamalarının çalışma zamanında birbirleriyle kod paylaşmasını mümkün kılar. Bu özellik, mikrofrontend mimarilerinin uygulanmasını radikal bir şekilde basitleştirir, çünkü uygulamaların farklı bölümlerinin (remotelar) birbirlerine kendi modüllerini (bileşenler, servisler, yardımcı fonksiyonlar) açmasını (expose etmesini) sağlar. Böylece, ana uygulama (host) bu modülleri sanki kendi kod tabanının bir parçasıymış gibi dinamik olarak yükleyebilir. Module Federation, build zamanında değil, çalışma zamanında modül paylaşımını mümkün kılmasıyla geleneksel kütüphane veya bundle paylaşım yöntemlerinden ayrılır. Bu, her bir mikrofrontend’in ayrı ayrı deploy edilebilmesi ve güncellenebilmesi anlamına gelir.

Module Federation’ın kalbinde üç temel kavram bulunur: remotes, exposes ve shared.
* exposes: Bu, bir Webpack uygulamasının (bir remote uygulamanın), diğer Webpack uygulamaları tarafından tüketilebilecek modülleri nasıl dışa aktardığını tanımlar. Örneğin, bir “Sepet” mikrofrontendi, “AddToCartButton” bileşenini diğer mikrofrontendlerin kullanabilmesi için dışa aktarabilir. Dışa aktarılan her modül için benzersiz bir isim ve dosya yolu belirtilir.
* remotes: Bu, bir Webpack uygulamasının (bir host uygulamasının), hangi diğer Webpack uygulamalarından (remotelarından) modüller tüketeceğini tanımlar. Host uygulaması, remote’un dışa aktardığı modüllere uzaktan referans verir. Her remote için bir isim ve remote entry noktasının (genellikle remoteEntry.js adında bir dosya) URL’si belirtilir.
* shared: Bu, birden fazla uygulama arasında paylaşılan bağımlılıkları yönetmek için kullanılır. Örneğin, React, React DOM, Material-UI gibi kütüphaneler genellikle birden fazla mikrofrontend tarafından kullanılır. shared yapılandırması, bu bağımlılıkların yalnızca bir kez yüklenmesini ve tüm mikrofrontendler tarafından paylaşılmasını sağlar. Bu, bundle boyutlarını önemli ölçüde küçültür ve performans artışı sağlar. Aynı zamanda, bağımlılıkların farklı sürümlerinin yönetimi için stratejiler (örneğin, belirli bir sürümü zorlama veya en azından bu sürümü kullanma) sunar.

Module Federation’ın çalışma prensibi oldukça basittir ancak güçlüdür. Her bir mikrofrontend uygulaması, kendi webpack.config.js dosyasında ModuleFederationPlugin‘i yapılandırır. Bu eklenti, her uygulamanın bir remoteEntry.js dosyası oluşturmasını sağlar. Bu dosya, uygulamanın dışa aktardığı tüm modüllerin bir manifestini ve bu modüllerin nasıl yükleneceğine dair gerekli kodu içerir. Bir host uygulaması, bir remote’tan bir modül talep ettiğinde, Webpack bu remoteEntry.js dosyasını uzaktan yükler ve içindeki manifest bilgileri sayesinde istenen modülü dinamik olarak getirir. Bu süreç tamamen şeffaf bir şekilde gerçekleşir; geliştirici için remote modül, yerel bir modül gibi import edilebilir.

Örneğin, aşağıdaki webpack.config.js yapılandırması, bir “AppA” uygulamasının “Button” bileşenini dışa aktarmasını ve “react” ile “react-dom” kütüphanelerini paylaşmasını gösterir:

// AppA/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... diğer Webpack yapılandırmaları
  plugins: [
    new ModuleFederationPlugin({
      name: 'appA',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.jsx', // Button bileşenini dışa aktar
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
  ],
};

Ve bir "AppB" uygulamasının "AppA"dan "Button" bileşenini nasıl tükettiğini gösteren yapılandırma:

// AppB/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... diğer Webpack yapılandırmaları
  plugins: [
    new ModuleFederationPlugin({
      name: 'appB',
      remotes: {
        appA: 'appA@http://localhost:3001/remoteEntry.js', // AppA'dan modül tüketecek
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
  ],
};

Bu yapılandırmalar sayesinde, appB uygulamasındaki herhangi bir bileşen, import Button from 'appA/Button'; şeklinde appA'nın Button bileşenini kullanabilir. Bu entegrasyonun basitliği, geliştiricilerin karmaşık manuel entegrasyon yöntemleriyle uğraşmak yerine, iş mantığına odaklanmasına olanak tanır.

Adım Adım Uygulama: Basit Bir Mikrofrontend Projesi Nasıl Oluşturulur? Pratik Bir Rehber

Module Federation ile basit bir mikrofrontend projesi oluşturmak, sanıldığından daha kolaydır. Bu bölümde, iki ayrı React uygulamasını (bir host uygulaması ve bir remote uygulaması) Module Federation kullanarak nasıl entegre edeceğimizi adım adım göstereceğiz. Bu sayede, temel prensipleri uygulamalı olarak kavramış olacaksınız.

Adım 1: Proje Yapısını Oluşturma
Öncelikle, projemiz için iki ayrı klasör oluşturalım: host-app ve remote-app. Her ikisi de bağımsız birer React projesi olacak.

mkdir microfrontend-demo
cd microfrontend-demo
mkdir host-app remote-app

Şimdi her bir klasör içinde basit bir React projesi başlatalım. create-react-app kullanmak yerine, Webpack ve React'i manuel olarak kurarak Module Federation yapılandırmasını daha net görelim.

# host-app
cd host-app
npm init -y
npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-react style-loader css-loader

# remote-app
cd ../remote-app
npm init -y
npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-react style-loader css-loader

Adım 2: Webpack Yapılandırmalarını Oluşturma

Her iki uygulama için webpack.config.js dosyalarını oluşturalım.

remote-app/webpack.config.js:
Bu uygulama, bir bileşeni dışa aktaracak (expose edecek).

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 3001, // Remote app 3001 portunda çalışacak
  },
  output: {
    publicPath: 'auto', // Çalışma zamanında remote entry URL'sini otomatik belirle
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp', // Remote uygulamanın benzersiz adı
      filename: 'remoteEntry.js', // Dışa aktarılan modüllerin giriş noktası
      exposes: {
        './RemoteButton': './src/components/RemoteButton.jsx', // RemoteButton bileşenini dışa aktar
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

host-app/webpack.config.js:
Bu uygulama, remote-app'ten dışa aktarılan bileşeni tüketecek.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 3000, // Host app 3000 portunda çalışacak
  },
  output: {
    publicPath: 'auto',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js', // remoteApp'i tanımla
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

Adım 3: Temel React Dosyalarını Oluşturma

Her iki uygulama için de src ve public klasörlerini ve gerekli dosyaları oluşturalım.

remote-app için:
* remote-app/public/index.html:

* host-app/src/App.js:

    import React, { Suspense } from 'react';
    // remoteApp'ten RemoteButton'ı dinamik olarak yükle
    // import edilmesi host uygulamasının remote uygulamanın remoteEntry.js dosyasını indirmesine neden olur.
    const RemoteButton = React.lazy(() => import('remoteApp/RemoteButton'));

    const App = () => {
      return (
        

          
Host Uygulama
          
Aşağıdaki buton remote uygulamadan yükleniyor:
          Remote Buton Yükleniyor...
}>