Mikrofrontendit: Kattava opas Module Federationiin

Jatkuvasti kehittyvässä web-kehityksen maailmassa suurten, monimutkaisten frontend-sovellusten rakentaminen ja ylläpito voi muodostua merkittäväksi haasteeksi. Monoliittiset frontendit, joissa koko sovellus on yksi, tiiviisti kytketty koodikanta, johtavat usein hitaampiin kehityssykleihin, kasvaneisiin julkaisuriskeihin ja vaikeuksiin skaalata yksittäisiä ominaisuuksia.

Mikrofrontendit tarjoavat ratkaisun pilkkomalla frontendin pienempiin, itsenäisiin ja hallittaviin yksiköihin. Tämä arkkitehtoninen lähestymistapa mahdollistaa tiimien työskentelyn itsenäisesti, julkaisujen tekemisen itsenäisesti ja omiin tarpeisiinsa parhaiten soveltuvien teknologioiden valitsemisen. Yksi lupaavimmista teknologioista mikrofrontendien toteuttamiseen on Module Federation.

Mitä mikrofrontendit ovat?

Mikrofrontendit ovat arkkitehtuurityyli, jossa frontend-sovellus koostuu useista pienemmistä, itsenäisistä frontend-sovelluksista. Nämä sovellukset voidaan kehittää, julkaista ja ylläpitää eri tiimien toimesta, käyttäen eri teknologioita ja ilman koordinointitarvetta käännösvaiheessa. Jokainen mikrofrontend on vastuussa tietystä ominaisuudesta tai toimialueesta kokonaissovelluksessa.

Mikrofrontendien keskeiset periaatteet:

• Teknologiariippumaton: Tiimit voivat valita parhaan teknologiapinon omaan mikrofrontendiinsä.
• Eristetyt tiimien koodikannat: Jokaisella mikrofrontendillä on oma itsenäinen koodikantansa, mikä mahdollistaa itsenäisen kehityksen ja julkaisut.
• Itsenäinen julkaisu: Muutokset yhteen mikrofrontendiin eivät vaadi koko sovelluksen uudelleenjulkaisua.
• Autonomiset tiimit: Tiimit ovat vastuussa omasta mikrofrontendistään ja voivat työskennellä itsenäisesti.
• Progressiivinen päivitys: Yksittäisiä mikrofrontendejä voidaan päivittää tai korvata vaikuttamatta muuhun sovellukseen.

Esittelyssä Module Federation

Module Federation on Webpack 5:ssä esitelty JavaScript-arkkitehtuuri, joka mahdollistaa JavaScript-sovelluksen dynaamisen koodin lataamisen toisesta sovelluksesta ajon aikana. Tämä tarkoittaa, että eri sovellukset voivat jakaa ja käyttää moduuleja toisiltaan, vaikka ne olisi rakennettu eri teknologioilla tai julkaistu eri palvelimille.

Module Federation tarjoaa tehokkaan mekanismin mikrofrontendien toteuttamiseen mahdollistamalla eri frontend-sovellusten moduulien paljastamisen ja kuluttamisen. Tämä mahdollistaa erilaisten mikrofrontendien saumattoman integroinnin yhtenäiseksi ja johdonmukaiseksi käyttäjäkokemukseksi.

Module Federationin keskeiset hyödyt:

• Koodin jakaminen: Mikrofrontendit voivat jakaa koodia ja komponentteja, mikä vähentää päällekkäisyyttä ja parantaa yhtenäisyyttä.
• Ajonaikainen integraatio: Mikrofrontendit voidaan integroida ajon aikana, mikä mahdollistaa dynaamisen koostamisen ja päivitykset.
• Itsenäiset julkaisut: Mikrofrontendit voidaan julkaista itsenäisesti ilman koordinointia tai muiden sovellusten uudelleenjulkaisua.
• Teknologiariippumaton: Mikrofrontendit voidaan rakentaa eri teknologioilla ja silti integroida Module Federationin avulla.
• Lyhyemmät käännösajat: Jakamalla koodia ja riippuvuuksia Module Federation voi lyhentää käännösaikoja ja parantaa kehityksen tehokkuutta.

Miten Module Federation toimii

Module Federation toimii määrittelemällä kahden tyyppisiä sovelluksia: isäntä (host) ja etäsovellus (remote). Isäntäsovellus on pääsovellus, joka kuluttaa moduuleja muista sovelluksista. Etäsovellus on sovellus, joka paljastaa moduuleja muiden sovellusten kulutettavaksi.

