Frontend-arkkitehtuuri: Mikrofrontendit ja Module Federation – Kattava opas

Nykypäivän monimutkaisessa web-kehityksen maisemassa laajamittaisten frontend-sovellusten rakentaminen ja ylläpito voi olla haastavaa. Perinteiset monoliittiset frontend-arkkitehtuurit johtavat usein koodin paisumiseen, hitaisiin käännösaikoihin ja vaikeuksiin tiimien välisessä yhteistyössä. Mikrofrontendit ja module federation tarjoavat tehokkaita ratkaisuja näihin ongelmiin pilkkomalla suuret sovellukset pienempiin, itsenäisiin ja hallittaviin osiin. Tämä kattava opas tutkii mikrofrontend-arkkitehtuurin ja module federationin käsitteitä, niiden hyötyjä, haasteita, toteutusstrategioita ja sitä, milloin ne kannattaa valita.

Mitä ovat mikrofrontendit?

Mikrofrontendit ovat arkkitehtuurityyli, joka rakentaa frontend-sovelluksen itsenäisten, omavaraisten yksiköiden kokoelmana, joista jokainen on erillisen tiimin omistuksessa. Nämä yksiköt voidaan kehittää, testata ja julkaista itsenäisesti, mikä mahdollistaa suuremman joustavuuden ja skaalautuvuuden. Ajattele sitä kuin kokoelmaa itsenäisiä verkkosivustoja, jotka on integroitu saumattomasti yhdeksi käyttökokemukseksi.

Mikrofrontendien ydinajatus on soveltaa mikropalveluiden periaatteita frontendiin. Aivan kuten mikropalvelut hajottavat backend-järjestelmän pienempiin, hallittaviin palveluihin, mikrofrontendit hajottavat frontendin pienempiin, hallittaviin sovelluksiin tai ominaisuuksiin.

Mikrofrontendien hyödyt:

• Lisääntynyt skaalautuvuus: Mikrofrontendien itsenäinen julkaisu antaa tiimeille mahdollisuuden skaalata omia sovelluksen osiaan vaikuttamatta muihin tiimeihin tai koko sovellukseen.
• Parantunut ylläpidettävyys: Pienemmät koodikannat ovat helpompia ymmärtää, testata ja ylläpitää. Kukin tiimi vastaa omasta mikrofrontendistään, mikä helpottaa ongelmien tunnistamista ja korjaamista.
• Teknologinen monimuotoisuus: Tiimit voivat valita parhaiten sopivan teknologiastackin omaan mikrofrontendiinsa, mikä mahdollistaa suuremman joustavuuden ja innovaation. Tämä voi olla ratkaisevan tärkeää suurissa organisaatioissa, joissa eri tiimeillä voi olla asiantuntemusta eri kehyksistä.
• Itsenäiset julkaisut: Mikrofrontendit voidaan julkaista itsenäisesti, mikä mahdollistaa nopeammat julkaisusyklit ja pienentää riskejä. Tämä on erityisen tärkeää suurille sovelluksille, joissa tarvitaan usein päivityksiä.
• Tiimien autonomia: Tiimeillä on täysi omistajuus omasta mikrofrontendistään, mikä edistää vastuuntuntoa ja tilivelvollisuutta. Tämä antaa tiimeille valtuudet tehdä päätöksiä ja iteroida nopeasti.
• Koodin uudelleenkäytettävyys: Yhteisiä komponentteja ja kirjastoja voidaan jakaa mikrofrontendien välillä, mikä edistää koodin uudelleenkäyttöä ja yhtenäisyyttä.

Mikrofrontendien haasteet:

• Lisääntynyt monimutkaisuus: Mikrofrontend-arkkitehtuurin toteuttaminen lisää monimutkaisuutta koko järjestelmään. Useiden tiimien koordinointi ja mikrofrontendien välisen viestinnän hallinta voi olla haastavaa.
• Integraatiohaasteet: Saumattoman integraation varmistaminen mikrofrontendien välillä vaatii huolellista suunnittelua ja koordinointia. On käsiteltävä asioita, kuten jaetut riippuvuudet, reititys ja tyylit.
• Suorituskyvyn lisäkustannukset: Useiden mikrofrontendien lataaminen voi aiheuttaa suorituskyvyn lisäkustannuksia, erityisesti jos niitä ei ole optimoitu. Latausaikoihin ja resurssien käyttöön on kiinnitettävä erityistä huomiota.
• Jaetun tilan hallinta: Jaetun tilan hallinta mikrofrontendien välillä voi olla monimutkaista. Usein tarvitaan strategioita, kuten jaettuja kirjastoja, tapahtumaväyliä tai keskitettyjä tilanhallintaratkaisuja.
• Toiminnallinen lisäkustannus: Useiden mikrofrontendien infrastruktuurin hallinta voi olla monimutkaisempaa kuin yhden monoliittisen sovelluksen hallinta.
• Läpileikkaavat huolenaiheet: Läpileikkaavien huolenaiheiden, kuten todennuksen, valtuutuksen ja analytiikan, käsittely vaatii huolellista suunnittelua ja koordinointia tiimien välillä.

