M

MLOG

Türkçe

Micro Frontend mimarilerinde Modül Federasyonu'nun gücünü keşfedin. Modern web uygulamaları için ölçeklenebilir, sürdürülebilir ve bağımsız frontend'ler oluşturmayı öğrenin.

Micro Frontend'ler: Kapsamlı Bir Modül Federasyonu Rehberi

Sürekli gelişen web geliştirme dünyasında, büyük ve karmaşık frontend uygulamaları oluşturmak ve sürdürmek önemli bir zorluk haline gelebilir. Tüm uygulamanın tek ve sıkıca bağlı bir kod tabanı olduğu monolitik frontend'ler, genellikle daha yavaş geliştirme döngülerine, artan dağıtım risklerine ve bireysel özelliklerin ölçeklendirilmesinde zorluklara yol açar.

Micro Frontend'ler, frontend'i daha küçük, bağımsız ve yönetilebilir birimlere ayırarak bir çözüm sunar. Bu mimari yaklaşım, ekiplerin otonom olarak çalışmasını, bağımsız olarak dağıtım yapmasını ve kendi özel ihtiyaçlarına en uygun teknolojileri seçmesini sağlar. Micro Frontend'leri uygulamak için en umut verici teknolojilerden biri Modül Federasyonu'dur.

Micro Frontend'ler Nedir?

Micro Frontend'ler, bir frontend uygulamasının birden çok küçük, bağımsız frontend uygulamasından oluştuğu bir mimari tarzdır. Bu uygulamalar farklı ekipler tarafından, farklı teknolojiler kullanılarak ve derleme zamanında koordinasyon gerektirmeden geliştirilebilir, dağıtılabilir ve sürdürülebilir. Her Micro Frontend, genel uygulamanın belirli bir özelliğinden veya alanından sorumludur.

Micro Frontend'lerin Temel İlkeleri:

Modül Federasyonu'na Giriş

Modül Federasyonu, Webpack 5 ile sunulan ve bir JavaScript uygulamasının çalışma zamanında başka bir uygulamadan dinamik olarak kod yüklemesine olanak tanıyan bir JavaScript mimarisidir. Bu, farklı uygulamaların, farklı teknolojilerle oluşturulmuş veya farklı sunucularda dağıtılmış olsalar bile, birbirlerinden modülleri paylaşabileceği ve tüketebileceği anlamına gelir.

Modül Federasyonu, farklı frontend uygulamalarının birbirlerinden modülleri dışa aktarmasını ve tüketmesini sağlayarak Micro Frontend'leri uygulamak için güçlü bir mekanizma sunar. Bu, farklı Micro Frontend'lerin tek ve tutarlı bir kullanıcı deneyimine sorunsuz bir şekilde entegre edilmesini sağlar.

Modül Federasyonu'nun Temel Faydaları:

Modül Federasyonu Nasıl Çalışır?

Modül Federasyonu, host (ana makine) ve remote (uzak) olmak üzere iki tür uygulama tanımlayarak çalışır. Host uygulama, diğer uygulamalardan modül tüketen ana uygulamadır. Remote uygulama ise diğer uygulamalar tarafından tüketilmek üzere modülleri dışa aktaran bir uygulamadır.

Bir host uygulaması, bir remote uygulama tarafından dışa aktarılan bir modül için bir import ifadesiyle karşılaştığında, Webpack dinamik olarak remote uygulamayı yükler ve import işlemini çalışma zamanında çözer. Bu, host uygulamanın remote uygulamadaki modülü sanki kendi kod tabanının bir parçasıymış gibi kullanmasına olanak tanır.

Modül Federasyonu'ndaki Temel Kavramlar:

Modül Federasyonu ile Micro Frontend Uygulaması: Pratik Bir Örnek

Basit bir e-ticaret uygulaması düşünelim: ürün kataloğu, alışveriş sepeti ve kullanıcı profili olmak üzere üç Micro Frontend'den oluşsun.