Kun isäntäsovellus kohtaa import-lausekkeen moduulille, jonka etäsovellus on paljastanut, Webpack lataa dynaamisesti etäsovelluksen ja ratkaisee importin ajon aikana. Tämä antaa isäntäsovellukselle mahdollisuuden käyttää etäsovelluksen moduulia ikään kuin se olisi osa sen omaa koodikantaa.

Module Federationin avainkäsitteet:

• Isäntä (Host): Sovellus, joka kuluttaa moduuleja etäsovelluksista.
• Etäsovellus (Remote): Sovellus, joka paljastaa moduuleja muiden sovellusten kulutettavaksi.
• Paljastetut moduulit (Exposed Modules): Moduulit, jotka etäsovellus asettaa saataville muiden sovellusten kulutettavaksi.
• Jaetut moduulit (Shared Modules): Moduulit, jotka jaetaan isäntä- ja etäsovellusten välillä, vähentäen päällekkäisyyttä ja parantaen suorituskykyä.

Mikrofrontendien toteuttaminen Module Federationilla: Käytännön esimerkki

Tarkastellaan yksinkertaista verkkokauppasovellusta, jossa on kolme mikrofrontendiä: tuotekatalogi, ostoskori ja käyttäjäprofiili.

Jokainen mikrofrontend on erillisen tiimin kehittämä ja julkaistu itsenäisesti. Tuotekatalogi on rakennettu Reactilla, ostoskori Vue.js:llä ja käyttäjäprofiili Angularilla. Pääsovellus toimii isäntänä ja integroi nämä kolme mikrofrontendiä yhdeksi käyttöliittymäksi.

Vaihe 1: Etäsovellusten konfigurointi

Ensin meidän on konfiguroitava jokainen mikrofrontend etäsovellukseksi. Tämä tarkoittaa paljastettavien moduulien ja käytettävien jaettujen moduulien määrittämistä.

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

Tässä konfiguraatiossa paljastamme ProductList-komponentin tiedostosta ./src/components/ProductList. Jaamme myös react- ja react-dom-moduulit isäntäsovelluksen kanssa.

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

Tässä paljastamme ShoppingCart-komponentin ja jaamme vue-moduulin.

Käyttäjäprofiili (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'],
    }),
  ],
};

Paljastamme UserProfile-komponentin ja jaamme tarvittavat Angular-moduulit.

Vaihe 2: Isäntäsovelluksen konfigurointi

Seuraavaksi meidän on konfiguroitava isäntäsovellus kuluttamaan etäsovellusten paljastamia moduuleja. Tämä tarkoittaa etäsovellusten määrittämistä ja niiden yhdistämistä vastaaviin URL-osoitteisiin.

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

Tässä konfiguraatiossa määrittelemme kolme etäsovellusta: productCatalog, shoppingCart ja userProfile. Jokainen etäsovellus on yhdistetty sen remoteEntry.js-tiedoston URL-osoitteeseen. Jaamme myös yhteiset riippuvuudet kaikkien mikrofrontendien kesken.

Vaihe 3: Moduulien kuluttaminen isäntäsovelluksessa

Lopuksi voimme kuluttaa etäsovellusten paljastamia moduuleja isäntäsovelluksessa. Tämä tarkoittaa moduulien tuomista dynaamisilla importeilla ja niiden renderöintiä sopivissa paikoissa.

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>Verkkokauppasovellus</h1>
      <Suspense fallback={<div>Ladataan tuotekatalogia...</div>}>
        <ProductList />
      </Suspense>
      <Suspense fallback={<div>Ladataan ostoskoria...</div>}>
        <ShoppingCart />
      <\Suspense>
      <Suspense fallback={<div>Ladataan käyttäjäprofiilia...</div>}>
        <UserProfile />
      </Suspense>
    </div>
  );
}

export default App;

Käytämme React.lazy ja Suspense-komponentteja ladataksemme dynaamisesti moduuleja etäsovelluksista. Tämä varmistaa, että moduulit ladataan vain tarvittaessa, mikä parantaa sovelluksen suorituskykyä.

Edistyneet näkökohdat ja parhaat käytännöt

Vaikka Module Federation tarjoaa tehokkaan mekanismin mikrofrontendien toteuttamiseen, on olemassa useita edistyneitä näkökohtia ja parhaita käytäntöjä, jotka on hyvä pitää mielessä.

Versiohallinta ja yhteensopivuus

Kun moduuleja jaetaan mikrofrontendien välillä, on ratkaisevan tärkeää hallita versioita ja varmistaa yhteensopivuus. Eri mikrofrontendillä voi olla erilaisia riippuvuuksia tai ne voivat vaatia eri versioita jaetuista moduuleista. Semanttisen versioinnin käyttö ja jaettujen riippuvuuksien huolellinen hallinta voivat auttaa välttämään konflikteja ja varmistamaan, että mikrofrontendit toimivat saumattomasti yhdessä.

