Frontend architektūra: Mikro-Frontend'ai ir Modulių Federacija – Išsamus vadovas

Šiuolaikiniame sudėtingame žiniatinklio kūrimo pasaulyje didelių frontend aplikacijų kūrimas ir priežiūra gali būti iššūkis. Tradicinės monolitinės frontend architektūros dažnai sukelia kodo išsipūtimą, lėtą kūrimo (build) laiką ir komandinio bendradarbiavimo sunkumus. Mikro-frontend'ai ir modulių federacija siūlo galingus sprendimus šioms problemoms, suskaidydami dideles aplikacijas į mažesnes, nepriklausomas ir valdomas dalis. Šiame išsamiame vadove nagrinėjamos mikro-frontend architektūros ir modulių federacijos koncepcijos, jų privalumai, iššūkiai, diegimo strategijos ir kada juos rinktis.

Kas yra Mikro-Frontend'ai?

Mikro-frontend'ai – tai architektūrinis stilius, kai frontend aplikacija yra struktūrizuojama kaip nepriklausomų, savarankiškų vienetų rinkinys, kurių kiekvieną valdo atskira komanda. Šie vienetai gali būti kuriami, testuojami ir diegiami nepriklausomai, suteikiant didesnį lankstumą ir mastelio keitimo galimybes. Įsivaizduokite tai kaip nepriklausomų svetainių rinkinį, sklandžiai integruotą į vientisą vartotojo patirtį.

Pagrindinė mikro-frontend'ų idėja yra pritaikyti mikropaslaugų (microservices) principus frontend'ui. Kaip mikropaslaugos suskaido backend'ą į mažesnes, valdomas paslaugas, taip mikro-frontend'ai suskaido frontend'ą į mažesnes, valdomas aplikacijas ar funkcijas.

Mikro-Frontend'ų privalumai:

• Padidintas mastelio keitimas: Nepriklausomas mikro-frontend'ų diegimas leidžia komandoms keisti savo aplikacijos dalių mastelį, nepaveikiant kitų komandų ar visos aplikacijos.
• Geresnis prižiūrimumas: Mažesnes kodo bazes lengviau suprasti, testuoti ir prižiūrėti. Kiekviena komanda yra atsakinga už savo mikro-frontend'ą, todėl lengviau identifikuoti ir ištaisyti problemas.
• Technologijų įvairovė: Komandos gali pasirinkti geriausią technologijų rinkinį savo konkrečiam mikro-frontend'ui, suteikiant didesnį lankstumą ir inovacijų galimybes. Tai gali būti itin svarbu didelėse organizacijose, kur skirtingos komandos gali turėti patirties su skirtingomis karkasais (frameworks).
• Nepriklausomi diegimai: Mikro-frontend'us galima diegti nepriklausomai, kas leidžia greitesnius išleidimo ciklus ir sumažina riziką. Tai ypač svarbu didelėms aplikacijoms, kurioms reikalingi dažni atnaujinimai.
• Komandų autonomija: Komandos visiškai valdo savo mikro-frontend'ą, kas skatina atsakomybės jausmą. Tai suteikia komandoms galią priimti sprendimus ir greitai iteruoti.
• Kodo pakartotinis naudojimas: Bendri komponentai ir bibliotekos gali būti dalijamasi tarp mikro-frontend'ų, skatinant kodo pakartotinį naudojimą ir nuoseklumą.

Mikro-Frontend'ų iššūkiai:

• Padidėjęs sudėtingumas: Mikro-frontend architektūros įdiegimas prideda sudėtingumo visai sistemai. Koordinuoti kelių komandų darbą ir valdyti komunikaciją tarp mikro-frontend'ų gali būti sudėtinga.
• Integracijos iššūkiai: Siekiant užtikrinti sklandžią integraciją tarp mikro-frontend'ų, reikalingas kruopštus planavimas ir koordinavimas. Reikia spręsti tokias problemas kaip bendros priklausomybės, maršrutizavimas (routing) ir stiliai.
• Našumo pridėtinės išlaidos: Kelių mikro-frontend'ų įkėlimas gali sukelti našumo problemų, ypač jei jie nėra optimizuoti. Reikia atidžiai stebėti įkėlimo laikus ir resursų naudojimą.
• Bendros būsenos (state) valdymas: Valdyti bendrą būseną tarp mikro-frontend'ų gali būti sudėtinga. Dažnai reikalingos strategijos, tokios kaip bendros bibliotekos, įvykių magistralės (event buses) ar centralizuoti būsenos valdymo sprendimai.
• Operacinės pridėtinės išlaidos: Valdyti kelių mikro-frontend'ų infrastruktūrą gali būti sudėtingiau nei valdyti vieną monolitinę aplikaciją.
• Skersiniai aspektai (cross-cutting concerns): Tvarkyti tokius skersinius aspektus kaip autentifikacija, autorizacija ir analitika reikalauja kruopštaus planavimo ir koordinavimo tarp komandų.

Kas yra Modulių Federacija?

Modulių federacija yra JavaScript architektūra, pristatyta su Webpack 5, kuri leidžia dalintis kodu tarp atskirai sukurtų ir įdiegtų aplikacijų. Ji leidžia kurti mikro-frontend'us dinamiškai įkeliant ir vykdant kodą iš kitų aplikacijų vykdymo metu (runtime). Iš esmės, ji leidžia skirtingoms JavaScript aplikacijoms veikti kaip viena kitos statybiniams blokams.

Skirtingai nuo tradicinių mikro-frontend'ų metodų, kurie dažnai remiasi iframes ar web components, modulių federacija leidžia sklandžią integraciją ir bendros būsenos valdymą tarp mikro-frontend'ų. Ji leidžia atskleisti komponentus, funkcijas ar net ištisus modulius iš vienos aplikacijos kitai, nereikalaujant jų publikuoti bendrame paketų registre.

Pagrindinės Modulių Federacijos koncepcijos:

• Host (Pagrindinė aplikacija): Aplikacija, kuri naudoja modulius iš kitų aplikacijų (nuotolinių).
• Remote (Nuotolinė aplikacija): Aplikacija, kuri atskleidžia modulius, skirtus naudoti kitoms aplikacijoms (pagrindinėms).
• Bendros priklausomybės: Priklausomybės, kuriomis dalijasi pagrindinė ir nuotolinė aplikacijos. Modulių federacija leidžia išvengti bendrų priklausomybių dubliavimo, pagerinant našumą ir sumažinant paketo (bundle) dydį.
• Webpack konfigūracija: Modulių federacija konfigūruojama per Webpack konfigūracijos failą, kuriame nurodote, kuriuos modulius atskleisti ir kurias nuotolines aplikacijas naudoti.

Modulių Federacijos privalumai:

• Dalijimasis kodu: Modulių federacija leidžia dalintis kodu tarp atskirai sukurtų ir įdiegtų aplikacijų, sumažinant kodo dubliavimą ir gerinant kodo pakartotinį naudojimą.
• Nepriklausomi diegimai: Mikro-frontend'us galima diegti nepriklausomai, kas leidžia greitesnius išleidimo ciklus ir sumažina riziką. Vieno mikro-frontend'o pakeitimai nereikalauja kitų mikro-frontend'ų per-diegimo.
• Technologiškai agnostiška (tam tikru mastu): Nors pirmiausia naudojama su Webpack pagrįstomis aplikacijomis, modulių federaciją su tam tikromis pastangomis galima integruoti su kitais kūrimo įrankiais ir karkasais.
• Geresnis našumas: Dalijantis priklausomybėmis ir dinamiškai įkeliant modulius, modulių federacija gali pagerinti aplikacijos našumą ir sumažinti paketo dydį.
• Supaprastintas kūrimas: Modulių federacija supaprastina kūrimo procesą, leisdama komandoms dirbti su nepriklausomais mikro-frontend'ais, nesirūpinant integracijos problemomis.