Mitä on Module Federation?

Module federation on JavaScript-arkkitehtuuri, joka esiteltiin Webpack 5:ssä ja joka mahdollistaa koodin jakamisen erikseen käännettyjen ja julkaistujen sovellusten välillä. Se mahdollistaa mikrofrontendien luomisen lataamalla ja suorittamalla dynaamisesti koodia muista sovelluksista ajon aikana. Pohjimmiltaan se antaa eri JavaScript-sovellusten toimia toistensa rakennuspalikoina.

Toisin kuin perinteiset mikrofrontend-lähestymistavat, jotka usein perustuvat iframeihin tai web-komponentteihin, module federation mahdollistaa saumattoman integraation ja jaetun tilan mikrofrontendien välillä. Se antaa sinun paljastaa komponentteja, funktioita tai jopa kokonaisia moduuleja yhdestä sovelluksesta toiseen ilman, että niitä tarvitsee julkaista jaettuun pakettirekisteriin.

Module Federationin avainkäsitteet:

• Host (isäntäsovellus): Sovellus, joka kuluttaa moduuleja muista sovelluksista (remotes).
• Remote (etäsovellus): Sovellus, joka paljastaa moduuleja muiden sovellusten (hosts) kulutettavaksi.
• Shared Dependencies (jaetut riippuvuudet): Riippuvuudet, jotka jaetaan isäntä- ja etäsovellusten välillä. Module federation mahdollistaa jaettujen riippuvuuksien monistamisen välttämisen, mikä parantaa suorituskykyä ja pienentää pakettikokoa.
• Webpack Configuration (Webpack-konfiguraatio): Module federation konfiguroidaan Webpack-konfiguraatiotiedoston kautta, jossa määritellään, mitkä moduulit paljastetaan ja mitkä etäsovellukset kulutetaan.

Module Federationin hyödyt:

• Koodin jakaminen: Module federation mahdollistaa koodin jakamisen erikseen käännettyjen ja julkaistujen sovellusten välillä, mikä vähentää koodin monistamista ja parantaa uudelleenkäyttöä.
• Itsenäiset julkaisut: Mikrofrontendit voidaan julkaista itsenäisesti, mikä mahdollistaa nopeammat julkaisusyklit ja pienentää riskejä. Muutokset yhteen mikrofrontendiin eivät vaadi muiden mikrofrontendien uudelleenjulkaisua.
• Teknologiariippumaton (jossain määrin): Vaikka sitä käytetään pääasiassa Webpack-pohjaisissa sovelluksissa, module federation voidaan integroida muihin käännöstyökaluihin ja kehyksiin pienellä vaivalla.
• Parantunut suorituskyky: Jakamalla riippuvuuksia ja lataamalla moduuleja dynaamisesti, module federation voi parantaa sovelluksen suorituskykyä ja pienentää pakettikokoa.
• Yksinkertaistettu kehitys: Module federation yksinkertaistaa kehitysprosessia antamalla tiimien työskennellä itsenäisissä mikrofrontend-projekteissa ilman huolta integraatio-ongelmista.

Module Federationin haasteet:

• Webpack-riippuvuus: Module federation on pääasiassa Webpack-ominaisuus, mikä tarkoittaa, että sinun on käytettävä Webpackia käännöstyökalunasi.
• Konfiguraation monimutkaisuus: Module federationin konfigurointi voi olla monimutkaista, erityisesti suurissa sovelluksissa, joissa on useita mikrofrontendejä.
• Versioiden hallinta: Jaettujen riippuvuuksien ja paljastettujen moduulien versioiden hallinta voi olla haastavaa. Huolellinen suunnittelu ja koordinointi ovat tarpeen konfliktien välttämiseksi ja yhteensopivuuden varmistamiseksi.
• Ajonaikaiset virheet: Ongelmat etämoduuleissa voivat johtaa ajonaikaisiin virheisiin isäntäsovelluksessa. Oikea virheenkäsittely ja seuranta ovat välttämättömiä.
• Turvallisuusnäkökohdat: Moduulien paljastaminen muille sovelluksille tuo mukanaan turvallisuusnäkökohtia. Sinun on harkittava huolellisesti, mitkä moduulit paljastetaan ja miten ne suojataan luvattomalta käytöltä.

