JavaScript Module Federation: Sveobuhvatan vodič za mikro-frontend arhitekturu

U svijetu web razvoja koji se neprestano mijenja, izgradnja velikih i složenih aplikacija može brzo postati zastrašujući zadatak. Tradicionalne monolitne arhitekture često dovode do čvrsto povezanih kodnih baza, što otežava skalabilnost, održivost i neovisna postavljanja. Mikro-frontendovi nude uvjerljivu alternativu, razbijajući aplikaciju na manje, neovisno postavljive jedinice. Među različitim tehnikama mikro-frontenda, JavaScript Module Federation ističe se kao moćno i elegantno rješenje.

Što je JavaScript Module Federation?

JavaScript Module Federation, predstavljen u Webpacku 5, omogućuje JavaScript aplikacijama dinamičko dijeljenje koda i ovisnosti u stvarnom vremenu. Za razliku od tradicionalnih metoda dijeljenja koda koje se oslanjaju na ovisnosti definirane tijekom izgradnje (build-time), Module Federation omogućuje aplikacijama učitavanje i izvršavanje koda iz drugih aplikacija, čak i ako su izgrađene s različitim tehnologijama ili verzijama iste biblioteke. To stvara istinski distribuiranu i razdvojenu arhitekturu.

Zamislite scenarij u kojem više timova radi na različitim dijelovima velike e-commerce web stranice. Jedan tim može biti odgovoran za katalog proizvoda, drugi za košaricu, a treći za autentifikaciju korisnika. S Module Federationom, svaki tim može razvijati, graditi i postavljati svoj mikro-frontend neovisno, bez brige o sukobima ili ovisnostima s drugim timovima. Glavna aplikacija ("host") tada može dinamički učitati i prikazati te mikro-frontendove ("remotes") u stvarnom vremenu, stvarajući besprijekorno korisničko iskustvo.

Ključni koncepti Module Federationa

• Host: Glavna aplikacija koja koristi i prikazuje udaljene module.
• Remote: Neovisna aplikacija koja izlaže module za korištenje od strane drugih aplikacija.
• Dijeljeni moduli (Shared Modules): Ovisnosti koje se dijele između hosta i remote aplikacija. Time se izbjegava dupliciranje i osiguravaju dosljedne verzije u cijeloj aplikaciji.
• Module Federation Plugin: Webpack dodatak koji omogućuje funkcionalnost Module Federationa.

Prednosti Module Federationa

1. Neovisna postavljanja (Deployments)

Svaki mikro-frontend može se postaviti neovisno bez utjecaja na druge dijelove aplikacije. To omogućuje brže cikluse izdanja, smanjeni rizik i povećanu agilnost. Tim u Berlinu može postaviti ažuriranja kataloga proizvoda dok tim za košaricu u Tokiju nastavlja neovisno raditi na svojim značajkama. Ovo je značajna prednost za globalno distribuirane timove.

2. Povećana skalabilnost

Aplikacija se može horizontalno skalirati postavljanjem svakog mikro-frontenda na zasebne poslužitelje. To omogućuje bolje iskorištavanje resursa i poboljšane performanse. Na primjer, servis za autentifikaciju, često usko grlo u performansama, može se neovisno skalirati kako bi podnio vršna opterećenja.

3. Poboljšana održivost

Mikro-frontendovi su manji i lakši za upravljanje od monolitnih aplikacija, što ih čini lakšima za održavanje i ispravljanje grešaka. Svaki tim ima vlasništvo nad vlastitom kodnom bazom, što im omogućuje da se usredotoče na svoje specifično područje stručnosti. Zamislite globalni tim specijaliziran za platne gatewaye; oni mogu održavati taj specifični mikro-frontend bez utjecaja na druge timove.

4. Tehnološka neovisnost

Mikro-frontendovi mogu biti izgrađeni korištenjem različitih tehnologija ili okvira, što timovima omogućuje odabir najboljih alata za posao. Jedan mikro-frontend može biti izgrađen s Reactom, dok drugi koristi Vue.js. Ova fleksibilnost je posebno korisna pri integraciji starijih (legacy) aplikacija ili kada različiti timovi imaju različite preferencije ili stručnost.