Modulių Federacijos iššūkiai:

• Priklausomybė nuo Webpack: Modulių federacija yra pirmiausia Webpack funkcija, o tai reiškia, kad turite naudoti Webpack kaip savo kūrimo įrankį.
• Konfigūracijos sudėtingumas: Modulių federacijos konfigūravimas gali būti sudėtingas, ypač didelėms aplikacijoms su daugeliu mikro-frontend'ų.
• Versijų valdymas: Valdyti bendrų priklausomybių ir atskleistų modulių versijas gali būti iššūkis. Reikalingas kruopštus planavimas ir koordinavimas, siekiant išvengti konfliktų ir užtikrinti suderinamumą.
• Vykdymo laiko (runtime) klaidos: Problemos su nuotoliniais moduliais gali sukelti vykdymo laiko klaidas pagrindinėje aplikacijoje. Būtinas tinkamas klaidų valdymas ir stebėjimas.
• Saugumo aspektai: Modulių atskleidimas kitoms aplikacijoms kelia saugumo klausimų. Reikia atidžiai apsvarstyti, kuriuos modulius atskleisti ir kaip juos apsaugoti nuo neteisėtos prieigos.

Mikro-Frontend'ų Architektūros: Skirtingi Požiūriai

Yra keletas skirtingų požiūrių į mikro-frontend'ų architektūrų įgyvendinimą, kiekvienas su savo privalumais ir trūkumais. Štai keletas dažniausiai pasitaikančių požiūrių:

• Integracija kūrimo metu (build-time): Mikro-frontend'ai yra sukuriami ir integruojami į vieną aplikaciją kūrimo metu. Šį požiūrį paprasta įgyvendinti, bet trūksta lankstumo, palyginti su kitais metodais.
• Integracija vykdymo metu per Iframes: Mikro-frontend'ai įkeliami į iframes vykdymo metu. Šis požiūris suteikia stiprią izoliaciją, bet gali sukelti našumo problemų ir sunkumų komunikuojant tarp mikro-frontend'ų.
• Integracija vykdymo metu per Web Components: Mikro-frontend'ai yra supakuoti kaip web components ir įkeliami į pagrindinę aplikaciją vykdymo metu. Šis požiūris suteikia gerą izoliaciją ir pakartotinį naudojimą, bet gali būti sudėtingesnis įgyvendinti.
• Integracija vykdymo metu per JavaScript: Mikro-frontend'ai yra įkeliami kaip JavaScript moduliai vykdymo metu. Šis požiūris siūlo didžiausią lankstumą ir našumą, bet reikalauja kruopštaus planavimo ir koordinavimo. Modulių federacija patenka į šią kategoriją.
• Edge Side Includes (ESI): Serverio pusės metodas, kai HTML fragmentai surenkami CDN krašte (edge).

Mikro-Frontend'ų su Modulių Federacija Įgyvendinimo Strategijos

Mikro-frontend'ų su modulių federacija įgyvendinimas reikalauja kruopštaus planavimo ir vykdymo. Štai keletas pagrindinių strategijų, kurias reikėtų apsvarstyti:

1. Apibrėžkite aiškias ribas: Aiškiai apibrėžkite ribas tarp mikro-frontend'ų. Kiekvienas mikro-frontend'as turėtų būti atsakingas už konkretų domeną ar funkciją.
2. Sukurkite bendrą komponentų biblioteką: Sukurkite bendrą komponentų biblioteką, kurią galėtų naudoti visi mikro-frontend'ai. Tai skatina nuoseklumą ir mažina kodo dubliavimą. Pati komponentų biblioteka gali būti federuotas modulis.
3. Įdiekite centralizuotą maršrutizavimo sistemą (routing): Įdiekite centralizuotą maršrutizavimo sistemą, kuri tvarkytų navigaciją tarp mikro-frontend'ų. Tai užtikrina sklandžią vartotojo patirtį.
4. Pasirinkite būsenos valdymo (state management) strategiją: Pasirinkite būsenos valdymo strategiją, kuri gerai tinka jūsų aplikacijai. Galimybės apima bendras bibliotekas, įvykių magistrales (event buses) arba centralizuotus būsenos valdymo sprendimus, tokius kaip Redux ar Vuex.
5. Įdiekite patikimą kūrimo ir diegimo konvejerį (pipeline): Įdiekite patikimą kūrimo ir diegimo konvejerį, kuris automatizuotų mikro-frontend'ų kūrimo, testavimo ir diegimo procesą.
6. Nustatykite aiškius komunikacijos kanalus: Nustatykite aiškius komunikacijos kanalus tarp komandų, dirbančių su skirtingais mikro-frontend'ais. Tai užtikrina, kad visi yra tame pačiame puslapyje ir kad problemos sprendžiamos greitai.
7. Stebėkite ir matuokite našumą: Stebėkite ir matuokite savo mikro-frontend architektūros našumą. Tai leidžia jums identifikuoti ir spręsti našumo problemas.

Pavyzdys: Paprasto Mikro-Frontend'o su Modulių Federacija įgyvendinimas (React)

Iliustruokime paprastą pavyzdį naudojant React ir Webpack modulių federaciją. Turėsime dvi aplikacijas: Host (pagrindinę) aplikaciją ir Remote (nuotolinę) aplikaciją.

Nuotolinė aplikacija (RemoteApp) – Atskleidžia komponentą

1. Įdiekite priklausomybes:

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

              
                Copy
              
            
          

2. Sukurkite paprastą 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. Sukurkite index.js:

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

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

              
                Copy
              
            
          

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

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

              
                Copy
              
            
          

6. Pridėkite Babel konfigūraciją (.babelrc arba babel.config.js):

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

              
                Copy
              
            
          

7. Paleiskite nuotolinę aplikaciją (Remote App):

            npx webpack serve
            

              
                Copy
              
            
          

Pagrindinė aplikacija (HostApp) – Naudoja nuotolinį komponentą

1. Įdiekite priklausomybes:

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

              
                Copy
              
            
          

2. Sukurkite paprastą 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. Sukurkite index.js:

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

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

              
                Copy
              
            
          

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

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

              
                Copy
              
            
          

6. Pridėkite Babel konfigūraciją (.babelrc arba babel.config.js):

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

              
                Copy
              
            
          

7. Paleiskite pagrindinę aplikaciją (Host App):

            npx webpack serve
            

              
                Copy
              
            
          

Šis pavyzdys parodo, kaip pagrindinė aplikacija (Host App) gali naudoti RemoteComponent iš nuotolinės aplikacijos (Remote App) vykdymo metu. Svarbiausi aspektai apima nuotolinio įėjimo taško (remote entry point) apibrėžimą pagrindinės aplikacijos webpack konfigūracijoje ir React.lazy bei Suspense naudojimą asinchroniniam nuotolinio komponento įkėlimui.

Kada Rinktis Mikro-Frontend'us ir Modulių Federaciją

Mikro-frontend'ai ir modulių federacija nėra universalus sprendimas. Jie geriausiai tinka didelėms, sudėtingoms aplikacijoms, kuriose lygiagrečiai dirba kelios komandos. Štai keletas scenarijų, kada mikro-frontend'ai ir modulių federacija gali būti naudingi:

• Didelės komandos: Kai kelios komandos dirba su ta pačia aplikacija, mikro-frontend'ai gali padėti izoliuoti kodą ir sumažinti konfliktus.
• Senos aplikacijos (legacy): Mikro-frontend'ai gali būti naudojami laipsniškai migruoti seną aplikaciją į modernią architektūrą.
• Nepriklausomi diegimai: Kai reikia dažnai diegti atnaujinimus, nepaveikiant kitų aplikacijos dalių, mikro-frontend'ai gali suteikti reikiamą izoliaciją.
• Technologijų įvairovė: Kai norite naudoti skirtingas technologijas skirtingoms aplikacijos dalims, mikro-frontend'ai gali tai leisti.
• Mastelio keitimo reikalavimai: Kai reikia nepriklausomai keisti skirtingų aplikacijos dalių mastelį, mikro-frontend'ai gali suteikti reikiamą lankstumą.

