Frontend Micro-Frontend: Modulių Federacijos Architektūros Įvaldymas

Šiuolaikiniame sparčiai besivystančiame žiniatinklio kūrimo pasaulyje didelių frontend programų kūrimas ir palaikymas gali tapti vis sudėtingesnis. Tradicinės monolitinės architektūros dažnai sukelia tokius iššūkius kaip kodo išsipūtimas, lėti kūrimo laikai ir sunkumai vykdant nepriklausomus diegimus. Micro-frontends siūlo sprendimą, suskaidydami frontend į mažesnes, lengviau valdomas dalis. Šiame straipsnyje gilinamasi į modulių federaciją – galingą micro-frontends įgyvendinimo techniką, nagrinėjant jos privalumus, architektūrą ir praktines įgyvendinimo strategijas.

Kas yra Micro-Frontends?

Micro-frontends yra architektūrinis stilius, kai frontend programa yra suskaidoma į mažesnes, nepriklausomas ir diegiamas dalis. Kiekvieną micro-frontend paprastai valdo atskira komanda, kas leidžia pasiekti didesnę autonomiją ir greitesnius kūrimo ciklus. Šis požiūris atspindi microservices architektūrą, dažnai naudojamą backend dalyje.

Pagrindinės micro-frontends savybės:

• Nepriklausomas diegiamumas: Kiekvienas micro-frontend gali būti diegiamas nepriklausomai, nepaveikiant kitų programos dalių.
• Komandos autonomija: Skirtingos komandos gali valdyti ir kurti skirtingus micro-frontends, naudodamos savo pageidaujamas technologijas ir darbo eigas.
• Technologijų įvairovė: Micro-frontends gali būti kuriami naudojant skirtingas karkasų sistemas ir bibliotekas, leidžiant komandoms pasirinkti geriausius įrankius darbui.
• Izoliacija: Micro-frontends turėtų būti izoliuoti vienas nuo kito, kad būtų išvengta kaskadinių gedimų ir užtikrintas stabilumas.

Kodėl verta naudoti Micro-Frontends?

Micro-frontend architektūros pritaikymas suteikia keletą svarbių privalumų, ypač didelėms ir sudėtingoms programoms:

• Pagerintas mastelio keitimas: Frontend suskaidymas į mažesnes dalis palengvina programos mastelio keitimą pagal poreikį.
• Greitesni kūrimo ciklai: Nepriklausomos komandos gali dirbti lygiagrečiai, todėl kūrimo ir išleidimo ciklai tampa greitesni.
• Didesnė komandos autonomija: Komandos turi daugiau kontrolės savo kodui ir gali priimti sprendimus nepriklausomai.
• Lengvesnė priežiūra: Mažesnes kodo bazes lengviau prižiūrėti ir derinti.
• Technologijų agnostiškumas: Komandos gali pasirinkti geriausias technologijas savo specifiniams poreikiams, kas leidžia diegti inovacijas ir eksperimentuoti.
• Sumažinta rizika: Diegimai yra mažesni ir dažnesni, kas sumažina didelio masto gedimų riziką.

Įvadas į Modulių Federaciją

Modulių federacija yra Webpack 5 pristatyta funkcija, leidžianti JavaScript programoms dinamiškai įkelti kodą iš kitų programų vykdymo metu. Tai leidžia kurti tikrai nepriklausomus ir komponuojamus micro-frontends. Užuot viską sudėjus į vieną paketą, modulių federacija leidžia skirtingoms programoms dalintis ir vartoti viena kitos modulius taip, tarsi jie būtų vietinės priklausomybės.

Skirtingai nuo tradicinių micro-frontends metodų, kurie remiasi iframe'ais ar web komponentais, modulių federacija suteikia sklandesnę ir labiau integruotą vartotojo patirtį. Ji išvengia našumo praradimo ir sudėtingumo, susijusio su šiomis kitomis technikomis.

Kaip veikia Modulių Federacija

Modulių federacija veikia remdamasi modulių „atskleidimo“ (exposing) ir „vartojimo“ (consuming) koncepcija. Viena programa („šeimininkas“ arba „konteineris“) gali atskleisti modulius, o kitos programos („nuotolinės“) gali vartoti šiuos atskleistus modulius. Štai proceso suskirstymas:

1. Modulio atskleidimas: Micro-frontend, sukonfigūruotas kaip „nuotolinė“ programa Webpack, atskleidžia tam tikrus modulius (komponentus, funkcijas, pagalbines priemones) per konfigūracijos failą. Ši konfigūracija nurodo modulius, kuriais bus dalijamasi, ir jų atitinkamus įėjimo taškus.
2. Modulio vartojimas: Kitas micro-frontend, sukonfigūruotas kaip „šeimininko“ arba „konteinerio“ programa, deklaruoja nuotolinę programą kaip priklausomybę. Jis nurodo URL, kur galima rasti nuotolinės programos modulių federacijos manifestą (mažą JSON failą, aprašantį atskleistus modulius).
3. Vykdymo metu išsprendimas: Kai šeimininko programai reikia naudoti modulį iš nuotolinės programos, ji dinamiškai nuskaito nuotolinės programos modulių federacijos manifestą. Tada Webpack išsprendžia modulio priklausomybę ir įkelia reikiamą kodą iš nuotolinės programos vykdymo metu.
4. Kodo bendrinimas: Modulių federacija taip pat leidžia bendrinti kodą tarp šeimininko ir nuotolinių programų. Jei abi programos naudoja tą pačią bendrinamos priklausomybės versiją (pvz., React, lodash), kodas bus bendrinamas, išvengiant dubliavimosi ir sumažinant paketų dydžius.

Modulių Federacijos Nustatymas: Praktinis Pavyzdys

Pailiustruokime modulių federaciją paprastu pavyzdžiu, kuriame dalyvauja du micro-frontends: „Produktų Katalogas“ ir „Pirkinių Krepšelis“. Produktų katalogas atskleis produktų sąrašo komponentą, kurį pirkinių krepšelis naudos susijusiems produktams rodyti.

Projekto Struktūra

  
  micro-frontend-example/
    product-catalog/
      src/
        components/
          ProductList.jsx
        index.js
        webpack.config.js
    shopping-cart/
      src/
        components/
          RelatedProducts.jsx
        index.js
        webpack.config.js
  

Produktų Katalogas (Nuotolinis)

webpack.config.js

  
  const { ModuleFederationPlugin } = require('webpack').container;
  const path = require('path');

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'product_catalog',
        filename: 'remoteEntry.js',
        exposes: {
          './ProductList': './src/components/ProductList',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Paaiškinimas:

• name: Unikalus nuotolinės programos pavadinimas.
• filename: Atskleidžiamo įėjimo taško failo pavadinimas. Šiame faile yra modulių federacijos manifestas.
• exposes: Apibrėžia, kurie moduliai bus atskleisti šios programos. Šiuo atveju mes atskleidžiame `ProductList` komponentą iš `src/components/ProductList.jsx` pavadinimu `./ProductList`.
• shared: Nurodo priklausomybes, kuriomis turėtų būti dalijamasi tarp šeimininko ir nuotolinių programų. Tai yra labai svarbu norint išvengti kodo dubliavimosi ir užtikrinti suderinamumą. `singleton: true` užtikrina, kad bus įkelta tik viena bendrinamos priklausomybės instancija. `eager: true` įkelia bendrinamą priklausomybę iš pradžių, kas gali pagerinti našumą. `requiredVersion` apibrėžia priimtiną bendrinamos priklausomybės versijų diapazoną.

src/components/ProductList.jsx

  
  import React from 'react';

  const ProductList = ({ products }) => (
    

      {products.map((product) => (
        
{product.name} - ${product.price}
      ))}
    
  );

  export default ProductList;
  

Pirkinių Krepšelis (Šeimininkas)

webpack.config.js

  
  const { ModuleFederationPlugin } = require('webpack').container;
  const path = require('path');

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'shopping_cart',
        remotes: {
          product_catalog: 'product_catalog@http://localhost:3001/remoteEntry.js',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Paaiškinimas:

• name: Unikalus šeimininko programos pavadinimas.
• remotes: Apibrėžia nuotolines programas, iš kurių ši programa vartos modulius. Šiuo atveju deklaruojame nuotolinę programą pavadinimu `product_catalog` ir nurodome URL, kur galima rasti jos `remoteEntry.js` failą. Formatas yra `remoteName: 'remoteName@remoteEntryUrl'`.
• shared: Panašiai kaip nuotolinė programa, šeimininko programa taip pat apibrėžia savo bendrinamas priklausomybes. Tai užtikrina, kad šeimininko ir nuotolinės programos naudos suderinamas bendrinamų bibliotekų versijas.

src/components/RelatedProducts.jsx

  
  import React, { useEffect, useState } from 'react';
  import ProductList from 'product_catalog/ProductList';

  const RelatedProducts = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
      // Fetch related products data (e.g., from an API)
      const fetchProducts = async () => {
        // Replace with your actual API endpoint
        const response = await fetch('https://fakestoreapi.com/products?limit=3');
        const data = await response.json();
        setProducts(data);
      };

      fetchProducts();
    }, []);

    return (
      

        
Related Products
        {products.length > 0 ?  : 
Loading...
}
      
    );
  };

  export default RelatedProducts;
  

