Frontendi arhitektuur: Mikro-frontendid ja moodulite föderatsioon – põhjalik juhend

Tänapäeva keerulises veebiarendusmaailmas võib suuremahuliste frontend-rakenduste ehitamine ja haldamine olla keeruline. Traditsioonilised monoliitsed frontend-arhitektuurid põhjustavad sageli koodi paisumist, aeglaseid ehitusaegu ja raskusi meeskonna koostöös. Mikro-frontendid ja moodulite föderatsioon pakuvad nendele probleemidele võimsaid lahendusi, jagades suured rakendused väiksemateks, sõltumatuteks ja hallatavateks osadeks. See põhjalik juhend uurib mikro-frontendi arhitektuuri ja moodulite föderatsiooni kontseptsioone, nende eeliseid, väljakutseid, rakendusstrateegiaid ja millal neid valida.

Mis on mikro-frontendid?

Mikro-frontendid on arhitektuuristiil, mis struktureerib frontend-rakenduse sõltumatute, iseseisvate üksuste kogumina, millest igaüks kuulub eraldi meeskonnale. Neid üksusi saab arendada, testida ja juurutada sõltumatult, mis võimaldab suuremat paindlikkust ja skaleeritavust. Mõelge sellele kui sõltumatute veebisaitide kogumile, mis on sujuvalt integreeritud ühtseks kasutajakogemuseks.

Mikro-frontendide peamine idee on rakendada mikroteenuste põhimõtteid frontendile. Nii nagu mikroteenused jagavad backendi väiksemateks, hallatavateks teenusteks, jagavad mikro-frontendid frontendi väiksemateks, hallatavateks rakendusteks või funktsioonideks.

Mikro-frontendide eelised:

• Suurem skaleeritavus: Mikro-frontendide sõltumatu juurutamine võimaldab meeskondadel skaleerida oma rakenduse osi, mõjutamata teisi meeskondi või kogu rakendust.
• Parem hooldatavus: Väiksemaid koodibaase on lihtsam mõista, testida ja hallata. Iga meeskond vastutab oma mikro-frontendi eest, mis muudab probleemide tuvastamise ja lahendamise lihtsamaks.
• Tehnoloogia mitmekesisus: Meeskonnad saavad valida oma konkreetse mikro-frontendi jaoks parima tehnoloogiaplatvormi, mis võimaldab suuremat paindlikkust ja innovatsiooni. See võib olla ülioluline suurtes organisatsioonides, kus erinevatel meeskondadel võib olla teadmisi erinevate raamistike kohta.
• Sõltumatud juurutused: Mikro-frontendide saab juurutada sõltumatult, mis võimaldab kiiremaid väljalasketsükleid ja vähendab riski. See on eriti oluline suurte rakenduste puhul, kus on vaja sagedasi värskendusi.
• Meeskonna autonoomia: Meeskondadel on oma mikro-frontendi üle täielik omandiõigus, mis soodustab vastutustunnet ja aruandekohustust. See annab meeskondadele võimaluse teha otsuseid ja kiiresti itereerida.
• Koodi taaskasutatavus: Ühiseid komponente ja teeke saab jagada mikro-frontendide vahel, edendades koodi taaskasutust ja järjepidevust.

Mikro-frontendide väljakutsed:

• Suurem keerukus: Mikro-frontendi arhitektuuri rakendamine lisab üldisele süsteemile keerukust. Mitme meeskonna koordineerimine ja mikro-frontendidevahelise suhtluse haldamine võib olla keeruline.
• Integratsiooni väljakutsed: Mikro-frontendide vahelise sujuva integratsiooni tagamine nõuab hoolikat planeerimist ja koordineerimist. Lahendada tuleb sellised probleemid nagu jagatud sõltuvused, marsruutimine ja stiil.
• Jõudluse lisakulu: Mitme mikro-frontendi laadimine võib põhjustada jõudluse lisakulu, eriti kui neid pole optimeeritud. Tähelepanu tuleb pöörata laadimisaegadele ja ressursikasutusele.
• Jagatud oleku haldamine: Jagatud oleku haldamine mikro-frontendide vahel võib olla keeruline. Sageli on vaja selliseid strateegiaid nagu jagatud teegid, sündmuste siinid või tsentraliseeritud oleku haldamise lahendused.
• Tegevuskulud: Mitme mikro-frontendi infrastruktuuri haldamine võib olla keerulisem kui ühe monoliitse rakenduse haldamine.
• Valdkonnaülesed küsimused: Valdkonnaüleste küsimuste (nt autentimine, autoriseerimine ja analüüs) käsitlemine nõuab hoolikat planeerimist ja meeskondade vahelist koordineerimist.

Mis on moodulite föderatsioon?