Mikrofrontend-arkkitehtuurit: Eri lähestymistavat

Mikrofrontend-arkkitehtuurien toteuttamiseen on useita eri lähestymistapoja, joilla kaikilla on omat etunsa ja haittansa. Tässä on joitakin yleisimmistä lähestymistavoista:

• Käännösaikainen integraatio: Mikrofrontendit käännetään ja integroidaan yhdeksi sovellukseksi käännösaikana. Tämä lähestymistapa on helppo toteuttaa, mutta siitä puuttuu muiden lähestymistapojen joustavuus.
• Ajonaikainen integraatio iframejen avulla: Mikrofrontendit ladataan iframeihin ajon aikana. Tämä lähestymistapa tarjoaa vahvan eristyksen, mutta voi johtaa suorituskykyongelmiin ja vaikeuksiin mikrofrontendien välisessä viestinnässä.
• Ajonaikainen integraatio web-komponenttien avulla: Mikrofrontendit paketoidaan web-komponenteiksi ja ladataan pääsovellukseen ajon aikana. Tämä lähestymistapa tarjoaa hyvän eristyksen ja uudelleenkäytettävyyden, mutta sen toteuttaminen voi olla monimutkaisempaa.
• Ajonaikainen integraatio JavaScriptin avulla: Mikrofrontendit ladataan JavaScript-moduuleina ajon aikana. Tämä lähestymistapa tarjoaa suurimman joustavuuden ja suorituskyvyn, mutta vaatii huolellista suunnittelua ja koordinointia. Module federation kuuluu tähän kategoriaan.
• Edge Side Includes (ESI): Palvelinpuolen lähestymistapa, jossa HTML-fragmentit kootaan CDN:n reunalla.

Toteutusstrategiat mikrofrontend-arkkitehtuurille Module Federationin avulla

Mikrofrontendien toteuttaminen module federationilla vaatii huolellista suunnittelua ja toteutusta. Tässä on joitakin keskeisiä strategioita, jotka kannattaa ottaa huomioon:

1. Määritä selkeät rajat: Määritä selkeästi mikrofrontendien väliset rajat. Jokaisen mikrofrontendin tulisi olla vastuussa tietystä toimialueesta tai ominaisuudesta.
2. Perusta jaettu komponenttikirjasto: Luo jaettu komponenttikirjasto, jota kaikki mikrofrontendit voivat käyttää. Tämä edistää yhtenäisyyttä ja vähentää koodin monistamista. Komponenttikirjasto voi itsessään olla federoitu moduuli.
3. Toteuta keskitetty reititysjärjestelmä: Toteuta keskitetty reititysjärjestelmä, joka käsittelee navigoinnin mikrofrontendien välillä. Tämä takaa saumattoman käyttökokemuksen.
4. Valitse tilanhallintastrategia: Valitse sovelluksellesi hyvin sopiva tilanhallintastrategia. Vaihtoehtoja ovat jaetut kirjastot, tapahtumaväylät tai keskitetyt tilanhallintaratkaisut, kuten Redux tai Vuex.
5. Toteuta vankka käännös- ja julkaisuputki: Toteuta vankka käännös- ja julkaisuputki, joka automatisoi mikrofrontendien kääntämisen, testaamisen ja julkaisemisen.
6. Luo selkeät viestintäkanavat: Luo selkeät viestintäkanavat eri mikrofrontendien parissa työskentelevien tiimien välille. Tämä varmistaa, että kaikki ovat samalla sivulla ja että ongelmat ratkaistaan nopeasti.
7. Seuraa ja mittaa suorituskykyä: Seuraa ja mittaa mikrofrontend-arkkitehtuurisi suorituskykyä. Tämä antaa sinun tunnistaa ja korjata suorituskyvyn pullonkauloja.

Esimerkki: Yksinkertaisen mikrofrontendin toteutus Module Federationilla (React)

Havainnollistetaan yksinkertaisella esimerkillä käyttäen Reactia ja Webpackin module federationia. Meillä on kaksi sovellusta: Host-sovellus (isäntä) ja Remote-sovellus (etä).

