Mikro frontendek: Részletes útmutató a Module Federation-höz

A webfejlesztés folyamatosan változó világában a nagy, összetett frontend alkalmazások építése és karbantartása komoly kihívássá válhat. A monolitikus frontendek, ahol a teljes alkalmazás egyetlen, szorosan csatolt kódbázis, gyakran lassabb fejlesztési ciklusokhoz, megnövekedett telepítési kockázatokhoz és az egyes funkciók skálázásának nehézségeihez vezetnek.

A mikro frontendek megoldást kínálnak azáltal, hogy a frontendet kisebb, független és kezelhető egységekre bontják. Ez az architekturális megközelítés lehetővé teszi a csapatok számára, hogy önállóan dolgozzanak, függetlenül telepítsenek, és kiválasszák a specifikus igényeiknek legmegfelelőbb technológiákat. A mikro frontendek megvalósítására az egyik legígéretesebb technológia a Module Federation.

Mik azok a mikro frontendek?

A mikro frontendek egy olyan architekturális stílus, amelyben egy frontend alkalmazás több kisebb, független frontend alkalmazásból áll össze. Ezeket az alkalmazásokat különböző csapatok fejleszthetik, telepíthetik és tarthatják karban, különböző technológiákat használva, és anélkül, hogy a buildelés során koordinációra lenne szükség. Minden egyes mikro frontend az átfogó alkalmazás egy adott funkciójáért vagy tartományáért felelős.

A mikro frontendek alapelvei:

• Technológiafüggetlen: A csapatok kiválaszthatják a számukra legmegfelelőbb technológiai csomagot az adott mikro frontendhez.
• Elszigetelt csapat kódbázisok: Minden mikro frontend saját, független kódbázissal rendelkezik, ami lehetővé teszi a független fejlesztést és telepítést.
• Független telepítés: Egy mikro frontenden végrehajtott változtatások nem igénylik a teljes alkalmazás újratelepítését.
• Autonóm csapatok: A csapatok felelősek a saját mikro frontendjükért és önállóan dolgozhatnak.
• Fokozatos frissítés: Az egyes mikro frontendek frissíthetők vagy cserélhetők anélkül, hogy ez a többi alkalmazásrészt érintené.

A Module Federation bemutatása

A Module Federation a Webpack 5-ben bevezetett JavaScript architektúra, amely lehetővé teszi, hogy egy JavaScript alkalmazás futásidőben dinamikusan töltsön be kódot egy másik alkalmazásból. Ez azt jelenti, hogy különböző alkalmazások megoszthatnak és felhasználhatnak egymásból modulokat, még akkor is, ha azok különböző technológiákkal készültek vagy különböző szervereken vannak telepítve.

A Module Federation erőteljes mechanizmust biztosít a mikro frontendek megvalósításához, lehetővé téve, hogy a különböző frontend alkalmazások modulokat tegyenek közzé és használjanak fel egymástól. Ez lehetővé teszi a különböző mikro frontendek zökkenőmentes integrálását egyetlen, egységes felhasználói élménnyé.

A Module Federation fő előnyei:

• Kódmegosztás: A mikro frontendek megoszthatnak kódot és komponenseket, csökkentve a duplikációt és javítva a konzisztenciát.
• Futásidejű integráció: A mikro frontendek futásidőben integrálhatók, lehetővé téve a dinamikus összeállítást és frissítéseket.
• Független telepítések: A mikro frontendek függetlenül telepíthetők anélkül, hogy más alkalmazásokkal való koordinációra vagy azok újratelepítésére lenne szükség.
• Technológiafüggetlen: A mikro frontendek különböző technológiákkal épülhetnek, és a Module Federation segítségével mégis integrálhatók.
• Csökkentett build idők: A kód és a függőségek megosztásával a Module Federation csökkentheti a build időket és javíthatja a fejlesztési hatékonyságot.

Hogyan működik a Module Federation

A Module Federation kétféle alkalmazástípust definiál: a host (gazda) és a remote (távoli) alkalmazást. A host alkalmazás a fő alkalmazás, amely más alkalmazásokból származó modulokat használ fel. A remote alkalmazás az, amely modulokat tesz elérhetővé más alkalmazások számára.