Moodulite föderatsioon on JavaScripti arhitektuur, mis võeti kasutusele Webpack 5-s ja mis võimaldab teil jagada koodi eraldi ehitatud ja juurutatud rakenduste vahel. See võimaldab teil luua mikro-frontendi, laadides ja käivitades dünaamiliselt koodi teistest rakendustest käitusajal. Põhimõtteliselt võimaldab see erinevatel JavaScripti rakendustel toimida üksteise ehitusplokkidena.

Erinevalt traditsioonilistest mikro-frontendi lähenemisviisidest, mis sageli tuginevad iframe’idele või veebikomponentidele, võimaldab moodulite föderatsioon mikro-frontendide vahel sujuvat integreerimist ja jagatud olekut. See võimaldab teil avaldada komponente, funktsioone või isegi terveid mooduleid ühest rakendusest teise, ilma et peaksite neid jagatud pakettide registris avaldama.

Moodulite föderatsiooni peamised kontseptsioonid:

• Host: Rakendus, mis kasutab mooduleid teistest rakendustest (eemal).
• Remote: Rakendus, mis avaldab mooduleid teiste rakenduste (hostide) poolt kasutamiseks.
• Jagatud sõltuvused: Sõltuvused, mida jagatakse hosti ja eemaldatavate rakenduste vahel. Moodulite föderatsioon võimaldab teil vältida jagatud sõltuvuste dubleerimist, parandades jõudlust ja vähendades paketi suurust.
• Webpacki konfiguratsioon: Moodulite föderatsiooni konfigureeritakse Webpacki konfiguratsioonifaili kaudu, kus määratlete, milliseid mooduleid avaldada ja milliseid eemaldatavaid mooduleid kasutada.

Moodulite föderatsiooni eelised:

• Koodi jagamine: Moodulite föderatsioon võimaldab teil jagada koodi eraldi ehitatud ja juurutatud rakenduste vahel, vähendades koodi dubleerimist ja parandades koodi taaskasutust.
• Sõltumatud juurutused: Mikro-frontendide saab juurutada sõltumatult, mis võimaldab kiiremaid väljalasketsükleid ja vähendab riski. Ühe mikro-frontendi muudatused ei nõua teiste mikro-frontendide uuesti juurutamist.
• Tehnoloogia agnostiline (teatud määral): Kuigi seda kasutatakse peamiselt Webpacki-põhiste rakendustega, saab moodulite föderatsiooni teatud jõupingutustega integreerida ka teiste ehitustööriistade ja raamistikega.
• Parem jõudlus: Jagades sõltuvusi ja dünaamiliselt mooduleid laadides võib moodulite föderatsioon parandada rakenduse jõudlust ja vähendada paketi suurust.
• Lihtsustatud arendus: Moodulite föderatsioon lihtsustab arendusprotsessi, võimaldades meeskondadel töötada sõltumatutel mikro-frontendidel, ilma et peaksite integratsiooniprobleemide pärast muretsema.

Moodulite föderatsiooni väljakutsed:

• Webpacki sõltuvus: Moodulite föderatsioon on peamiselt Webpacki funktsioon, mis tähendab, et peate kasutama Webpacki oma ehitustööriistana.
• Konfiguratsiooni keerukus: Moodulite föderatsiooni konfigureerimine võib olla keeruline, eriti suurte rakenduste puhul, millel on palju mikro-frontendi.
• Versioonide haldamine: Jagatud sõltuvuste ja avaldatud moodulite versioonide haldamine võib olla keeruline. Konfliktide vältimiseks ja ühilduvuse tagamiseks on vaja hoolikat planeerimist ja koordineerimist.
• Käitusaja vead: Eemaldatavate moodulite probleemid võivad põhjustada hostrakenduses käitusaja vigu. Oluline on korralik veakäsitlus ja jälgimine.
• Turvakaalutlused: Moodulite avaldamine teistele rakendustele toob kaasa turvakaalutlusi. Peate hoolikalt kaaluma, milliseid mooduleid avaldada ja kuidas neid volitamata juurdepääsu eest kaitsta.

Mikro-frontendi arhitektuurid: erinevad lähenemisviisid

Mikro-frontendi arhitektuuride rakendamiseks on mitmeid erinevaid lähenemisviise, millest igaühel on oma eelised ja puudused. Siin on mõned kõige levinumad lähenemisviisid:

• Ehitusaegne integratsioon: Mikro-frontendid ehitatakse ja integreeritakse ehitusajal ühte rakendusse. Seda lähenemisviisi on lihtne rakendada, kuid sellel puudub teiste lähenemisviiside paindlikkus.
• Käitusaja integratsioon iframe’ide kaudu: Mikro-frontendid laaditakse käitusajal iframe’idesse. See lähenemisviis tagab tugeva isolatsiooni, kuid võib põhjustada jõudlusprobleeme ja raskusi mikro-frontendide vahelise suhtlusega.
• Käitusaja integratsioon veebikomponentide kaudu: Mikro-frontendid pakitakse veebikomponentidena ja laaditakse käitusajal põhirakendusse. See lähenemisviis tagab hea isolatsiooni ja taaskasutatavuse, kuid seda võib olla keerulisem rakendada.
• Käitusaja integratsioon JavaScripti kaudu: Mikro-frontendid laaditakse käitusajal JavaScripti moodulitena. See lähenemisviis pakub suurimat paindlikkust ja jõudlust, kuid nõuab hoolikat planeerimist ja koordineerimist. Moodulite föderatsioon kuulub sellesse kategooriasse.
• Edge Side Includes (ESI): Serveripoolne lähenemisviis, kus HTML-i fragmendid koostatakse CDN-i servas.

Mikro-frontendide rakendusstrateegiad moodulite föderatsiooniga

Mikro-frontendide rakendamine moodulite föderatsiooniga nõuab hoolikat planeerimist ja teostust. Siin on mõned peamised strateegiad, mida kaaluda:

1. Määratlege selged piirid: Määratlege selgelt mikro-frontendide vahelised piirid. Iga mikro-frontend peaks vastutama konkreetse domeeni või funktsiooni eest.
2. Looge jagatud komponentide teek: Looge jagatud komponentide teek, mida saavad kasutada kõik mikro-frontendid. See soodustab järjepidevust ja vähendab koodi dubleerimist. Komponentide teek ise võib olla födereeritud moodul.
3. Rakendage tsentraliseeritud marsruutimissüsteem: Rakendage tsentraliseeritud marsruutimissüsteem, mis haldab navigeerimist mikro-frontendide vahel. See tagab sujuva kasutajakogemuse.
4. Valige oleku haldamise strateegia: Valige oma rakenduse jaoks sobiv oleku haldamise strateegia. Valikute hulka kuuluvad jagatud teegid, sündmuste siinid või tsentraliseeritud oleku haldamise lahendused, nagu Redux või Vuex.
5. Rakendage tugev ehitus- ja juurutamisvoog: Rakendage tugev ehitus- ja juurutamisvoog, mis automatiseerib mikro-frontendide ehitamise, testimise ja juurutamise protsessi.
6. Looge selged suhtluskanalid: Looge selged suhtluskanalid erinevate mikro-frontendide kallal töötavate meeskondade vahel. See tagab, et kõik on samal lehel ja probleemid lahendatakse kiiresti.
7. Jälgige ja mõõtke jõudlust: Jälgige ja mõõtke oma mikro-frontendi arhitektuuri jõudlust. See võimaldab teil tuvastada ja kõrvaldada jõudluse kitsaskohad.

Näide: lihtsa mikro-frontendi rakendamine moodulite föderatsiooniga (React)

Toome näite Reacti ja Webpacki moodulite föderatsiooni abil. Meil on kaks rakendust: Host-rakendus ja Remote-rakendus.

Remote-rakendus (RemoteApp) – avaldab komponendi

1. Installige sõltuvused:

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

              
                Copy
              
            
          