Her Micro Frontend ayrı bir ekip tarafından geliştirilir ve bağımsız olarak dağıtılır. Ürün kataloğu React ile, alışveriş sepeti Vue.js ile ve kullanıcı profili Angular ile oluşturulmuştur. Ana uygulama, host olarak hareket eder ve bu üç Micro Frontend'i tek bir kullanıcı arayüzünde birleştirir.

Adım 1: Remote Uygulamaları Yapılandırma

Öncelikle, her Micro Frontend'i bir remote uygulama olarak yapılandırmamız gerekiyor. Bu, dışa aktarılacak modülleri ve kullanılacak paylaşılan modülleri tanımlamayı içerir.

Ürün Kataloğu (React)

webpack.config.js:

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

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

Bu yapılandırmada, ProductList bileşenini ./src/components/ProductList dosyasından dışa aktarıyoruz. Ayrıca react ve react-dom modüllerini host uygulama ile paylaşıyoruz.

Alışveriş Sepeti (Vue.js)

webpack.config.js:

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

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'shoppingCart',
      filename: 'remoteEntry.js',
      exposes: {
        './ShoppingCart': './src/components/ShoppingCart',
      },
      shared: ['vue'],
    }),
  ],
};

Burada, ShoppingCart bileşenini dışa aktarıyor ve vue modülünü paylaşıyoruz.

Kullanıcı Profili (Angular)

webpack.config.js:

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

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'userProfile',
      filename: 'remoteEntry.js',
      exposes: {
        './UserProfile': './src/components/UserProfile',
      },
      shared: ['@angular/core', '@angular/common', '@angular/router'],
    }),
  ],
};

UserProfile bileşenini dışa aktarıyor ve gerekli Angular modüllerini paylaşıyoruz.

Adım 2: Host Uygulamayı Yapılandırma

Ardından, host uygulamayı, remote uygulamalar tarafından dışa aktarılan modülleri tüketmek üzere yapılandırmamız gerekiyor. Bu, remote'ları tanımlamayı ve bunları ilgili URL'lerine eşlemeyi içerir.

webpack.config.js:

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

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'mainApp',
      remotes: {
        productCatalog: 'productCatalog@http://localhost:3001/remoteEntry.js',
        shoppingCart: 'shoppingCart@http://localhost:3002/remoteEntry.js',
        userProfile: 'userProfile@http://localhost:3003/remoteEntry.js',
      },
      shared: ['react', 'react-dom', 'vue', '@angular/core', '@angular/common', '@angular/router'],
    }),
  ],
};

Bu yapılandırmada, productCatalog, shoppingCart ve userProfile olmak üzere üç remote tanımlıyoruz. Her remote, kendi remoteEntry.js dosyasının URL'sine eşlenmiştir. Ayrıca tüm Micro Frontend'ler arasında ortak bağımlılıkları paylaşıyoruz.

Adım 3: Modülleri Host Uygulamada Tüketme

Son olarak, remote uygulamalar tarafından dışa aktarılan modülleri host uygulamada tüketebiliriz. Bu, modülleri dinamik import'lar kullanarak içe aktarmayı ve bunları uygun yerlerde render etmeyi içerir.

import React, { Suspense } from 'react';
const ProductList = React.lazy(() => import('productCatalog/ProductList'));
const ShoppingCart = React.lazy(() => import('shoppingCart/ShoppingCart'));
const UserProfile = React.lazy(() => import('userProfile/UserProfile'));

function App() {
  return (
    <div>
      <h1>E-ticaret Uygulaması</h1>
      <Suspense fallback={<div>Ürün Kataloğu Yükleniyor...</div>}>
        <ProductList />
      </Suspense>
      <Suspense fallback={<div>Alışveriş Sepeti Yükleniyor...</div>}>
        <ShoppingCart />
      <\Suspense>
      <Suspense fallback={<div>Kullanıcı Profili Yükleniyor...</div>}>
        <UserProfile />
      </Suspense>
    </div>
  );
}

export default App;

Remote uygulamalardan modülleri dinamik olarak yüklemek için React.lazy ve Suspense kullanıyoruz. Bu, modüllerin yalnızca ihtiyaç duyulduğunda yüklenmesini sağlayarak uygulamanın performansını artırır.