Paaiškinimas:

• import ProductList from 'product_catalog/ProductList'; Ši eilutė importuoja `ProductList` komponentą iš `product_catalog` nuotolinės programos. Sintaksė `remoteName/moduleName` nurodo Webpack gauti modulį iš nurodytos nuotolinės programos.
• Komponentas tada naudoja importuotą `ProductList` komponentą susijusiems produktams rodyti.

Pavyzdžio Paleidimas

1. Paleiskite tiek Produktų Katalogo, tiek Pirkinių Krepšelio programas naudodami atitinkamus kūrimo serverius (pvz., `npm start`). Įsitikinkite, kad jos veikia skirtinguose prievaduose (pvz., Produktų Katalogas prievade 3001, o Pirkinių Krepšelis prievade 3000).
2. Naršyklėje atidarykite Pirkinių Krepšelio programą.
3. Turėtumėte pamatyti Susijusių produktų skiltį, kurią atvaizduoja `ProductList` komponentas iš Produktų Katalogo programos.

Pažangios Modulių Federacijos Koncepcijos

Be pagrindinio nustatymo, modulių federacija siūlo keletą pažangių funkcijų, kurios gali pagerinti jūsų micro-frontend architektūrą:

Kodo Bendrinimas ir Versijavimas

Kaip parodyta pavyzdyje, modulių federacija leidžia bendrinti kodą tarp šeimininko ir nuotolinių programų. Tai pasiekiama per `shared` konfigūracijos parinktį Webpack. Nurodydami bendrinamas priklausomybes, galite išvengti kodo dubliavimosi ir sumažinti paketų dydžius. Tinkamas bendrinamų priklausomybių versijavimas yra labai svarbus siekiant užtikrinti suderinamumą ir išvengti konfliktų. Semantinis versijavimas (SemVer) yra plačiai naudojamas standartas programinės įrangos versijavimui, leidžiantis apibrėžti suderinamus versijų diapazonus (pvz., `^17.0.0` leidžia bet kurią versiją, didesnę arba lygią 17.0.0, bet mažesnę nei 18.0.0).

Dinaminiai Nuotoliniai Moduliai

Ankstesniame pavyzdyje nuotolinės programos URL buvo įrašytas tiesiogiai `webpack.config.js` faile. Tačiau daugelyje realių scenarijų gali prireikti dinamiškai nustatyti nuotolinės programos URL vykdymo metu. Tai galima pasiekti naudojant pažadu (promise) pagrįstą nuotolinę konfigūraciją:

  
  // webpack.config.js
  remotes: {
    product_catalog: new Promise(resolve => {
      // Fetch the remote URL from a configuration file or API
      fetch('/config.json')
        .then(response => response.json())
        .then(config => {
          const remoteUrl = config.productCatalogUrl;
          resolve(`product_catalog@${remoteUrl}/remoteEntry.js`);
        });
    }),
  },
  

Tai leidžia konfigūruoti nuotolinės programos URL pagal aplinką (pvz., kūrimo, testavimo, gamybos) ar kitus veiksnius.

Asinchroninis Modulių Įkėlimas