2. Looge lihtne komponent (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. Looge index.js:

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

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

              
                Copy
              
            
          

4. Looge 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. Looge index.html:

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

              
                Copy
              
            
          

6. Lisage Babeli konfiguratsioon (.babelrc või babel.config.js):

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

              
                Copy
              
            
          

7. Käivitage Remote App:

            npx webpack serve
            

              
                Copy
              
            
          

Host-rakendus (HostApp) – kasutab Remote-komponenti

1. Installige sõltuvused:

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

              
                Copy
              
            
          

2. Looge lihtne komponent (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. Looge index.js:

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

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

              
                Copy
              
            
          

4. Looge 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. Looge index.html:

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

              
                Copy
              
            
          

6. Lisage Babeli konfiguratsioon (.babelrc või babel.config.js):

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

              
                Copy
              
            
          

7. Käivitage Host App:

            npx webpack serve
            

              
                Copy
              
            
          

See näide näitab, kuidas Host App saab Remote Appist käitusajal kasutada RemoteComponenti. Peamised aspektid on eemaldatava sisenemispunkti määratlemine Hosti Webpacki konfiguratsioonis ning React.lazy ja Suspense kasutamine eemaldatava komponendi asünkroonseks laadimiseks.

Millal valida mikro-frontendid ja moodulite föderatsioon

Mikro-frontendid ja moodulite föderatsioon ei ole kõigile sobiv lahendus. Need sobivad kõige paremini suurtele, keerukatele rakendustele, kus mitu meeskonda töötavad paralleelselt. Siin on mõned stsenaariumid, kus mikro-frontendid ja moodulite föderatsioon võivad olla kasulikud:

• Suured meeskonnad: Kui sama rakenduse kallal töötab mitu meeskonda, aitavad mikro-frontendid koodi isoleerida ja konflikte vähendada.
• Pärandrakendused: Mikro-frontendide abil saab pärandrakendust järk-järgult kaasaegsele arhitektuurile üle viia.
• Sõltumatud juurutused: Kui teil on vaja värskendusi sageli juurutada, mõjutamata rakenduse teisi osi, võivad mikro-frontendid pakkuda vajalikku isolatsiooni.
• Tehnoloogia mitmekesisus: Kui soovite rakenduse erinevate osade jaoks kasutada erinevaid tehnoloogiaid, võimaldavad mikro-frontendid seda teha.
• Skaleeritavusnõuded: Kui teil on vaja rakenduse erinevaid osi sõltumatult skaleerida, võivad mikro-frontendid pakkuda vajalikku paindlikkust.

Kuid mikro-frontendid ja moodulite föderatsioon ei ole alati parim valik. Väikeste, lihtsate rakenduste puhul ei pruugi lisatud keerukus olla kasu väärt. Sellistel juhtudel võib monoliitne arhitektuur olla sobivam.

Alternatiivsed lähenemisviisid mikro-frontendidele

Kuigi moodulite föderatsioon on võimas tööriist mikro-frontendide ehitamiseks, pole see ainus lähenemisviis. Siin on mõned alternatiivsed strateegiad:

• Iframe’id: Lihtne, kuid sageli vähem jõudluslik lähenemisviis, mis tagab tugeva isolatsiooni, kuid millel on väljakutseid suhtluse ja stiiliga.
• Veebikomponendid: Standarditel põhinev lähenemisviis korduvkasutatavate kasutajaliidese elementide loomiseks. Saab kasutada raamistikust sõltumatute mikro-frontendide ehitamiseks.
• Single-SPA: Raamistik mitme JavaScripti rakenduse korraldamiseks ühel lehel.
• Server-Side Includes (SSI) / Edge-Side Includes (ESI): Serveripoolsed tehnikad HTML-i fragmentide koostamiseks.

Mikro-frontendi arhitektuuri parimad tavad

Mikro-frontendi arhitektuuri tõhus rakendamine nõuab parimate tavade järgimist:

• Üksiku vastutuse põhimõte: Igal mikro-frontendil peaks olema selge ja hästi määratletud vastutus.
• Sõltumatu juurutatavus: Iga mikro-frontend peaks olema sõltumatult juurutatav.
• Tehnoloogia agnostitsism (võimaluse korral): Püüdke saavutada tehnoloogia agnostitsism, et meeskonnad saaksid valida töö jaoks parimad tööriistad.
• Lepingu-põhine suhtlus: Määratlege selged lepingud mikro-frontendide vaheliseks suhtluseks.
• Automatiseeritud testimine: Rakendage kõikehõlmav automatiseeritud testimine, et tagada iga mikro-frontendi ja kogu süsteemi kvaliteet.
• Tsentraliseeritud logimine ja jälgimine: Rakendage tsentraliseeritud logimine ja jälgimine, et jälgida mikro-frontendi arhitektuuri jõudlust ja tervist.

Järeldus

Mikro-frontendid ja moodulite föderatsioon pakuvad võimsat lähenemisviisi skaleeritavate, hooldatavate ja paindlike frontend-rakenduste ehitamiseks. Jagades suured rakendused väiksemateks, sõltumatuteks üksusteks, saavad meeskonnad tõhusamalt töötada, värskendusi sagedamini välja anda ja kiiremini uuendusi teha. Kuigi mikro-frontendi arhitektuuri rakendamisega kaasnevad väljakutsed, kaaluvad eelised sageli kulusid üles, eriti suurte ja keerukate rakenduste puhul. Moodulite föderatsioon pakub eriti elegantset ja tõhusat lahendust koodi ja komponentide jagamiseks mikro-frontendide vahel. Hoolikalt planeerides ja ellu viies oma mikro-frontendi strateegiat saate luua frontendi arhitektuuri, mis sobib hästi teie organisatsiooni ja kasutajate vajadustega.

Kuna veebiarendusmaailm areneb pidevalt, muutuvad mikro-frontendid ja moodulite föderatsioon tõenäoliselt üha olulisemateks arhitektuurimustriteks. Mõistes nende lähenemisviiside kontseptsioone, eeliseid ja väljakutseid, saate ennast positsioneerida veebirakenduste järgmise põlvkonna ehitamiseks.