Giriş

Geleneksel monolit frontend yapılarında uygulama büyüdükçe kod tabanı karmaşıklaşır, ekipler birbirini bloke eder ve küçük bir değişiklik bile tüm uygulamanın yeniden deploy edilmesini gerektirir. Bu noktada Mikro Frontend yaklaşımı, backend tarafındaki mikro servis felsefesini frontend dünyasına taşıyarak bu problemlere çözüm sunar.

Bu makalemde mikro frontend nedir, neden kullanılır, hangi yaklaşımlar vardır ve gerçekçi kod örnekleriyle nasıl uygulanır sorularını cevaplamaya çalışacağım.

Mikro Frontend Nedir?

Mikro frontend, büyük bir frontend uygulamasının bağımsız, küçük ve kendi başına deploy edilebilir parçalara bölünmesi yaklaşımıdır.

Her mikro frontend;

• Kendi kod tabanına sahiptir,
• Kendi deploy & build sürecini yönetir,
• Farklı frameworkler kullanılabilir.

Neden Mikro Frontend?

• Her ekip, kendi alanından sorumlu olur,
• Örneğin bir butonun rengini değiştirdiğinizde, tümden projeyi deploy etmezsiniz,
• Farklı ekipler, farklı frameworkler ile çalışabilir,
• Birbirinden bağımsız oldukları için kod çakışmaları en aza indirgenir.

Kullanılmasına Gerek Olmadığı Durumlar

• Küçük projelerde,
• Uygulamayı tek kişinin kodladığı durumlarda,
• Basit landing sayfalarında.

Mikro Frontend Yaklaşımları

Buildtime Integration: Parçalara bölünmüş yapılar build sırasında birleştirilir.
Runtime Integration: Parçalara bölünmüş yapılar çalışma zamanında birleştirilir. (En yaygın kullanım)
Edgeside Includes: Sunucu tarafında HTML olarak birleştirme yapılır.

Module Federation ile Mikro Frontend

Webpack 5 ile gelen Module Federation, mikro frontend dünyasında en çok kullanılan çözümdür.

Aşağıda kod bloklarındaki örnek, module federation yöntemine örnek bir yapıdır.

Örnek Senaryo

• host-app -> Ana Uygulama
• prouct-app -> Ürün Listesi
• cart-app -> Ürün Sepeti

1. Host App (Uzaktan)

webpack.config.js

    const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

    module.exports = {
        plugins: [
            new ModuleFederationPlugin({
                name: "productApp",
                filename: "remoteEntry.js",
                exposes: {
                    "./ProductList": "./src/ProductList",
                },
                shared: ["react", "react-dom"],
            }),
        ],
    };

ProductList.js

    export default function ProductList() {
        return (
            <div>
                <h2>Ürünler</h2>
                <ul>
                    <li>Gitar</li>
                    <li>Piyano</li>
                    <li>Keman</li>
                </ul>
            </div>
        );
    }

2. Host App

webpack.config.js

    const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

    module.exports = {
        plugins: [
            new ModuleFederationPlugin({
                name: "host",
                remotes: {
                    productApp: "productApp@http://localhost:3001/remoteEntry.js",
                },
                shared: ["react", "react-dom"],
            }),
        ],
    };
    

App.js

    import React, { Suspense } from "react";

    const ProductList = React.lazy(() => import("productApp/ProductList"));

    export default function App() {
        return (
            <Suspense fallback={<div>Yükleniyor...</div>}>
                <ProductList />
            </Suspense>
        );
    }

Mikro Frontend & Monolit Frontend

Gerçek Hayatta Kullanım Senaryoları

• E-ticaret platformları,
• Bankacılık Uygulamaları,
• Büyük yönetim panelleri,
• SaaS ürünleri.

Sonuç

Mikro frontend mimarisi, doğru projede ve doğru ekip yapısında kullanıldığında ciddi avantajlar sağlar. Ancak getirdiği operasyonel ve mimari karmaşıklık göz ardı edilmemelidir.

Eğer;

• Büyük bir ekip,
• Uzun vadede ölçeklenebilirlik,
• Bağımsız geliştirme ihtiyacı

varsa, mikro frontend en uygun çözüm olacaktır.