Modulių federacija palaiko asinchroninį modulių įkėlimą, leidžiantį įkelti modulius pagal poreikį. Tai gali pagerinti pradinį programos įkėlimo laiką, atidedant neesminių modulių įkėlimą.

  
  // RelatedProducts.jsx
  import React, { Suspense, lazy } from 'react';

  const ProductList = lazy(() => import('product_catalog/ProductList'));

  const RelatedProducts = () => {
    return (
      

        
Related Products
        Loading...
}>
          
        
      
    );
  };
  

Naudodami `React.lazy` ir `Suspense`, galite asinchroniškai įkelti `ProductList` komponentą iš nuotolinės programos. `Suspense` komponentas suteikia atsarginę vartotojo sąsają (pvz., įkėlimo indikatorių), kol modulis yra įkeliamas.

Federuoti Stiliai ir Ištekliai

Modulių federacija taip pat gali būti naudojama stiliams ir ištekliams (assets) bendrinti tarp micro-frontends. Tai gali padėti išlaikyti nuoseklią išvaizdą ir pojūtį visoje jūsų programoje.

Norėdami bendrinti stilius, galite atskleisti CSS modulius ar stilizuotus komponentus iš nuotolinės programos. Norėdami bendrinti išteklius (pvz., paveikslėlius, šriftus), galite sukonfigūruoti Webpack, kad nukopijuotų išteklius į bendrinamą vietą, o tada juos naudoti iš šeimininko programos.

Geriausios Modulių Federacijos Praktikos

Įgyvendinant modulių federaciją, svarbu laikytis geriausių praktikų, kad užtikrintumėte sėkmingą ir palaikomą architektūrą:

• Apibrėžkite aiškias ribas: Aiškiai apibrėžkite ribas tarp micro-frontends, kad išvengtumėte stipraus susiejimo ir užtikrintumėte nepriklausomą diegiamumą.
• Nustatykite komunikacijos protokolus: Apibrėžkite aiškius komunikacijos protokolus tarp micro-frontends. Apsvarstykite galimybę naudoti įvykių magistrales (event buses), bendrinamas būsenos valdymo bibliotekas ar pasirinktines API.
• Atidžiai valdykite bendrinamas priklausomybes: Atidžiai valdykite bendrinamas priklausomybes, kad išvengtumėte versijų konfliktų ir užtikrintumėte suderinamumą. Naudokite semantinį versijavimą ir apsvarstykite galimybę naudoti priklausomybių valdymo įrankį, pvz., npm ar yarn.
• Įdiekite patikimą klaidų tvarkymą: Įdiekite patikimą klaidų tvarkymą, kad išvengtumėte kaskadinių gedimų ir užtikrintumėte savo programos stabilumą.
• Stebėkite našumą: Stebėkite savo micro-frontends našumą, kad nustatytumėte kliūtis ir optimizuotumėte našumą.
• Automatizuokite diegimus: Automatizuokite diegimo procesą, kad užtikrintumėte nuoseklius ir patikimus diegimus.
• Naudokite nuoseklų kodavimo stilių: Visiems micro-frontends taikykite nuoseklų kodavimo stilių, kad pagerintumėte skaitomumą ir palaikomumą. Įrankiai, tokie kaip ESLint ir Prettier, gali padėti tai padaryti.
• Dokumentuokite savo architektūrą: Dokumentuokite savo micro-frontend architektūrą, kad visi komandos nariai suprastų sistemą ir kaip ji veikia.

Modulių Federacija vs. Kiti Micro-Frontend Metodai

Nors modulių federacija yra galinga technika micro-frontends įgyvendinimui, tai nėra vienintelis metodas. Kiti populiarūs metodai apima:

• Iframes: Iframe'ai suteikia stiprią izoliaciją tarp micro-frontends, tačiau juos gali būti sunku sklandžiai integruoti ir jie gali turėti našumo praradimų.
• Web komponentai: Web komponentai leidžia kurti daugkartinio naudojimo vartotojo sąsajos elementus, kuriuos galima naudoti skirtinguose micro-frontends. Tačiau juos gali būti sudėtingiau įgyvendinti nei modulių federaciją.
• Integracija kūrimo metu (Build-Time Integration): Šis metodas apima visų micro-frontends sujungimą į vieną programą kūrimo metu. Nors tai gali supaprastinti diegimą, tai sumažina komandos autonomiją ir padidina konfliktų riziką.
• Single-SPA: Single-SPA yra karkasas, leidžiantis sujungti kelias vieno puslapio programas (single-page applications) į vieną programą. Jis suteikia lankstesnį požiūrį nei integracija kūrimo metu, bet gali būti sudėtingesnis nustatyti.