5. Ponovna iskoristivost koda

Dijeljeni moduli mogu se ponovno koristiti u više mikro-frontendova, smanjujući dupliciranje koda i poboljšavajući dosljednost. To je posebno korisno za uobičajene komponente, pomoćne funkcije ili sustave dizajna. Zamislite globalno dosljedan sustav dizajna koji se dijeli među svim mikro-frontendovima, osiguravajući jedinstveno iskustvo brenda.

Implementacija Module Federationa: Praktičan primjer

Prođimo kroz pojednostavljeni primjer kako implementirati Module Federation koristeći Webpack 5. Stvorit ćemo dvije aplikacije: host aplikaciju i remote aplikaciju. Remote aplikacija će izložiti jednostavnu komponentu koju će host aplikacija koristiti.

Korak 1: Postavljanje Host aplikacije

Stvorite novi direktorij za host aplikaciju i inicijalizirajte novi npm projekt:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Instalirajte Webpack i njegove ovisnosti:

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

              
                Copy
              
            
          

Stvorite datoteku `webpack.config.js` u korijenu host aplikacije sa sljedećom konfiguracijom:

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

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js',
 publicPath: 'http://localhost:3000/', // Important for Module Federation
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true,
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env', '@babel/preset-react']
 }
 }
 },
 {
 test: /\.css$/i,
 use: ["style-loader", "css-loader"],
 },
 ],
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'host',
 remotes: {
 remoteApp: 'remote@http://localhost:3001/remoteEntry.js',
 },
 shared: ['react', 'react-dom'],
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Ova konfiguracija definira ulaznu točku, izlazni direktorij, postavke razvojnog poslužitelja i Module Federation dodatak. Svojstvo `remotes` specificira lokaciju datoteke `remoteEntry.js` remote aplikacije. Svojstvo `shared` definira module koji se dijele između host i remote aplikacija. U ovom primjeru dijelimo 'react' i 'react-dom'.

Stvorite datoteku `index.html` u `public` direktoriju:

            <!DOCTYPE html>
<html>
<head>
 <title>Host Application</title>
</head>
<body>
 <div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Stvorite `src` direktorij i `index.js` datoteku unutar njega. Ova datoteka će učitati remote komponentu i prikazati je u host aplikaciji:

            import React from 'react';
import ReactDOM from 'react-dom/client';

import RemoteComponent from 'remoteApp/RemoteComponent';

const App = () => (
 <div>
 <h1>Host Application</h1>
 <p>This is the host application consuming a remote component.</p>
 <RemoteComponent />
 </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

            

              
                Copy
              
            
          

Instalirajte babel-loader i njegove presete

            npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react style-loader css-loader
            

              
                Copy
              
            
          

Korak 2: Postavljanje Remote aplikacije

Stvorite novi direktorij za remote aplikaciju i inicijalizirajte novi npm projekt:

            mkdir remote-app
cd remote-app
npm init -y
            

              
                Copy
              
            
          

Instalirajte Webpack i njegove ovisnosti:

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

              
                Copy
              
            
          

Stvorite datoteku `webpack.config.js` u korijenu remote aplikacije sa sljedećom konfiguracijom:

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

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js',
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true,
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env', '@babel/preset-react']
 }
 }
 },
 {
 test: /\.css$/i,
 use: ["style-loader", "css-loader"],
 },
 ],
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'remote',
 filename: 'remoteEntry.js',
 exposes: {
 './RemoteComponent': './src/RemoteComponent.js',
 },
 shared: ['react', 'react-dom'],
 }),
 new HtmlWebpackPlugin({
 template: './public/index.html',
 }),
 ],
};

            

              
                Copy
              
            
          

Ova konfiguracija je slična host aplikaciji, ali s nekoliko ključnih razlika. Svojstvo `name` je postavljeno na `remote`, a svojstvo `exposes` definira module koji su izloženi drugim aplikacijama. U ovom slučaju, izlažemo `RemoteComponent`.

Stvorite datoteku `index.html` u `public` direktoriju:

            <!DOCTYPE html>
<html>
<head>
 <title>Remote Application</title>