Amikor egy host alkalmazás egy olyan import utasítással találkozik, amely egy remote alkalmazás által közzétett modulra vonatkozik, a Webpack dinamikusan betölti a remote alkalmazást és futásidőben feloldja az importot. Ez lehetővé teszi a host alkalmazás számára, hogy a remote alkalmazás modulját úgy használja, mintha az a saját kódbázisának része lenne.

Kulcsfogalmak a Module Federationben:

• Host (Gazda): Az az alkalmazás, amely modulokat használ fel távoli alkalmazásokból.
• Remote (Távoli): Az az alkalmazás, amely modulokat tesz elérhetővé más alkalmazások számára.
• Exposed Modules (Közzétett modulok): Azok a modulok, amelyeket egy remote alkalmazás elérhetővé tesz más alkalmazások számára.
• Shared Modules (Megosztott modulok): A host és a remote alkalmazások között megosztott modulok, amelyek csökkentik a duplikációt és javítják a teljesítményt.

Mikro frontendek megvalósítása a Module Federation segítségével: Gyakorlati példa

Vegyünk egy egyszerű e-kereskedelmi alkalmazást három mikro frontenddel: egy termékkatalógus, egy bevásárlókosár és egy felhasználói profil.

Minden mikro frontendet egy külön csapat fejleszt és telepít függetlenül. A termékkatalógus React-tel, a bevásárlókosár Vue.js-sel, a felhasználói profil pedig Angular-ral készül. A fő alkalmazás host-ként működik, és integrálja ezt a három mikro frontendet egyetlen felhasználói felületbe.

1. lépés: A távoli alkalmazások konfigurálása

Először minden mikro frontendet remote alkalmazásként kell konfigurálnunk. Ez magában foglalja a közzétett és a használt megosztott modulok definiálását.

Termékkatalógus (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'],
    }),
  ],
};

Ebben a konfigurációban a ProductList komponenst tesszük közzé a ./src/components/ProductList fájlból. Emellett a react és react-dom modulokat is megosztjuk a host alkalmazással.

Bevásárlókosár (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'],
    }),
  ],
};

Itt a ShoppingCart komponenst tesszük közzé és a vue modult osztjuk meg.

Felhasználói profil (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'],
    }),
  ],
};

A UserProfile komponenst tesszük közzé, és megosztjuk a szükséges Angular modulokat.

2. lépés: A host alkalmazás konfigurálása

Ezután konfigurálnunk kell a host alkalmazást, hogy felhasználja a remote alkalmazások által közzétett modulokat. Ez magában foglalja a remote-ok definiálását és a megfelelő URL-címekhez való hozzárendelésüket.

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'],
    }),
  ],
};

Ebben a konfigurációban három remote-ot definiálunk: productCatalog, shoppingCart és userProfile. Mindegyik remote a saját remoteEntry.js fájljának URL-jéhez van rendelve. A közös függőségeket is megosztjuk az összes mikro frontend között.

3. lépés: A modulok felhasználása a host alkalmazásban

Végül felhasználhatjuk a remote alkalmazások által közzétett modulokat a host alkalmazásban. Ez dinamikus importokkal történő modulimportálást és a megfelelő helyeken való renderelésüket jelenti.

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-kereskedelmi alkalmazás</h1>
      <Suspense fallback={<div>Termékkatalógus betöltése...</div>}>
        <ProductList />
      </Suspense>
      <Suspense fallback={<div>Bevásárlókosár betöltése...</div>}>
        <ShoppingCart />
      <\Suspense>
      <Suspense fallback={<div>Felhasználói profil betöltése...</div>}>
        <UserProfile />
      </Suspense>
    </div>
  );
}

export default App;

A React.lazy és a Suspense segítségével dinamikusan töltjük be a modulokat a távoli alkalmazásokból. Ez biztosítja, hogy a modulok csak akkor töltődnek be, amikor szükség van rájuk, javítva ezzel az alkalmazás teljesítményét.

Haladó megfontolások és bevált gyakorlatok

Bár a Module Federation erőteljes mechanizmust biztosít a mikro frontendek implementálásához, számos haladó megfontolást és bevált gyakorlatot érdemes szem előtt tartani.

Verziókezelés és kompatibilitás