Harkitse työkaluja, kuten `@module-federation/automatic-vendor-federation`, jotka auttavat automatisoimaan jaettujen riippuvuuksien hallintaprosessia.

Tilan hallinta

Tilan jakaminen mikrofrontendien välillä voi olla haastavaa. Eri mikrofrontendillä voi olla erilaisia tilanhallintaratkaisuja tai ne voivat vaatia erilaista pääsyä jaettuun tilaan. Mikrofrontend-arkkitehtuurissa on useita lähestymistapoja tilan hallintaan, kuten:

• Jaetut tilankirjastot: Käyttämällä jaettua tilankirjastoa, kuten Reduxia tai Zustandia, globaalin tilan hallintaan.
• Mukautetut tapahtumat: Käyttämällä mukautettuja tapahtumia tilamuutosten viestimiseen mikrofrontendien välillä.
• URL-pohjainen tila: Koodaamalla tila URL-osoitteeseen ja jakamalla sen mikrofrontendien välillä.

Paras lähestymistapa riippuu sovelluksen erityistarpeista ja mikrofrontendien välisen kytkennän tasosta.

Kommunikaatio mikrofrontendien välillä

Mikrofrontendien on usein kommunikoitava keskenään vaihtaakseen dataa tai käynnistääkseen toimintoja. Tähän on useita tapoja, kuten:

• Mukautetut tapahtumat: Käyttämällä mukautettuja tapahtumia viestien lähettämiseen mikrofrontendien välillä.
• Jaetut palvelut: Luomalla jaettuja palveluita, joihin kaikki mikrofrontendit voivat päästä käsiksi.
• Viestijonot: Käyttämällä viestijonoa asynkroniseen kommunikointiin mikrofrontendien välillä.

Oikean viestintämekanismin valinta riippuu vuorovaikutusten monimutkaisuudesta ja mikrofrontendien välillä halutusta irtautumisen tasosta.

Tietoturvanäkökohdat

Mikrofrontendejä toteutettaessa on tärkeää ottaa huomioon tietoturvavaikutukset. Jokaisen mikrofrontendin tulisi olla vastuussa omasta tietoturvastaan, mukaan lukien todennus, valtuutus ja datan validointi. Koodin ja datan jakaminen mikrofrontendien välillä tulee tehdä turvallisesti ja asianmukaisilla pääsynhallinnoilla.

Varmista asianmukainen syötteen validointi ja puhdistus estääksesi sivustojenväliset skriptaushyökkäykset (XSS). Päivitä riippuvuudet säännöllisesti tietoturva-aukkojen korjaamiseksi.

Testaus ja valvonta

Mikrofrontendien testaaminen ja valvonta voi olla monimutkaisempaa kuin monoliittisten sovellusten testaaminen ja valvonta. Jokainen mikrofrontend tulisi testata itsenäisesti, ja integraatiotestit tulisi suorittaa varmistaakseen, että mikrofrontendit toimivat oikein yhdessä. Valvonta tulisi toteuttaa jokaisen mikrofrontendin suorituskyvyn ja tilan seuraamiseksi.

Toteuta päästä-päähän-testejä (end-to-end), jotka kattavat useita mikrofrontendejä, varmistaaksesi saumattoman käyttäjäkokemuksen. Seuraa sovelluksen suorituskykymittareita pullonkaulojen ja parannuskohteiden tunnistamiseksi.

Module Federation vs. muut mikrofrontend-lähestymistavat

Vaikka Module Federation on tehokas työkalu mikrofrontendien rakentamiseen, se ei ole ainoa saatavilla oleva lähestymistapa. Muita yleisiä mikrofrontend-lähestymistapoja ovat:

• Käännösaikainen integraatio: Mikrofrontendien integrointi käännösvaiheessa käyttämällä työkaluja, kuten Webpack tai Parcel.
• Ajonaikainen integraatio iframeilla: Mikrofrontendien upottaminen iframe-elementteihin.
• Web-komponentit: Web-komponenttien käyttö uudelleenkäytettävien käyttöliittymäelementtien luomiseen, joita voidaan jakaa mikrofrontendien välillä.
• Single-SPA: Käyttämällä kehystä, kuten Single-SPA, mikrofrontendien reitityksen ja orkestroinnin hallintaan.

Jokaisella lähestymistavalla on omat etunsa ja haittansa, ja paras lähestymistapa riippuu sovelluksen erityistarpeista.

Module Federation vs. iframet

Iframet tarjoavat vahvan eristyksen, mutta niiden hallinta voi olla hankalaa ja ne voivat vaikuttaa negatiivisesti suorituskykyyn jokaisen iframen aiheuttaman yleiskustannuksen vuoksi. Myös viestintä iframejen välillä voi olla monimutkaista.