</head>
<body>
 <div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Stvorite `src` direktorij i `RemoteComponent.js` datoteku unutar njega. Ova datoteka će sadržavati komponentu koja je izložena host aplikaciji:

            import React from 'react';

const RemoteComponent = () => (
 <div style={{ border: '2px solid red', padding: '10px', margin: '10px' }}>
 <h2>Remote Component</h2>
 <p>This component is loaded from the remote application.</p>
 </div>
);

export default RemoteComponent;

            

              
                Copy
              
            
          

Stvorite `src` direktorij i `index.js` datoteku unutar njega. Ova datoteka će prikazati `RemoteComponent` kada se remote aplikacija pokrene neovisno (opcionalno):

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

const App = () => (
 <div>
 <h1>Remote Application</h1>
 <RemoteComponent />
 </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

            

              
                Copy
              
            
          

Korak 3: Pokretanje aplikacija

Dodajte start skripte u obje `package.json` datoteke:

            "scripts": {
 "start": "webpack serve"
}
            

              
                Copy
              
            
          

Pokrenite obje aplikacije koristeći `npm start`. Otvorite preglednik i idite na `http://localhost:3000`. Trebali biste vidjeti host aplikaciju kako prikazuje remote komponentu. Remote komponenta će imati crveni obrub oko sebe, što ukazuje da je učitana iz remote aplikacije.

Napredni koncepti i razmatranja

1. Upravljanje verzijama i kompatibilnost

Prilikom dijeljenja ovisnosti između mikro-frontendova, važno je uzeti u obzir upravljanje verzijama i kompatibilnost. Module Federation pruža mehanizme za specificiranje raspona verzija i rješavanje sukoba. Alati poput semantičkog verziranja (semver) postaju ključni u upravljanju ovisnostima i osiguravanju kompatibilnosti između različitih mikro-frontendova. Neuspjeh u pravilnom upravljanju verzijama može dovesti do grešaka u stvarnom vremenu ili neočekivanog ponašanja, posebno u složenim sustavima s brojnim mikro-frontendovima.

2. Autentifikacija i autorizacija

Implementacija autentifikacije i autorizacije u mikro-frontend arhitekturi zahtijeva pažljivo planiranje. Uobičajeni pristupi uključuju korištenje dijeljenog servisa za autentifikaciju ili implementaciju autentifikacije temeljene na tokenima. Sigurnost je najvažnija i ključno je slijediti najbolje prakse za zaštitu osjetljivih podataka. Na primjer, platforma za e-trgovinu može imati posvećeni mikro-frontend za autentifikaciju odgovoran za provjeru korisničkih podataka prije odobravanja pristupa drugim mikro-frontendovima.

3. Komunikacija između mikro-frontendova

Mikro-frontendovi često trebaju komunicirati jedni s drugima kako bi razmjenjivali podatke ili pokretali akcije. Mogu se koristiti različiti obrasci komunikacije, kao što su događaji (events), dijeljeno upravljanje stanjem (shared state management) ili izravni API pozivi. Odabir pravog komunikacijskog obrasca ovisi o specifičnim zahtjevima aplikacije. Alati poput Reduxa ili Vuexa mogu se koristiti za dijeljeno upravljanje stanjem. Prilagođeni događaji mogu se koristiti za labavo povezivanje i asinkronu komunikaciju. API pozivi mogu se koristiti za složenije interakcije.

4. Optimizacija performansi

Učitavanje udaljenih modula može utjecati na performanse, posebno ako su moduli veliki ili je mrežna veza spora. Optimiziranje veličine modula, korištenje dijeljenja koda (code splitting) i predmemoriranje (caching) udaljenih modula može poboljšati performanse. Lijeno učitavanje (lazy loading) modula samo kada su potrebni još je jedna važna tehnika optimizacije. Također, razmislite o korištenju mreže za isporuku sadržaja (CDN) za posluživanje udaljenih modula s geografski bližih lokacija krajnjim korisnicima, čime se smanjuje latencija.

5. Testiranje mikro-frontendova

Testiranje mikro-frontendova zahtijeva drugačiji pristup od testiranja monolitnih aplikacija. Svaki mikro-frontend treba testirati neovisno, kao i u integraciji s drugim mikro-frontendovima. Testiranje ugovora (Contract testing) može se koristiti kako bi se osiguralo da su mikro-frontendovi međusobno kompatibilni. Jedinični testovi, integracijski testovi i end-to-end testovi su svi važni za osiguranje kvalitete mikro-frontend arhitekture.

6. Obrada grešaka i nadzor

Implementacija robusne obrade grešaka i nadzora ključna je za identificiranje i rješavanje problema u mikro-frontend arhitekturi. Centralizirani sustavi za bilježenje (logging) i nadzor mogu pružiti uvid u zdravlje i performanse aplikacije. Alati poput Sentryja ili New Relica mogu se koristiti za praćenje grešaka i metrika performansi na različitim mikro-frontendovima. Dobro osmišljena strategija obrade grešaka može spriječiti kaskadne kvarove i osigurati otporno korisničko iskustvo.

Slučajevi korištenja za Module Federation

Module Federation je prikladan za razne slučajeve korištenja, uključujući:

• Velike e-commerce platforme: Razbijanje web stranice na manje, neovisno postavljive jedinice za katalog proizvoda, košaricu, autentifikaciju korisnika i naplatu.
• Poslovne aplikacije: Izgradnja složenih nadzornih ploča i portala s različitim timovima odgovornim za različite odjeljke.
• Sustavi za upravljanje sadržajem (CMS): Omogućavanje developerima da neovisno stvaraju i postavljaju prilagođene module ili dodatke.
• Mikroservisne arhitekture: Integriranje front-end aplikacija s mikroservisnim backendima.
• Progresivne web aplikacije (PWA): Dinamičko učitavanje i ažuriranje značajki u PWA.

Na primjer, razmotrite multinacionalnu bankarsku aplikaciju. S Module Federationom, osnovne bankarske značajke, investicijska platforma i portal za korisničku podršku mogu se razvijati i postavljati neovisno. To omogućuje specijaliziranim timovima da se usredotoče na specifična područja, istovremeno osiguravajući jedinstveno i dosljedno korisničko iskustvo na svim uslugama.

Alternative Module Federationu

Iako Module Federation nudi uvjerljivo rješenje za mikro-frontend arhitekture, to nije jedina opcija. Druge popularne tehnike uključuju:

• iFrames: Jednostavan, ali često manje fleksibilan pristup koji ugrađuje jednu aplikaciju unutar druge.
• Web Components: Ponovno iskoristivi prilagođeni HTML elementi koji se mogu koristiti u različitim aplikacijama.
• Single-SPA: Okvir za izgradnju single-page aplikacija s više okvira.
• Integracija u vrijeme izgradnje (Build-time): Kombiniranje svih mikro-frontendova u jednu aplikaciju tijekom procesa izgradnje.

Svaka tehnika ima svoje prednosti i nedostatke, a najbolji izbor ovisi o specifičnim zahtjevima aplikacije. Module Federation se ističe svojom fleksibilnošću u stvarnom vremenu i sposobnošću dinamičkog dijeljenja koda bez potrebe za potpunom ponovnom izgradnjom i postavljanjem svih aplikacija.

Zaključak

JavaScript Module Federation je moćna tehnika za izgradnju skalabilnih, održivih i neovisnih mikro-frontend arhitektura. Nudi brojne prednosti, uključujući neovisna postavljanja, povećanu skalabilnost, poboljšanu održivost, tehnološku neovisnost i ponovnu iskoristivost koda. Razumijevanjem ključnih koncepata, implementacijom praktičnih primjera i razmatranjem naprednih koncepata, developeri mogu iskoristiti Module Federation za izgradnju robusnih i fleksibilnih web aplikacija. Kako web aplikacije nastavljaju rasti u složenosti, Module Federation pruža vrijedan alat za upravljanje tom složenošću i omogućuje timovima da rade učinkovitije i efektivnije.

Prihvatite snagu decentraliziranog web razvoja s JavaScript Module Federationom i otključajte potencijal za izgradnju istinski modularnih i skalabilnih aplikacija. Bez obzira gradite li e-commerce platformu, poslovnu aplikaciju ili CMS, Module Federation vam može pomoći da razbijete aplikaciju na manje, lakše upravljive jedinice i pružite bolje korisničko iskustvo.