Pasirinkimas, kurį metodą naudoti, priklauso nuo konkrečių jūsų programos reikalavimų bei jūsų komandos dydžio ir struktūros. Modulių federacija siūlo gerą lankstumo, našumo ir naudojimo paprastumo pusiausvyrą, todėl yra populiarus pasirinkimas daugeliui projektų.

Modulių Federacijos Pavyzdžiai Realiame Pasaulyje

Nors konkrečių įmonių įgyvendinimai dažnai yra konfidencialūs, bendrieji modulių federacijos principai taikomi įvairiose pramonės šakose ir scenarijuose. Štai keletas galimų pavyzdžių:

• Elektroninės prekybos platformos: Elektroninės prekybos platforma galėtų naudoti modulių federaciją, kad atskirtų skirtingas svetainės dalis, tokias kaip produktų katalogas, pirkinių krepšelis, atsiskaitymo procesas ir vartotojo paskyros valdymas, į atskirus micro-frontends. Tai leidžia skirtingoms komandoms dirbti su šiomis dalimis nepriklausomai ir diegti atnaujinimus nepaveikiant likusios platformos dalies. Pavyzdžiui, komanda Vokietijoje galėtų sutelkti dėmesį į produktų katalogą, o komanda Indijoje valdytų pirkinių krepšelį.
• Finansinių paslaugų programos: Finansinių paslaugų programa galėtų naudoti modulių federaciją jautrioms funkcijoms, tokioms kaip prekybos platformos ir paskyrų valdymas, izoliuoti į atskirus micro-frontends. Tai padidina saugumą ir leidžia atlikti nepriklausomą šių kritinių komponentų auditą. Įsivaizduokite komandą Londone, kuri specializuojasi prekybos platformos funkcijose, ir kitą komandą Niujorke, kuri tvarko paskyrų valdymą.
• Turinio valdymo sistemos (TVS): TVS galėtų naudoti modulių federaciją, kad leistų kūrėjams kurti ir diegti pasirinktinius modulius kaip micro-frontends. Tai suteikia didesnį lankstumą ir pritaikymo galimybes TVS vartotojams. Komanda Japonijoje galėtų sukurti specializuotą paveikslėlių galerijos modulį, o komanda Brazilijoje kurtų pažangų teksto redaktorių.
• Sveikatos priežiūros programos: Sveikatos priežiūros programa galėtų naudoti modulių federaciją integruoti skirtingas sistemas, tokias kaip elektroniniai sveikatos įrašai (EHR), pacientų portalai ir atsiskaitymo sistemos, kaip atskirus micro-frontends. Tai pagerina sąveikumą ir leidžia lengviau integruoti naujas sistemas. Pavyzdžiui, komanda Kanadoje galėtų integruoti naują telemedicinos modulį, o komanda Australijoje tobulintų pacientų portalo patirtį.

Išvada

Modulių federacija suteikia galingą ir lankstų požiūrį į micro-frontends įgyvendinimą. Leisdama programoms dinamiškai įkelti kodą viena iš kitos vykdymo metu, ji leidžia kurti tikrai nepriklausomas ir komponuojamas frontend architektūras. Nors tai reikalauja kruopštaus planavimo ir įgyvendinimo, didesnio mastelio keitimo, greitesnių kūrimo ciklų ir didesnės komandos autonomijos privalumai daro ją patraukliu pasirinkimu didelėms ir sudėtingoms žiniatinklio programoms. Žiniatinklio kūrimo pasauliui toliau vystantis, modulių federacija yra pasirengusi vaidinti vis svarbesnį vaidmenį formuojant frontend architektūros ateitį.

Suprasdami šiame straipsnyje aprašytas koncepcijas ir geriausias praktikas, galite pasinaudoti modulių federacija kurdami mastelio keitimui pritaikytas, palaikomas ir novatoriškas frontend programas, atitinkančias šiuolaikinio greito skaitmeninio pasaulio reikalavimus.