Module Federation tarjoaa saumattomamman integraatiokokemuksen paremmalla suorituskyvyllä ja helpommalla viestinnällä mikrofrontendien välillä. Se vaatii kuitenkin jaettujen riippuvuuksien ja versioiden huolellista hallintaa.

Module Federation vs. Single-SPA

Single-SPA on metakehys, joka tarjoaa yhtenäisen lähestymistavan mikrofrontendien hallintaan ja orkestrointiin. Se tarjoaa ominaisuuksia, kuten jaetun kontekstin, reitityksen ja tilanhallinnan.

Module Federationia voidaan käyttää yhdessä Single-SPA:n kanssa joustavan ja skaalautuvan arkkitehtuurin tarjoamiseksi monimutkaisten mikrofrontend-sovellusten rakentamiseen.

Module Federationin käyttökohteet

Module Federation soveltuu hyvin monenlaisiin käyttötapauksiin, kuten:

• Suuret yrityssovellukset: Suurten, monimutkaisten yrityssovellusten rakentaminen ja ylläpito useiden tiimien kanssa.
• Verkkokauppa-alustat: Modulaaristen ja skaalautuvien verkkokauppa-alustojen luominen itsenäisillä ominaisuuksilla, kuten tuotekatalogeilla, ostoskoreilla ja kassaprosesseilla.
• Sisällönhallintajärjestelmät (CMS): Joustavien ja laajennettavien CMS-alustojen kehittäminen muokattavilla sisältömoduuleilla.
• Kojelaudat ja analytiikka-alustat: Interaktiivisten kojelautojen ja analytiikka-alustojen rakentaminen itsenäisillä widgeteillä ja visualisoinneilla.

Esimerkiksi globaali verkkokauppayritys, kuten Amazon, voisi käyttää Module Federationia jakaakseen verkkosivustonsa pienempiin, itsenäisiin mikrofrontendeihin, kuten tuotesivuihin, ostoskoriin, kassaprosessiin ja käyttäjätilin hallintaosioon. Jokainen näistä mikrofrontendistä voitaisiin kehittää ja julkaista erillisissä tiimeissä, mikä mahdollistaisi nopeammat kehityssyklit ja paremman ketteryyden. He voisivat käyttää eri teknologioita kullekin mikrofrontendille, esimerkiksi Reactia tuotesivuille, Vue.js:ää ostoskorille ja Angularia kassaprosessille. Tämä antaa heille mahdollisuuden hyödyntää kunkin teknologian vahvuuksia ja valita paras työkalu kuhunkin tehtävään.

Toinen esimerkki on monikansallinen pankki. He voisivat käyttää Module Federationia rakentaakseen pankkialustan, joka on räätälöity kunkin alueen erityistarpeisiin. Heillä voisi olla eri mikrofrontendit kullekin alueelle, ominaisuuksilla, jotka ovat ominaisia kyseisen alueen pankkisäännöksille ja asiakkaiden mieltymyksille. Tämä antaa heille mahdollisuuden tarjota henkilökohtaisemman ja osuvamman kokemuksen asiakkailleen.

Yhteenveto

Module Federation tarjoaa tehokkaan ja joustavan lähestymistavan mikrofrontendien rakentamiseen. Se mahdollistaa tiimien työskentelyn itsenäisesti, julkaisujen tekemisen itsenäisesti ja tarpeisiinsa parhaiten soveltuvien teknologioiden valitsemisen. Jakamalla koodia ja riippuvuuksia Module Federation voi lyhentää käännösaikoja, parantaa suorituskykyä ja yksinkertaistaa kehitysprosessia.

Vaikka Module Federationilla on haasteensa, kuten versio- ja tilanhallinta, nämä voidaan ratkaista huolellisella suunnittelulla ja sopivien työkalujen ja tekniikoiden avulla. Noudattamalla parhaita käytäntöjä ja ottamalla huomioon tässä oppaassa käsitellyt edistyneet näkökohdat, voit onnistuneesti toteuttaa mikrofrontendejä Module Federationilla ja rakentaa skaalautuvia, ylläpidettäviä ja itsenäisiä frontend-sovelluksia.

Web-kehityksen maiseman jatkaessa kehittymistään mikrofrontendit ovat tulossa yhä tärkeämmäksi arkkitehtuurimalliksi. Module Federation tarjoaa vankan perustan mikrofrontendien rakentamiselle ja on arvokas työkalu jokaiselle frontend-kehittäjälle, joka haluaa rakentaa moderneja, skaalautuvia verkkosovelluksia.