Frontend mikro-frontend: Ovladavanje arhitekturom Module Federation

U današnjem brzorazvijajućem svijetu web razvoja, izgradnja i održavanje velikih frontend aplikacija može postati sve složenije. Tradicionalne monolitne arhitekture često dovode do izazova poput prevelikog koda (code bloat), sporog vremena izgradnje i poteškoća u neovisnim implementacijama. Mikro-frontendi nude rješenje razbijanjem frontenda na manje, lakše upravljive dijelove. Ovaj članak duboko uranja u Module Federation, moćnu tehniku za implementaciju mikro-frontenda, istražujući njezine prednosti, arhitekturu i praktične strategije implementacije.

Što su mikro-frontendi?

Mikro-frontendi su arhitektonski stil u kojem se frontend aplikacija razlaže na manje, neovisne i zasebno implementirane jedinice. Svaki mikro-frontend obično je u vlasništvu zasebnog tima, što omogućuje veću autonomiju i brže razvojne cikluse. Ovaj pristup preslikava arhitekturu mikroservisa koja se često koristi na backendu.

Ključne karakteristike mikro-frontenda uključuju:

• Neovisna implementacija: Svaki mikro-frontend može se implementirati neovisno, bez utjecaja na druge dijelove aplikacije.
• Timska autonomija: Različiti timovi mogu posjedovati i razvijati različite mikro-frontende koristeći svoje preferirane tehnologije i radne procese.
• Tehnološka raznolikost: Mikro-frontendi mogu biti izgrađeni koristeći različite okvire i biblioteke, omogućujući timovima da odaberu najbolje alate za posao.
• Izolacija: Mikro-frontendi bi trebali biti izolirani jedni od drugih kako bi se spriječili kaskadni kvarovi i osigurala stabilnost.

Zašto koristiti mikro-frontende?

Usvajanje mikro-frontend arhitekture nudi nekoliko značajnih prednosti, posebno za velike i složene aplikacije:

• Poboljšana skalabilnost: Razbijanje frontenda na manje jedinice olakšava skaliranje aplikacije prema potrebi.
• Brži razvojni ciklusi: Neovisni timovi mogu raditi paralelno, što dovodi do bržeg razvoja i ciklusa izdanja.
• Povećana timska autonomija: Timovi imaju više kontrole nad svojim kodom i mogu samostalno donositi odluke.
• Lakše održavanje: Manje baze koda lakše je održavati i ispravljati pogreške.
• Tehnološki neovisno: Timovi mogu odabrati najbolje tehnologije za svoje specifične potrebe, omogućujući inovacije i eksperimentiranje.
• Smanjeni rizik: Implementacije su manje i češće, što smanjuje rizik od velikih kvarova.

Uvod u Module Federation

Module Federation je značajka uvedena u Webpack 5 koja omogućuje JavaScript aplikacijama dinamičko učitavanje koda iz drugih aplikacija tijekom izvođenja. To omogućuje stvaranje istinski neovisnih i kompozabilnih mikro-frontenda. Umjesto da se sve gradi u jedan paket (bundle), Module Federation omogućuje različitim aplikacijama da dijele i koriste module jedne drugih kao da su lokalne ovisnosti.

Za razliku od tradicionalnih pristupa mikro-frontendima koji se oslanjaju na iframeove ili web komponente, Module Federation pruža besprijekornije i integriranije iskustvo za korisnika. Izbjegava probleme s performansama i složenost povezanu s tim drugim tehnikama.

Kako radi Module Federation

Module Federation radi na konceptu "izlaganja" (exposing) i "korištenja" (consuming) modula. Jedna aplikacija ("host" ili "container") može izlagati module, dok druge aplikacije ("remotes") mogu koristiti te izložene module. Evo raščlambe procesa:

1. Izlaganje modula: Mikro-frontend, konfiguriran kao "remote" aplikacija u Webpacku, izlaže određene module (komponente, funkcije, uslužne programe) putem konfiguracijske datoteke. Ova konfiguracija specificira module koji će se dijeliti i njihove odgovarajuće ulazne točke.
2. Korištenje modula: Drugi mikro-frontend, konfiguriran kao "host" ili "container" aplikacija, deklarira remote aplikaciju kao ovisnost. Specificira URL na kojem se može pronaći manifest Module Federationa remote aplikacije (mala JSON datoteka koja opisuje izložene module).
3. Razrješavanje u vrijeme izvođenja: Kada host aplikacija treba koristiti modul iz remote aplikacije, dinamički dohvaća manifest Module Federationa remote aplikacije. Webpack zatim razrješava ovisnost modula i učitava potrebni kod iz remote aplikacije u vrijeme izvođenja.
4. Dijeljenje koda: Module Federation također omogućuje dijeljenje koda između host i remote aplikacija. Ako obje aplikacije koriste istu verziju dijeljene ovisnosti (npr. React, lodash), kod će se dijeliti, izbjegavajući dupliciranje i smanjujući veličinu paketa.

Postavljanje Module Federationa: Praktičan primjer

Ilustrirajmo Module Federation jednostavnim primjerom koji uključuje dva mikro-frontenda: "Katalog proizvoda" i "Košarica za kupovinu". Katalog proizvoda će izložiti komponentu za popis proizvoda, koju će Košarica za kupovinu koristiti za prikaz povezanih proizvoda.

Struktura projekta

  
  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
  

Katalog proizvoda (Remote)

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

Objašnjenje:

• name: Jedinstveno ime remote aplikacije.
• filename: Naziv ulazne datoteke koja će biti izložena. Ova datoteka sadrži manifest Module Federationa.
• exposes: Definira koji će moduli biti izloženi od strane ove aplikacije. U ovom slučaju, izlažemo komponentu `ProductList` iz `src/components/ProductList.jsx` pod nazivom `./ProductList`.
• shared: Specificira ovisnosti koje bi se trebale dijeliti između host i remote aplikacija. Ovo je ključno za izbjegavanje dupliciranog koda i osiguravanje kompatibilnosti. `singleton: true` osigurava da se učita samo jedna instanca dijeljene ovisnosti. `eager: true` učitava dijeljenu ovisnost inicijalno, što može poboljšati performanse. `requiredVersion` definira prihvatljiv raspon verzija za dijeljenu ovisnost.

src/components/ProductList.jsx

  
  import React from 'react';

  const ProductList = ({ products }) => (
    

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

  export default ProductList;
  

Košarica za kupovinu (Host)

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

Objašnjenje:

• name: Jedinstveno ime host aplikacije.
• remotes: Definira remote aplikacije iz kojih će ova aplikacija koristiti module. U ovom slučaju, deklariramo remote pod nazivom `product_catalog` i specificiramo URL na kojem se može pronaći njegova `remoteEntry.js` datoteka. Format je `remoteName: 'remoteName@remoteEntryUrl'`.
• shared: Slično kao i remote aplikacija, host aplikacija također definira svoje dijeljene ovisnosti. To osigurava da host i remote aplikacije koriste kompatibilne verzije dijeljenih biblioteka.

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;
  

Objašnjenje:

• import ProductList from 'product_catalog/ProductList'; Ova linija uvozi komponentu `ProductList` iz `product_catalog` remote-a. Sintaksa `remoteName/moduleName` govori Webpacku da dohvati modul iz specificirane remote aplikacije.
• Komponenta zatim koristi uvezenu `ProductList` komponentu za prikaz povezanih proizvoda.

Pokretanje primjera

1. Pokrenite obje aplikacije, Katalog proizvoda i Košaricu za kupovinu, koristeći njihove odgovarajuće razvojne poslužitelje (npr. `npm start`). Provjerite rade li na različitim portovima (npr. Katalog proizvoda na portu 3001, a Košarica na portu 3000).
2. Otvorite aplikaciju Košarica za kupovinu u svom pregledniku.
3. Trebali biste vidjeti odjeljak Povezani proizvodi, koji se iscrtava pomoću komponente `ProductList` iz aplikacije Katalog proizvoda.

Napredni koncepti Module Federationa

Osim osnovnog postavljanja, Module Federation nudi nekoliko naprednih značajki koje mogu poboljšati vašu mikro-frontend arhitekturu:

Dijeljenje koda i verzioniranje

Kao što je prikazano u primjeru, Module Federation omogućuje dijeljenje koda između host i remote aplikacija. To se postiže kroz `shared` opciju konfiguracije u Webpacku. Specificiranjem dijeljenih ovisnosti, možete izbjeći duplicirani kod i smanjiti veličinu paketa. Pravilno verzioniranje dijeljenih ovisnosti ključno je za osiguravanje kompatibilnosti i sprječavanje sukoba. Semantičko verzioniranje (SemVer) je široko korišten standard za verzioniranje softvera, omogućujući vam definiranje kompatibilnih raspona verzija (npr. `^17.0.0` dopušta bilo koju verziju veću ili jednaku 17.0.0, ali manju od 18.0.0).

Dinamički Remote-ovi

U prethodnom primjeru, URL remote-a bio je tvrdo kodiran u `webpack.config.js` datoteci. Međutim, u mnogim stvarnim scenarijima, možda ćete trebati dinamički odrediti URL remote-a u vrijeme izvođenja. To se može postići korištenjem konfiguracije remote-a temeljenoj na promise-u:

  
  // 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`);
        });
    }),
  },
  