Etäsovellus (RemoteApp) - Paljastaa komponentin

1. Asenna riippuvuudet:

            npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

2. Luo yksinkertainen komponentti (RemoteComponent.jsx):

            import React from 'react';

const RemoteComponent = () => {
  return <div style={{ border: '2px solid blue', padding: '10px', margin: '10px' }}>
           <h2>Remote Component</h2>
           <p>This component is being served from the Remote App!</p>
         </div>;
};

export default RemoteComponent;
            

              
                Copy
              
            
          

3. Luo index.js:

            import React from 'react';
import ReactDOM from 'react-dom';
import RemoteComponent from './RemoteComponent';

ReactDOM.render(<RemoteComponent />, document.getElementById('root'));
            

              
                Copy
              
            
          

4. Luo webpack.config.js:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  entry: './index',
  mode: 'development',
  devServer: {
    port: 3001,
  },
  output: {
    publicPath: 'auto',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'RemoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './RemoteComponent': './RemoteComponent',
      },
      shared: {
        ...require('./package.json').dependencies,
        react: { singleton: true, eager: true, requiredVersion: require('./package.json').dependencies['react'] },
        'react-dom': { singleton: true, eager: true, requiredVersion: require('./package.json').dependencies['react-dom'] },
      },
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

5. Luo index.html:

            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Remote App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
            

              
                Copy
              
            
          

6. Lisää Babel-konfiguraatio (.babelrc tai babel.config.js):

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

7. Käynnistä etäsovellus:

            npx webpack serve
            

              
                Copy
              
            
          

Isäntäsovellus (HostApp) - Kuluttaa etäkomponenttia

1. Asenna riippuvuudet:

            npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

2. Luo yksinkertainen komponentti (Home.jsx):

            import React, { Suspense } from 'react';

const RemoteComponent = React.lazy(() => import('RemoteApp/RemoteComponent'));

const Home = () => {
  return (
    <div style={{ border: '2px solid green', padding: '10px', margin: '10px' }}>
      <h1>Host Application</h1>
      <p>This is the main application consuming a remote component.</p>
      <Suspense fallback={<div>Loading Remote Component...</div>}>
        <RemoteComponent />
      </Suspense>
    </div>
  );
};

export default Home;
            

              
                Copy
              
            
          

3. Luo index.js:

            import React from 'react';
import ReactDOM from 'react-dom';
import Home from './Home';

ReactDOM.render(<Home />, document.getElementById('root'));
            

              
                Copy
              
            
          