A mikro frontendek közötti modulmegosztás során kulcsfontosságú a verziók kezelése és a kompatibilitás biztosítása. A különböző mikro frontendeknek eltérő függőségeik lehetnek, vagy a megosztott modulok különböző verzióit igényelhetik. A szemantikus verziókövetés és a megosztott függőségek gondos kezelése segíthet elkerülni a konfliktusokat és biztosítani, hogy a mikro frontendek zökkenőmentesen működjenek együtt.

Fontolja meg olyan eszközök használatát, mint a `@module-federation/automatic-vendor-federation`, hogy segítsen automatizálni a megosztott függőségek kezelésének folyamatát.

Állapotkezelés

Az állapot megosztása a mikro frontendek között kihívást jelenthet. A különböző mikro frontendeknek eltérő állapotkezelési megoldásaik lehetnek, vagy eltérő hozzáférést igényelhetnek a megosztott állapothoz. A mikro frontend architektúrában többféle megközelítés létezik az állapot kezelésére, többek között:

• Megosztott állapotkezelő könyvtárak: Olyan megosztott állapotkezelő könyvtár használata, mint a Redux vagy a Zustand a globális állapot kezelésére.
• Egyedi események: Egyedi események használata az állapotváltozások kommunikálására a mikro frontendek között.
• URL-alapú állapot: Az állapot kódolása az URL-ben és megosztása a mikro frontendek között.

A legjobb megközelítés az alkalmazás specifikus igényeitől és a mikro frontendek közötti csatolás mértékétől függ.

Kommunikáció a mikro frontendek között

A mikro frontendeknek gyakran kell kommunikálniuk egymással adatcseréhez vagy műveletek indításához. Ennek több módja is van, többek között:

• Egyedi események: Egyedi események használata üzenetek küldésére a mikro frontendek között.
• Megosztott szolgáltatások: Olyan megosztott szolgáltatások létrehozása, amelyeket minden mikro frontend elérhet.
• Üzenetsorok: Üzenetsor használata a mikro frontendek közötti aszinkron kommunikációhoz.

A megfelelő kommunikációs mechanizmus kiválasztása az interakciók bonyolultságától és a mikro frontendek közötti kívánt leválasztás mértékétől függ.

Biztonsági megfontolások

A mikro frontendek implementálásakor fontos figyelembe venni a biztonsági következményeket. Minden mikro frontendnek felelősnek kell lennie a saját biztonságáért, beleértve a hitelesítést, az engedélyezést és az adatok érvényesítését. A kód és adatok megosztását a mikro frontendek között biztonságosan és megfelelő hozzáférés-szabályozással kell végezni.

Gondoskodjon a megfelelő bemeneti érvényesítésről és tisztításról a cross-site scripting (XSS) sebezhetőségek megelőzése érdekében. Rendszeresen frissítse a függőségeket a biztonsági rések javításához.

Tesztelés és monitorozás

A mikro frontendek tesztelése és monitorozása bonyolultabb lehet, mint a monolitikus alkalmazásoké. Minden mikro frontendet külön kell tesztelni, és integrációs teszteket kell végezni annak biztosítására, hogy a mikro frontendek megfelelően működjenek együtt. Monitorozást kell bevezetni minden mikro frontend teljesítményének és állapotának nyomon követésére.

Végezzen végponttól végpontig terjedő (end-to-end) teszteket, amelyek több mikro frontendet is átfognak, hogy zökkenőmentes felhasználói élményt biztosítson. Figyelje az alkalmazás teljesítménymutatóit a szűk keresztmetszetek és a fejlesztési területek azonosításához.

Module Federation vs. egyéb mikro frontend megközelítések

Bár a Module Federation egy hatékony eszköz a mikro frontendek építéséhez, nem ez az egyetlen elérhető megközelítés. Más gyakori mikro frontend megközelítések a következők:

• Build-idejű integráció: A mikro frontendek integrálása build időben olyan eszközökkel, mint a Webpack vagy a Parcel.
• Futásidejű integráció iframe-ekkel: A mikro frontendek beágyazása iframe-ekbe.
• Web Components: Web komponensek használata újrafelhasználható UI elemek létrehozására, amelyek megoszthatók a mikro frontendek között.
• Single-SPA: Olyan keretrendszer használata, mint a Single-SPA, a mikro frontendek útválasztásának és vezénylésének kezelésére.

Minden megközelítésnek megvannak a maga előnyei és hátrányai, és a legjobb megközelítés az alkalmazás specifikus igényeitől függ.

Module Federation vs. iframe-ek