To vam omogućuje da konfigurirate URL remote-a na temelju okruženja (npr. razvoj, testiranje, produkcija) ili drugih faktora.

Asinkrono učitavanje modula

Module Federation podržava asinkrono učitavanje modula, omogućujući vam da učitavate module na zahtjev. To može poboljšati početno vrijeme učitavanja vaše aplikacije odgađanjem učitavanja nekritičnih modula.

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

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

  const RelatedProducts = () => {
    return (
      

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

Koristeći `React.lazy` i `Suspense`, možete asinkrono učitati komponentu `ProductList` iz remote aplikacije. `Suspense` komponenta pruža zamjensko korisničko sučelje (npr. indikator učitavanja) dok se modul učitava.

Federirani stilovi i resursi

Module Federation se također može koristiti za dijeljenje stilova i resursa između mikro-frontenda. To može pomoći u održavanju dosljednog izgleda i dojma vaše aplikacije.

Za dijeljenje stilova, možete izložiti CSS module ili styled komponente iz remote aplikacije. Za dijeljenje resursa (npr. slika, fontova), možete konfigurirati Webpack da kopira resurse na zajedničku lokaciju i zatim ih referencirate iz host aplikacije.

Najbolje prakse za Module Federation

Prilikom implementacije Module Federationa, važno je slijediti najbolje prakse kako biste osigurali uspješnu i održivu arhitekturu:

• Definirajte jasne granice: Jasno definirajte granice između mikro-frontenda kako biste izbjegli čvrstu povezanost i osigurali neovisnu implementaciju.
• Uspostavite komunikacijske protokole: Definirajte jasne komunikacijske protokole između mikro-frontenda. Razmislite o korištenju sabirnica događaja (event buses), dijeljenih biblioteka za upravljanje stanjem ili prilagođenih API-ja.
• Pažljivo upravljajte dijeljenim ovisnostima: Pažljivo upravljajte dijeljenim ovisnostima kako biste izbjegli sukobe verzija i osigurali kompatibilnost. Koristite semantičko verzioniranje i razmislite o korištenju alata za upravljanje ovisnostima poput npm-a ili yarn-a.
• Implementirajte robusno rukovanje pogreškama: Implementirajte robusno rukovanje pogreškama kako biste spriječili kaskadne kvarove i osigurali stabilnost vaše aplikacije.
• Pratite performanse: Pratite performanse svojih mikro-frontenda kako biste identificirali uska grla i optimizirali performanse.
• Automatizirajte implementacije: Automatizirajte proces implementacije kako biste osigurali dosljedne i pouzdane implementacije.
• Koristite dosljedan stil kodiranja: Nametnite dosljedan stil kodiranja u svim mikro-frontendima kako biste poboljšali čitljivost i održivost. Alati poput ESLint-a i Prettier-a mogu pomoći u tome.
• Dokumentirajte svoju arhitekturu: Dokumentirajte svoju mikro-frontend arhitekturu kako biste osigurali da svi članovi tima razumiju sustav i kako on funkcionira.

Module Federation naspram drugih mikro-frontend pristupa

Iako je Module Federation moćna tehnika za implementaciju mikro-frontenda, to nije jedini pristup. Druge popularne metode uključuju:

• Iframeovi: Iframeovi pružaju snažnu izolaciju između mikro-frontenda, ali ih može biti teško besprijekorno integrirati i mogu imati negativan utjecaj na performanse.
• Web komponente: Web komponente omogućuju vam stvaranje višekratnih UI elemenata koji se mogu koristiti u različitim mikro-frontendima. Međutim, mogu biti složenije za implementaciju od Module Federationa.
• Integracija u vrijeme izgradnje (build-time): Ovaj pristup uključuje izgradnju svih mikro-frontenda u jednu aplikaciju u vrijeme izgradnje. Iako može pojednostaviti implementaciju, smanjuje timsku autonomiju i povećava rizik od sukoba.
• Single-SPA: Single-SPA je okvir koji vam omogućuje kombiniranje više single-page aplikacija u jednu aplikaciju. Pruža fleksibilniji pristup od integracije u vrijeme izgradnje, ali može biti složeniji za postavljanje.

Odabir pristupa ovisi o specifičnim zahtjevima vaše aplikacije te veličini i strukturi vašeg tima. Module Federation nudi dobar balans između fleksibilnosti, performansi i jednostavnosti korištenja, što ga čini popularnim izborom za mnoge projekte.

Primjeri Module Federationa iz stvarnog svijeta

Iako su specifične implementacije tvrtki često povjerljive, opći principi Module Federationa primjenjuju se u različitim industrijama i scenarijima. Evo nekih mogućih primjera:

• Platforme za e-trgovinu: Platforma za e-trgovinu mogla bi koristiti Module Federation za odvajanje različitih dijelova web stranice, kao što su katalog proizvoda, košarica, proces naplate i upravljanje korisničkim računom, u zasebne mikro-frontende. To omogućuje različitim timovima da neovisno rade na tim odjeljcima i implementiraju ažuriranja bez utjecaja na ostatak platforme. Na primjer, tim u *Njemačkoj* mogao bi se usredotočiti na katalog proizvoda, dok tim u *Indiji* upravlja košaricom.
• Aplikacije za financijske usluge: Aplikacija za financijske usluge mogla bi koristiti Module Federation za izoliranje osjetljivih značajki, poput platformi za trgovanje i upravljanja računima, u zasebne mikro-frontende. To poboljšava sigurnost i omogućuje neovisnu reviziju tih kritičnih komponenti. Zamislite tim u *Londonu* specijaliziran za značajke platforme za trgovanje i drugi tim u *New Yorku* koji se bavi upravljanjem računima.
• Sustavi za upravljanje sadržajem (CMS): CMS bi mogao koristiti Module Federation kako bi omogućio programerima stvaranje i implementaciju prilagođenih modula kao mikro-frontenda. To omogućuje veću fleksibilnost i prilagodbu za korisnike CMS-a. Tim u *Japanu* mogao bi izraditi specijalizirani modul galerije slika, dok tim u *Brazilu* stvara napredni uređivač teksta.
• Aplikacije u zdravstvu: Aplikacija u zdravstvu mogla bi koristiti Module Federation za integraciju različitih sustava, kao što su elektronički zdravstveni kartoni (EHR), portali za pacijente i sustavi za naplatu, kao zasebne mikro-frontende. To poboljšava interoperabilnost i omogućuje lakšu integraciju novih sustava. Na primjer, tim u *Kanadi* mogao bi integrirati novi modul za telemedicinu, dok se tim u *Australiji* fokusira na poboljšanje iskustva na portalu za pacijente.

Zaključak

Module Federation pruža moćan i fleksibilan pristup implementaciji mikro-frontenda. Omogućavanjem aplikacijama da dinamički učitavaju kod jedna od druge u vrijeme izvođenja, omogućuje stvaranje istinski neovisnih i kompozabilnih frontend arhitektura. Iako zahtijeva pažljivo planiranje i implementaciju, prednosti povećane skalabilnosti, bržih razvojnih ciklusa i veće timske autonomije čine ga uvjerljivim izborom za velike i složene web aplikacije. Kako se svijet web razvoja nastavlja razvijati, Module Federation je spreman igrati sve važniju ulogu u oblikovanju budućnosti frontend arhitekture.

Razumijevanjem koncepata i najboljih praksi navedenih u ovom članku, možete iskoristiti Module Federation za izgradnju skalabilnih, održivih i inovativnih frontend aplikacija koje zadovoljavaju zahtjeve današnjeg brzog digitalnog svijeta.