Microfrontend: 101

Son yıllarda web uygulamaları hem boyut hem de karmaşıklık açısından büyük bir evrim geçirdi. Bu büyüme, geleneksel monolitik frontend yaklaşımlarını ciddi zorluklarla karşı karşıya bıraktı — özellikle ölçeklenebilirlik, sürdürülebilirlik ve ekipler arası iş birliği açısından.

Tek bir büyük frontend yapısı, bir noktadan sonra ekiplerin gelişimini yavaşlatmaya, değişiklikleri zorlaştırmaya ve hata yapma riskini artırmaya başlıyor. İşte bu noktada devreye yeni bir mimari yaklaşım giriyor: Microfrontend.

Microfrontend Nedir?

Microfrontend, frontend’i daha küçük, bağımsız ve yönetilebilir parçalara bölmenizi sağlayan modern bir mimari anlayıştır. Her bir parça kendi başına geliştirilebilir, test edilebilir ve dağıtılabilir. Bu sayede farklı ekipler aynı anda, birbirinden bağımsız şekilde çalışabilir.

Eğer backend tarafında mikroservis mimarisine aşinaysanız, microfrontend’leri onun frontend dünyasındaki karşılığı olarak düşünebilirsiniz.

A microfrontend is a microservice that exists within a browser.

Amazon Prime, kullanıcılarına yüksek performanslı bir deneyim sunmak için microfrontend mimarisini başarıyla uygulayan şirketlerden biri. Navigasyon çubuğu, arama alanı, öneri bölümü ve kullanıcı ayarları gibi kısımlar bağımsız olarak geliştirilip güncellenebiliyor.

Bu modüler yapı sayesinde her bileşen ayrı önbelleğe alınabiliyor, güncellemeler daha hızlı yapılabiliyor ve genel performans artıyor. Sonuç: Daha hızlı yüklenen sayfalar ve daha akıcı bir kullanıcı deneyimi.

Microfrontend mimarisinin en güçlü yönlerinden biri, her bir parçanın bağımsız bir yaşam döngüsüne sahip olmasıdır. Yani her microfrontend, kendi kaynak koduna (repository), otomatik test paketlerine ve deploy pipeline’ına sahip olabilir. Bu sayede her bileşen, sanki başlı başına küçük bir uygulamaymış gibi ele alınabilir.

Bu yapı, ekiplerin birbirine bağımlı olmadan çalışmasına olanak tanır. Örneğin, arama özelliğini geliştiren bir ekip; sadece kendi microfrontend’inden sorumlu olur, kodunu kendi deposunda tutar, testlerini kendi test ortamında çalıştırır ve güncellemelerini ana uygulamayı etkilemeden yayınlayabilir. Aynı şekilde kullanıcı profiliyle ilgilenen başka bir ekip de aynı süreci kendi bileşeni için yürütür.

Bu yaklaşımın en büyük avantajı, paralel geliştirme süreçlerine olanak tanımasıdır. Ekipler birbirini beklemek zorunda kalmadan çalışabilir, hata ayıklamak daha kolay hale gelir ve yeni özelliklerin yayına alınması çok daha hızlı gerçekleşir.

“Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder.” — Micro Frontends by Cam Jackson

Ayrıca bu bağımsızlık, ekiplerin kullandığı teknolojiler konusunda da özgürlük sağlar. Bir microfrontend React ile yazılırken, diğeri Vue veya Angular kullanabilir. Böylece her ekip en uygun gördüğü araçlarla ilerleyebilir.

Sonuç olarak bu mimari;

• büyük projelerde ekiplerin bağımsız ve hızlı çalışmasını sağlayarak yazılım geliştirme sürecini daha yönetilebilir hale getirir.
• her ekip, kendi alanında maksimum üretkenlikle çalışabilirken, genel sistemin karmaşıklığı da minimum seviyede tutulur.
• hem teknik riskler azalır, hem de değişen ihtiyaçlara daha esnek ve hızlı çözümler üretmek mümkün hale gelir.

Nasıl Uygulanır?

1. Build-Time Integration

Microfrontend’lerin bağımsız paketler olarak yayınlanıp container uygulamaya dahil edilmesini sağlar. Ancak bu yöntem, tüm modülleri yayınlama aşamasında birbirine bağımlı hale getirir. Bu da bağımsız geliştirme avantajını ortadan kaldırır.

Bu yüzden genellikle run-time integration tercih edilir.

{
  "name": "@frontend/container",
  "version": "2.7.1",
  "description": "A micro frontends app",
  "dependencies": {
    "@frontend/micro-app-1": "^3.1.9",
    "@frontend/micro-app-2": "^8.2.1",
  }
}

2. Run-Time Integration

Modüller uygulama çalışırken, yani runtime’da yüklenir ve render edilir. Bu yöntem daha fazla esneklik sunar. Her modül kendi sunucusunda barınabilir ve Web Components, iframes ya da modern bir çözüm olan Webpack Module Federation gibi teknolojilerle entegre edilir.