4. Luo webpack.config.js:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  entry: './index',
  mode: 'development',
  devServer: {
    port: 3000,
  },
  output: {
    publicPath: 'auto',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'HostApp',
      remotes: {
        RemoteApp: 'RemoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        ...require('./package.json').dependencies,
        react: { singleton: true, eager: true, requiredVersion: require('./package.json').dependencies['react'] },
        'react-dom': { singleton: true, eager: true, requiredVersion: require('./package.json').dependencies['react-dom'] },
      },
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

5. Luo index.html:

            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Host App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
            

              
                Copy
              
            
          

6. Lisää Babel-konfiguraatio (.babelrc tai babel.config.js):

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

7. Käynnistä isäntäsovellus:

            npx webpack serve
            

              
                Copy
              
            
          

Tämä esimerkki näyttää, kuinka HostApp voi kuluttaa RemoteComponent-komponentin RemoteApp-sovelluksesta ajon aikana. Keskeisiä näkökohtia ovat etäsovelluksen remoteEntry-pisteen määrittely isäntäsovelluksen webpack-konfiguraatiossa ja React.lazyn ja Suspensen käyttö etäkomponentin asynkroniseen lataamiseen.

Milloin valita mikrofrontendit ja Module Federation

Mikrofrontendit ja module federation eivät ole kaikille sopiva ratkaisu. Ne soveltuvat parhaiten suuriin, monimutkaisiin sovelluksiin, joissa useat tiimit työskentelevät rinnakkain. Tässä on joitakin skenaarioita, joissa mikrofrontendit ja module federation voivat olla hyödyllisiä:

• Suuret tiimit: Kun useat tiimit työskentelevät saman sovelluksen parissa, mikrofrontendit voivat auttaa eristämään koodia ja vähentämään konflikteja.
• Vanhat sovellukset: Mikrofrontendejä voidaan käyttää vanhan sovelluksen asteittaiseen siirtämiseen moderniin arkkitehtuuriin.
• Itsenäiset julkaisut: Kun sinun on julkaistava päivityksiä usein vaikuttamatta muihin sovelluksen osiin, mikrofrontendit voivat tarjota tarvittavan eristyksen.
• Teknologinen monimuotoisuus: Kun haluat käyttää eri teknologioita sovelluksen eri osissa, mikrofrontendit voivat mahdollistaa sen.
• Skaalautuvuusvaatimukset: Kun sinun on skaalattava sovelluksen eri osia itsenäisesti, mikrofrontendit voivat tarjota tarvittavan joustavuuden.

Mikrofrontendit ja module federation eivät kuitenkaan aina ole paras valinta. Pienissä, yksinkertaisissa sovelluksissa lisääntynyt monimutkaisuus ei välttämättä ole hyötyjen arvoista. Tällaisissa tapauksissa monoliittinen arkkitehtuuri voi olla sopivampi.

Vaihtoehtoisia lähestymistapoja mikrofrontend-arkkitehtuurille

Vaikka module federation on tehokas työkalu mikrofrontendien rakentamiseen, se ei ole ainoa lähestymistapa. Tässä on joitakin vaihtoehtoisia strategioita:

• Iframet: Yksinkertainen, mutta usein vähemmän suorituskykyinen lähestymistapa, joka tarjoaa vahvan eristyksen, mutta haasteita viestinnässä ja tyylittelyssä.
• Web Components: Standardeihin perustuva lähestymistapa uudelleenkäytettävien käyttöliittymäelementtien luomiseen. Voidaan käyttää kehysriippumattomien mikrofrontendien rakentamiseen.
• Single-SPA: Kehys useiden JavaScript-sovellusten orkestrointiin yhdellä sivulla.
• Server-Side Includes (SSI) / Edge-Side Includes (ESI): Palvelinpuolen tekniikoita HTML-fragmenttien koostamiseen.

Mikrofrontend-arkkitehtuurin parhaat käytännöt

Mikrofrontend-arkkitehtuurin tehokas toteuttaminen vaatii parhaiden käytäntöjen noudattamista:

• Yhden vastuun periaate: Jokaisella mikrofrontendillä tulisi olla selkeä ja hyvin määritelty vastuu.
• Itsenäinen julkaistavuus: Jokaisen mikrofrontendin tulisi olla itsenäisesti julkaistavissa.
• Teknologiariippumattomuus (mahdollisuuksien mukaan): Pyri teknologiariippumattomuuteen, jotta tiimit voivat valita parhaat työkalut tehtävään.
• Sopimuspohjainen viestintä: Määritä selkeät sopimukset mikrofrontendien väliselle viestinnälle.
• Automaattinen testaus: Toteuta kattava automaattinen testaus varmistaaksesi jokaisen mikrofrontendin ja koko järjestelmän laadun.
• Keskitetty lokitus ja valvonta: Toteuta keskitetty lokitus ja valvonta seurataksesi mikrofrontend-arkkitehtuurin suorituskykyä ja tilaa.

Yhteenveto

Mikrofrontendit ja module federation tarjoavat tehokkaan lähestymistavan skaalautuvien, ylläpidettävien ja joustavien frontend-sovellusten rakentamiseen. Pilkkomalla suuret sovellukset pienempiin, itsenäisiin yksiköihin tiimit voivat työskennellä tehokkaammin, julkaista päivityksiä useammin ja innovoida nopeammin. Vaikka mikrofrontend-arkkitehtuurin toteuttamiseen liittyy haasteita, hyödyt usein ylittävät kustannukset, erityisesti suurissa ja monimutkaisissa sovelluksissa. Module federation tarjoaa erityisen elegantin ja tehokkaan ratkaisun koodin ja komponenttien jakamiseen mikrofrontendien välillä. Suunnittelemalla ja toteuttamalla mikrofrontend-strategiasi huolellisesti voit luoda frontend-arkkitehtuurin, joka sopii hyvin organisaatiosi ja käyttäjiesi tarpeisiin.

Web-kehityksen maiseman jatkaessa kehittymistään mikrofrontendit ja module federation tulevat todennäköisesti yhä tärkeämmiksi arkkitehtuurimalleiksi. Ymmärtämällä näiden lähestymistapojen käsitteet, hyödyt ja haasteet voit asettaa itsesi valmiiksi rakentamaan seuraavan sukupolven web-sovelluksia.