Tačiau mikro-frontend'ai ir modulių federacija ne visada yra geriausias pasirinkimas. Mažoms, paprastoms aplikacijoms pridėtinis sudėtingumas gali neatsipirkti. Tokiais atvejais monolitinė architektūra gali būti tinkamesnė.

Alternatyvūs požiūriai į Mikro-Frontend'us

Nors modulių federacija yra galingas įrankis kuriant mikro-frontend'us, tai nėra vienintelis požiūris. Štai keletas alternatyvių strategijų:

• Iframes: Paprastas, bet dažnai mažiau našus požiūris, suteikiantis stiprią izoliaciją, bet keliantis iššūkių komunikacijoje ir stilių taikyme.
• Web Components: Standartais pagrįstas požiūris kuriant pakartotinai naudojamus vartotojo sąsajos elementus. Gali būti naudojamas kuriant mikro-frontend'us, kurie yra nepriklausomi nuo karkaso (framework-agnostic).
• Single-SPA: Karkasas, skirtas kelių JavaScript aplikacijų orkestravimui viename puslapyje.
• Server-Side Includes (SSI) / Edge-Side Includes (ESI): Serverio pusės technikos, skirtos HTML fragmentų sudėjimui.

Geriausios Mikro-Frontend Architektūros Praktikos

Efektyvus mikro-frontend architektūros įgyvendinimas reikalauja laikytis geriausių praktikų:

• Vienos atsakomybės principas: Kiekvienas mikro-frontend'as turėtų turėti aiškią ir gerai apibrėžtą atsakomybę.
• Nepriklausomas diegiamumas: Kiekvienas mikro-frontend'as turėtų būti diegiamas nepriklausomai.
• Technologinis agnosticizmas (kai įmanoma): Siekite technologinio agnosticizmo, kad komandos galėtų pasirinkti geriausius įrankius darbui.
• Sutartimis pagrįsta komunikacija: Apibrėžkite aiškias sutartis (contracts) komunikacijai tarp mikro-frontend'ų.
• Automatizuotas testavimas: Įdiekite išsamų automatizuotą testavimą, kad užtikrintumėte kiekvieno mikro-frontend'o ir visos sistemos kokybę.
• Centralizuotas registravimas (logging) ir stebėjimas (monitoring): Įdiekite centralizuotą registravimą ir stebėjimą, kad galėtumėte sekti mikro-frontend architektūros našumą ir būklę.

Išvada

Mikro-frontend'ai ir modulių federacija siūlo galingą požiūrį į mastelio keitimui pritaikytų, lengvai prižiūrimų ir lanksčių frontend aplikacijų kūrimą. Suskaidydamos dideles aplikacijas į mažesnes, nepriklausomas dalis, komandos gali dirbti efektyviau, dažniau leisti atnaujinimus ir greičiau diegti naujoves. Nors įgyvendinant mikro-frontend architektūrą kyla iššūkių, nauda dažnai nusveria išlaidas, ypač didelėms, sudėtingoms aplikacijoms. Modulių federacija suteikia ypač elegantišką ir efektyvų sprendimą dalintis kodu ir komponentais tarp mikro-frontend'ų. Kruopščiai planuodami ir vykdydami savo mikro-frontend strategiją, galite sukurti frontend architektūrą, kuri puikiai atitiks jūsų organizacijos ir vartotojų poreikius.

Žiniatinklio kūrimo pasauliui toliau evoliucionuojant, mikro-frontend'ai ir modulių federacija greičiausiai taps vis svarbesniais architektūriniais modeliais. Suprasdami šių požiūrių koncepcijas, naudą ir iššūkius, galėsite kurti naujos kartos žiniatinklio aplikacijas.