Microfrontend mimarisini hayata geçirmenin en popüler yollarından biri, Webpack 5 ile gelen güçlü bir özellik olan Module Federation kullanmaktır.

Module Federation ile Microfrontend

Module federation ile farklı uygulamalar arasında modüller runtime paylaşılabilir ve entegre edilebilir.

Diyelim ki bir “Dashboard” uygulaması geliştiriyoruz. Bu uygulamayı modüllere ayıralım: biri kullanıcı yönetimi UserModule, diğeri siparişler için OrdersModule. Her modül kendi başına çalışsın, biz de Module Federation ile hepsini tek bir yapıda birleştirelim.

• Host App: Dashboard
• Remote App1: UserModule
• Remote App2: OrdersModule

Adım 1: Uygulamaların webpack ile expose edilmesi

Hem UserModule hem de OrdersModule, kendi webpack.config.js dosyalarında ModuleFederationPlugin ile yapılandırılıyor. Her biri ilgili bileşeni (UserList ve OrderList) dışa açıyor (exposes) ve belirli bir port üzerinden erişilebilir hale geliyor.

Webpack Configuration File (UserModule):

const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  devServer: {
    port: 3001,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "UserModule",
      filename: "remoteEntry.js",
      exposes: {
        "./UserList": "./src/components/UserList", 
      },
      shared: ["react", "react-dom"],
    }),
  ],
};

Webpack Configuration File (OrdersModule):

const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  devServer: {
    port: 3002,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "OrdersModule",
      filename: "remoteEntry.js",
      exposes: {
        "./OrderList": "./src/components/OrderList",
      },
      shared: ["react", "react-dom"],
    }),
  ],
};

Adım 2: Ana uygulamada modülleri import Edilmesi

Ana uygulama Dashboard, remotes tanımıyla bu iki mikro uygulamayı runtime'da uzaktan yüklüyor.

UserModule@http://localhost:3001/remoteEntry.js OrdersModule@http://localhost:3002/remoteEntry.js

gibi tanımlarla bağımlılıklar kuruluyor.

const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  devServer: {
    port: 3000,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "Dashboard",
      remotes: {
        UserModule: "UserModule@http://localhost:3001/remoteEntry.js",
        OrdersModule: "OrdersModule@http://localhost:3002/remoteEntry.js",
      },
      shared: ["react", "react-dom"],
    }),
  ],
};

Adım 3: React ile modülleri kullanıma alınması

Uygulama içinde React.lazy() ile UserList ve OrderList bileşenleri dinamik olarak yükleniyor. <Suspense> sayesinde yükleme sürecinde kullanıcıya bir "Loading..." mesajı gösteriliyor.

import React from "react";

const UserList = React.lazy(() => import("UserModule/UserList"));
const OrderList = React.lazy(() => import("OrdersModule/OrderList"));

function App() {
  return (
    <div>
      <h1>Dashboard</h1>
      <React.Suspense fallback={<div>Loading...</div>}>
        <UserList />
        <OrderList />
      </React.Suspense>
    </div>
  );
}

export default App;

Sonuç: Artık Dashboard, farklı portlarda çalışan iki ayrı uygulamayı runtime’da yükleyip ekrana getirebiliyor.

Ne Zaman Kullanmalıyız?

Microfrontend mimarisi yalnızca teknik bir tercih değil, aynı zamanda organizasyonel bir stratejidir. Doğru bağlamda uygulandığında, ekiplerin çalışma şeklini dönüştürür. Peki bu yaklaşımı tercih etmenizi gerektirecek işaretler neler olabilir?

Bağımsız Sürüm Yönetimine İhtiyacınız Varsa

Tek bir özelliği güncellemek için tüm frontend’i yeniden derlemek zorunda kalıyorsanız, bu ciddi bir yavaşlık yaratır. Microfrontend yapısıyla her modül kendi versiyonlama ve dağıtım döngüsüne sahip olabilir.

Teknoloji Takımlarınızın Bağımsızlık İhtiyacı Varsa

Tüm ekiplerin aynı framework ile çalışması zorunluysa, teknoloji seçimi kısıtlanır. Ancak microfrontend mimarisi sayesinde bir ekip React, bir diğeri Vue, hatta bir başkası Angular kullanabilir.

Monolitik Kod Tabanı Büyüdükçe Verim Düşüyorsa

Kod tabanınız büyüdükçe onboarding süreçleri uzuyorsa, herkes her şeyi bilmek zorunda kalıyorsa, artık parçalama zamanı gelmiş demektir. Microfrontend yapısı, domain bazlı modüler bir yapı kurmanıza yardımcı olur. Yeni gelen bir geliştirici sadece bir modül üzerinde uzmanlaşarak katkı sağlayabilir.

Referanslar

[embed]Micro Frontends How to split up your large, complex, frontend codebases into simple, composable, independently deliverable apps.martinfowler.com

[embed]Everything You Need to Know About Micro Frontends 21: Read Now - How 0.1% Companies Scale Development Teams (8 minutes)newsletter.systemdesign.one