İleri Düzey Hususlar ve En İyi Uygulamalar

Modül Federasyonu, Micro Frontend'leri uygulamak için güçlü bir mekanizma sunsa da, akılda tutulması gereken birkaç ileri düzey husus ve en iyi uygulama vardır.

Sürüm Yönetimi ve Uyumluluk

Micro Frontend'ler arasında modül paylaşırken, sürümleri yönetmek ve uyumluluğu sağlamak çok önemlidir. Farklı Micro Frontend'ler farklı bağımlılıklara sahip olabilir veya paylaşılan modüllerin farklı sürümlerini gerektirebilir. Semantik sürümleme kullanmak ve paylaşılan bağımlılıkları dikkatli bir şekilde yönetmek, çakışmaları önlemeye ve Micro Frontend'lerin sorunsuz bir şekilde birlikte çalışmasını sağlamaya yardımcı olabilir.

Paylaşılan bağımlılıkları yönetme sürecini otomatikleştirmeye yardımcı olmak için `@module-federation/automatic-vendor-federation` gibi araçları göz önünde bulundurun.

Durum (State) Yönetimi

Micro Frontend'ler arasında durum paylaşımı zorlayıcı olabilir. Farklı Micro Frontend'ler farklı durum yönetimi çözümlerine sahip olabilir veya paylaşılan duruma farklı erişim gerektirebilir. Bir Micro Frontend mimarisinde durumu yönetmek için birkaç yaklaşım vardır, bunlar arasında:

En iyi yaklaşım, uygulamanın özel ihtiyaçlarına ve Micro Frontend'ler arasındaki bağlanma düzeyine bağlıdır.

Micro Frontend'ler Arası İletişim

Micro Frontend'lerin genellikle veri alışverişi yapmak veya eylemleri tetiklemek için birbirleriyle iletişim kurması gerekir. Bunu başarmanın birkaç yolu vardır, bunlar arasında:

Doğru iletişim mekanizmasını seçmek, etkileşimlerin karmaşıklığına ve Micro Frontend'ler arasında istenen ayrılma düzeyine bağlıdır.

Güvenlik Hususları

Micro Frontend'leri uygularken, güvenlik sonuçlarını göz önünde bulundurmak önemlidir. Her Micro Frontend, kimlik doğrulama, yetkilendirme ve veri doğrulama dahil olmak üzere kendi güvenliğinden sorumlu olmalıdır. Micro Frontend'ler arasında kod ve veri paylaşımı güvenli bir şekilde ve uygun erişim kontrolleriyle yapılmalıdır.

Siteler arası komut dosyası çalıştırma (XSS) güvenlik açıklarını önlemek için uygun girdi doğrulama ve temizleme işlemlerini sağlayın. Güvenlik açıklarını düzeltmek için bağımlılıkları düzenli olarak güncelleyin.

Test ve İzleme

Micro Frontend'leri test etmek ve izlemek, monolitik uygulamaları test etmek ve izlemekten daha karmaşık olabilir. Her Micro Frontend bağımsız olarak test edilmeli ve Micro Frontend'lerin doğru şekilde birlikte çalıştığından emin olmak için entegrasyon testleri yapılmalıdır. Her Micro Frontend'in performansını ve sağlığını izlemek için izleme uygulanmalıdır.

Sorunsuz bir kullanıcı deneyimi sağlamak için birden çok Micro Frontend'i kapsayan uçtan uca testler uygulayın. Darboğazları ve iyileştirme alanlarını belirlemek için uygulama performans metriklerini izleyin.

Modül Federasyonu ve Diğer Micro Frontend Yaklaşımları

Modül Federasyonu, Micro Frontend'ler oluşturmak için güçlü bir araç olsa da, mevcut tek yaklaşım bu değildir. Diğer yaygın Micro Frontend yaklaşımları şunları içerir:

Her yaklaşımın kendi avantajları ve dezavantajları vardır ve en iyi yaklaşım, uygulamanın özel ihtiyaçlarına bağlıdır.

Modül Federasyonu vs. iframe'ler