Az iframe-ek erős elszigetelést biztosítanak, de kezelésük nehézkes lehet, és negatívan befolyásolhatják a teljesítményt az egyes iframe-ek többletterhelése miatt. Az iframe-ek közötti kommunikáció is bonyolult lehet.

A Module Federation zökkenőmentesebb integrációs élményt kínál jobb teljesítménnyel és könnyebb kommunikációval a mikro frontendek között. Azonban gondos menedzselést igényel a megosztott függőségek és verziók tekintetében.

Module Federation vs. Single-SPA

A Single-SPA egy meta-keretrendszer, amely egységes megközelítést biztosít a mikro frontendek kezeléséhez és vezényléséhez. Olyan funkciókat kínál, mint a megosztott kontextus, az útválasztás és az állapotkezelés.

A Module Federation a Single-SPA-val együtt használható, hogy rugalmas és skálázható architektúrát biztosítson komplex mikro frontend alkalmazások építéséhez.

A Module Federation felhasználási esetei

A Module Federation számos felhasználási esetre jól alkalmazható, többek között:

• Nagyvállalati alkalmazások: Nagy, összetett vállalati alkalmazások építése és karbantartása több csapattal.
• E-kereskedelmi platformok: Moduláris és skálázható e-kereskedelmi platformok létrehozása független funkciókkal, mint a termékkatalógusok, bevásárlókosarak és fizetési folyamatok.
• Tartalomkezelő rendszerek (CMS): Rugalmas és bővíthető CMS platformok fejlesztése testreszabható tartalommodulokkal.
• Irányítópultok és analitikai platformok: Interaktív irányítópultok és analitikai platformok építése független widgetekkel és vizualizációkkal.

Például vegyünk egy globális e-kereskedelmi vállalatot, mint az Amazon. Használhatnák a Module Federationt, hogy weboldalukat kisebb, független mikro frontendekre bontsák, mint például a termékoldalak, a bevásárlókosár, a fizetési folyamat és a felhasználói fiók kezelése. Ezen mikro frontendek mindegyikét külön csapatok fejleszthetnék és telepíthetnék, ami gyorsabb fejlesztési ciklusokat és nagyobb agilitást tenne lehetővé. Különböző technológiákat használhatnának minden egyes mikro frontendhez, például React-et a termékoldalakhoz, Vue.js-t a bevásárlókosárhoz és Angular-t a fizetési folyamathoz. Ez lehetővé teszi számukra, hogy kihasználják az egyes technológiák erősségeit, és a feladathoz legmegfelelőbb eszközt válasszák.

Egy másik példa egy multinacionális bank. Használhatnák a Module Federationt egy olyan banki platform építésére, amely az egyes régiók specifikus igényeihez igazodik. Különböző mikro frontendjeik lehetnének minden régióhoz, olyan funkciókkal, amelyek az adott régió banki szabályozásaira és ügyfélpreferenciáira jellemzőek. Ez lehetővé teszi számukra, hogy személyre szabottabb és relevánsabb élményt nyújtsanak ügyfeleiknek.

Összegzés

A Module Federation erőteljes és rugalmas megközelítést kínál a mikro frontendek építéséhez. Lehetővé teszi a csapatok számára, hogy függetlenül dolgozzanak, függetlenül telepítsenek, és kiválasszák az igényeiknek legmegfelelőbb technológiákat. A kód és a függőségek megosztásával a Module Federation csökkentheti a build időket, javíthatja a teljesítményt és egyszerűsítheti a fejlesztési folyamatot.

Bár a Module Federationnek megvannak a maga kihívásai, mint például a verziókezelés és az állapotkezelés, ezeket gondos tervezéssel és a megfelelő eszközök és technikák alkalmazásával kezelni lehet. A legjobb gyakorlatok követésével és az ebben az útmutatóban tárgyalt haladó szempontok figyelembevételével sikeresen implementálhat mikro frontendeket a Module Federation segítségével, és építhet skálázható, karbantartható és független frontend alkalmazásokat.

Ahogy a webfejlesztés világa folyamatosan fejlődik, a mikro frontendek egyre fontosabb architekturális mintává válnak. A Module Federation szilárd alapot biztosít a mikro frontendek építéséhez, és értékes eszköz minden frontend fejlesztő számára, aki modern, skálázható webalkalmazásokat szeretne építeni.