iframe'ler güçlü bir yalıtım sağlar ancak yönetimi zahmetli olabilir ve her bir iframe'in ek yükü nedeniyle performansı olumsuz etkileyebilir. iframe'ler arasındaki iletişim de karmaşık olabilir.

Modül Federasyonu, daha iyi performans ve Micro Frontend'ler arasında daha kolay iletişim ile daha sorunsuz bir entegrasyon deneyimi sunar. Ancak, paylaşılan bağımlılıkların ve sürümlerin dikkatli bir şekilde yönetilmesini gerektirir.

Modül Federasyonu vs. Single-SPA

Single-SPA, Micro Frontend'leri yönetmek ve düzenlemek için birleşik bir yaklaşım sunan bir meta-çerçevedir. Paylaşılan bağlam, yönlendirme ve durum yönetimi gibi özellikler sunar.

Modül Federasyonu, karmaşık Micro Frontend uygulamaları oluşturmak için esnek ve ölçeklenebilir bir mimari sağlamak üzere Single-SPA ile birlikte kullanılabilir.

Modül Federasyonu için Kullanım Alanları

Modül Federasyonu, aşağıdakiler de dahil olmak üzere çeşitli kullanım durumları için çok uygundur:

Örneğin, Amazon gibi küresel bir e-ticaret şirketini düşünün. Web sitelerini, ürün sayfaları, alışveriş sepeti, ödeme süreci ve kullanıcı hesabı yönetimi bölümü gibi daha küçük, bağımsız Micro Frontend'lere ayırmak için Modül Federasyonu'nu kullanabilirlerdi. Bu Micro Frontend'lerin her biri ayrı ekipler tarafından geliştirilip dağıtılabilir, bu da daha hızlı geliştirme döngülerine ve artan çevikliğe olanak tanır. Her Micro Frontend için farklı teknolojiler kullanabilirlerdi; örneğin ürün sayfaları için React, alışveriş sepeti için Vue.js ve ödeme süreci için Angular. Bu, her teknolojinin güçlü yanlarından yararlanmalarını ve iş için en iyi aracı seçmelerini sağlar.

Başka bir örnek ise çok uluslu bir bankadır. Her bölgenin özel ihtiyaçlarına göre uyarlanmış bir bankacılık platformu oluşturmak için Modül Federasyonu'nu kullanabilirlerdi. Her bölge için, o bölgenin bankacılık düzenlemelerine ve müşteri tercihlerine özgü özelliklere sahip farklı Micro Frontend'lere sahip olabilirlerdi. Bu, müşterilerine daha kişiselleştirilmiş ve ilgili bir deneyim sunmalarını sağlar.

Sonuç

Modül Federasyonu, Micro Frontend'ler oluşturmak için güçlü ve esnek bir yaklaşım sunar. Ekiplerin bağımsız çalışmasını, bağımsız dağıtım yapmasını ve ihtiyaçlarına en uygun teknolojileri seçmesini sağlar. Kod ve bağımlılıkları paylaşarak, Modül Federasyonu derleme sürelerini azaltabilir, performansı artırabilir ve geliştirme sürecini basitleştirebilir.

Modül Federasyonu'nun sürüm yönetimi ve durum yönetimi gibi zorlukları olsa da, bunlar dikkatli planlama ve uygun araç ve tekniklerin kullanımıyla ele alınabilir. En iyi uygulamaları takip ederek ve bu kılavuzda tartışılan ileri düzey hususları göz önünde bulundurarak, Modül Federasyonu ile Micro Frontend'leri başarıyla uygulayabilir ve ölçeklenebilir, sürdürülebilir ve bağımsız frontend uygulamaları oluşturabilirsiniz.

Web geliştirme dünyası gelişmeye devam ettikçe, Micro Frontend'ler giderek daha önemli bir mimari model haline gelmektedir. Modül Federasyonu, Micro Frontend'ler oluşturmak için sağlam bir temel sağlar ve modern, ölçeklenebilir web uygulamaları oluşturmak isteyen her frontend geliştiricisi için değerli bir araçtır.