Frontend Micro-Frontend: Padroneggiare l'architettura di Module Federation

Nel panorama dello sviluppo web in rapida evoluzione di oggi, costruire e mantenere applicazioni frontend su larga scala può diventare sempre più complesso. Le tradizionali architetture monolitiche spesso portano a sfide come il bloat del codice, tempi di compilazione lenti e difficoltà nelle implementazioni indipendenti. I micro-frontend offrono una soluzione suddividendo il frontend in parti più piccole e gestibili. Questo articolo approfondisce Module Federation, una potente tecnica per implementare micro-frontend, esplorandone i vantaggi, l'architettura e le strategie di implementazione pratica.

Cosa sono i Micro-Frontend?

I micro-frontend sono uno stile architetturale in cui un'applicazione frontend viene scomposta in unità più piccole, indipendenti e distribuibili. Ogni micro-frontend è in genere di proprietà di un team separato, consentendo una maggiore autonomia e cicli di sviluppo più rapidi. Questo approccio rispecchia l'architettura a microservizi comunemente utilizzata sul backend.

Le caratteristiche principali dei micro-frontend includono:

• Distribuibilità indipendente: ogni micro-frontend può essere distribuito in modo indipendente senza influire su altre parti dell'applicazione.
• Autonomia del team: team diversi possono possedere e sviluppare micro-frontend diversi utilizzando le loro tecnologie e flussi di lavoro preferiti.
• Diversità tecnologica: i micro-frontend possono essere creati utilizzando framework e librerie diversi, consentendo ai team di scegliere gli strumenti migliori per il lavoro.
• Isolamento: i micro-frontend devono essere isolati l'uno dall'altro per prevenire guasti a cascata e garantire la stabilità.

Perché utilizzare i Micro-Frontend?

L'adozione di un'architettura micro-frontend offre numerosi vantaggi significativi, soprattutto per applicazioni di grandi dimensioni e complesse:

• Scalabilità migliorata: la suddivisione del frontend in unità più piccole semplifica il ridimensionamento dell'applicazione in base alle esigenze.
• Cicli di sviluppo più rapidi: team indipendenti possono lavorare in parallelo, portando a cicli di sviluppo e rilascio più rapidi.
• Maggiore autonomia del team: i team hanno maggiore controllo sul proprio codice e possono prendere decisioni in modo indipendente.
• Manutenzione più semplice: le codebase più piccole sono più facili da mantenere e correggere.
• Tecnologia agnostica: i team possono scegliere le migliori tecnologie per le loro esigenze specifiche, consentendo l'innovazione e la sperimentazione.
• Rischio ridotto: le distribuzioni sono più piccole e più frequenti, riducendo il rischio di guasti su larga scala.

Introduzione a Module Federation

Module Federation è una funzionalità introdotta in Webpack 5 che consente alle applicazioni JavaScript di caricare dinamicamente codice da altre applicazioni in fase di runtime. Ciò consente la creazione di micro-frontend veramente indipendenti e componibili. Invece di creare tutto in un unico bundle, Module Federation consente a diverse applicazioni di condividere e consumare i moduli reciproci come se fossero dipendenze locali.

A differenza degli approcci tradizionali ai micro-frontend che si basano su iframe o componenti web, Module Federation offre un'esperienza più fluida e integrata per l'utente. Evita il sovraccarico di prestazioni e la complessità associati a queste altre tecniche.

Come funziona Module Federation

Module Federation opera sul concetto di moduli "esposti" e "consumati". Un'applicazione (l'"host" o il "container") può esporre moduli, mentre altre applicazioni (i "remoti") possono consumare questi moduli esposti. Ecco una descrizione dettagliata del processo:

1. Esposizione del modulo: un micro-frontend, configurato come applicazione "remota" in Webpack, espone determinati moduli (componenti, funzioni, utilità) tramite un file di configurazione. Questa configurazione specifica i moduli da condividere e i relativi punti di ingresso.
2. Consumo del modulo: un altro micro-frontend, configurato come applicazione "host" o "container", dichiara l'applicazione remota come dipendenza. Specifica l'URL in cui è possibile trovare il manifest di federazione del modulo remoto (un piccolo file JSON che descrive i moduli esposti).
3. Risoluzione runtime: quando l'applicazione host deve utilizzare un modulo dall'applicazione remota, recupera dinamicamente il manifest di federazione del modulo remoto. Webpack risolve quindi la dipendenza del modulo e carica il codice richiesto dall'applicazione remota in fase di runtime.
4. Condivisione del codice: Module Federation consente anche la condivisione del codice tra le applicazioni host e remote. Se entrambe le applicazioni utilizzano la stessa versione di una dipendenza condivisa (ad es. React, lodash), il codice verrà condiviso, evitando la duplicazione e riducendo le dimensioni del bundle.

Impostazione di Module Federation: un esempio pratico

Illustriamo Module Federation con un semplice esempio che coinvolge due micro-frontend: un "Catalogo prodotti" e un "Carrello acquisti". Il catalogo prodotti esporrà un componente di elenco prodotti, che il carrello acquisti consumerà per visualizzare i prodotti correlati.

Struttura del progetto

  
  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
  

Catalogo prodotti (remoto)

webpack.config.js

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

  module.exports = {
    // ... altre configurazioni webpack
    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' },
        },
      }),
    ],
  };
  

Spiegazione:

• name: il nome univoco dell'applicazione remota.
• filename: il nome del file punto di ingresso che verrà esposto. Questo file contiene il manifest di federazione del modulo.
• exposes: definisce quali moduli verranno esposti da questa applicazione. In questo caso, stiamo esponendo il componente `ProductList` da `src/components/ProductList.jsx` con il nome `./ProductList`.
• shared: specifica le dipendenze che devono essere condivise tra le applicazioni host e remote. Questo è fondamentale per evitare codice duplicato e garantire la compatibilità. `singleton: true` garantisce che venga caricata una sola istanza della dipendenza condivisa. `eager: true` carica inizialmente la dipendenza condivisa, il che può migliorare le prestazioni. `requiredVersion` definisce l'intervallo di versioni accettabile per la dipendenza condivisa.

src/components/ProductList.jsx

  
  import React from 'react';

  const ProductList = ({ products }) => (
    

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

  export default ProductList;
  

Carrello acquisti (Host)

webpack.config.js

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

  module.exports = {
    // ... altre configurazioni webpack
    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' },
        },
      }),
    ],
  };
  

Spiegazione:

• name: il nome univoco dell'applicazione host.
• remotes: definisce le applicazioni remote da cui questa applicazione consumerà i moduli. In questo caso, stiamo dichiarando un remoto denominato `product_catalog` e specificando l'URL in cui è possibile trovare il relativo file `remoteEntry.js`. Il formato è `remoteName: 'remoteName@remoteEntryUrl'`.
• shared: simile all'applicazione remota, anche l'applicazione host definisce le proprie dipendenze condivise. Ciò garantisce che le applicazioni host e remote utilizzino versioni compatibili delle librerie condivise.

src/components/RelatedProducts.jsx

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

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

    useEffect(() => {
      // Recupera i dati dei prodotti correlati (ad esempio, da un'API)
      const fetchProducts = async () => {
        // Sostituisci con l'endpoint API effettivo
        const response = await fetch('https://fakestoreapi.com/products?limit=3');
        const data = await response.json();
        setProducts(data);
      };

      fetchProducts();
    }, []);

    return (
      

        
Prodotti correlati
        {products.length > 0 ?  : 
Caricamento...
}
      
    );
  };

  export default RelatedProducts;
  

Spiegazione:

• import ProductList from 'product_catalog/ProductList'; Questa riga importa il componente `ProductList` dal remoto `product_catalog`. La sintassi `remoteName/moduleName` indica a Webpack di recuperare il modulo dall'applicazione remota specificata.
• Il componente utilizza quindi il componente `ProductList` importato per visualizzare i prodotti correlati.

Esecuzione dell'esempio

1. Avvia sia l'applicazione Catalogo prodotti che l'applicazione Carrello acquisti utilizzando i rispettivi server di sviluppo (ad es. `npm start`). Assicurati che siano in esecuzione su porte diverse (ad es. Catalogo prodotti sulla porta 3001 e Carrello acquisti sulla porta 3000).
2. Passare all'applicazione Carrello acquisti nel browser.
3. Dovresti vedere la sezione Prodotti correlati, che viene renderizzata dal componente `ProductList` dall'applicazione Catalogo prodotti.

Concetti avanzati di Module Federation

Oltre alla configurazione di base, Module Federation offre diverse funzionalità avanzate che possono migliorare l'architettura dei micro-frontend:

Condivisione del codice e controllo delle versioni

Come dimostrato nell'esempio, Module Federation consente la condivisione del codice tra le applicazioni host e remote. Ciò si ottiene tramite l'opzione di configurazione `shared` in Webpack. Specificando le dipendenze condivise, puoi evitare codice duplicato e ridurre le dimensioni del bundle. Un corretto controllo delle versioni delle dipendenze condivise è fondamentale per garantire la compatibilità e prevenire conflitti. Il controllo delle versioni semantico (SemVer) è uno standard ampiamente utilizzato per il controllo delle versioni del software, che consente di definire intervalli di versioni compatibili (ad es. `^17.0.0` consente qualsiasi versione maggiore o uguale a 17.0.0 ma inferiore a 18.0.0).

Remoti dinamici

Nell'esempio precedente, l'URL remoto era hardcoded nel file `webpack.config.js`. Tuttavia, in molti scenari reali, potrebbe essere necessario determinare dinamicamente l'URL remoto in fase di runtime. Ciò può essere ottenuto utilizzando una configurazione remota basata su promise:

  
  // webpack.config.js
  remotes: {
    product_catalog: new Promise(resolve => {
      // Recupera l'URL remoto da un file di configurazione o da un'API
      fetch('/config.json')
        .then(response => response.json())
        .then(config => {
          const remoteUrl = config.productCatalogUrl;
          resolve(`product_catalog@${remoteUrl}/remoteEntry.js`);
        });
    }),
  },
  

Ciò consente di configurare l'URL remoto in base all'ambiente (ad es. sviluppo, staging, produzione) o ad altri fattori.

Caricamento asincrono dei moduli

Module Federation supporta il caricamento asincrono dei moduli, consentendo di caricare i moduli su richiesta. Ciò può migliorare il tempo di caricamento iniziale dell'applicazione differendo il caricamento dei moduli non critici.

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

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

  const RelatedProducts = () => {
    return (
      

        
Prodotti correlati
        Caricamento...
}>
          
        
      
    );
  };
  

Utilizzando `React.lazy` e `Suspense`, puoi caricare in modo asincrono il componente `ProductList` dall'applicazione remota. Il componente `Suspense` fornisce un'interfaccia utente di fallback (ad es. un indicatore di caricamento) mentre il modulo viene caricato.

Stili e risorse federati

Module Federation può essere utilizzato anche per condividere stili e risorse tra micro-frontend. Ciò può aiutare a mantenere un aspetto coerente in tutta l'applicazione.

Per condividere gli stili, puoi esporre moduli CSS o componenti stilizzati da un'applicazione remota. Per condividere le risorse (ad es. immagini, font), puoi configurare Webpack per copiare le risorse in una posizione condivisa e quindi farvi riferimento dall'applicazione host.

Best practice per Module Federation

Quando si implementa Module Federation, è importante seguire le best practice per garantire un'architettura di successo e gestibile:

• Definisci confini chiari: definisci chiaramente i confini tra i micro-frontend per evitare un accoppiamento stretto e garantire la distribuibilità indipendente.
• Stabilisci protocolli di comunicazione: definisci protocolli di comunicazione chiari tra i micro-frontend. Valuta la possibilità di utilizzare bus di eventi, librerie di gestione dello stato condiviso o API personalizzate.
• Gestisci attentamente le dipendenze condivise: gestisci attentamente le dipendenze condivise per evitare conflitti di versione e garantire la compatibilità. Utilizza il controllo delle versioni semantico e valuta la possibilità di utilizzare uno strumento di gestione delle dipendenze come npm o yarn.
• Implementa una gestione degli errori solida: implementa una gestione degli errori solida per prevenire guasti a cascata e garantire la stabilità dell'applicazione.
• Monitora le prestazioni: monitora le prestazioni dei tuoi micro-frontend per identificare i colli di bottiglia e ottimizzare le prestazioni.
• Automatizza le distribuzioni: automatizza il processo di distribuzione per garantire distribuzioni coerenti e affidabili.
• Utilizza uno stile di codifica coerente: applica uno stile di codifica coerente in tutti i micro-frontend per migliorare la leggibilità e la manutenibilità. Strumenti come ESLint e Prettier possono aiutarti in questo.
• Documenta la tua architettura: documenta l'architettura dei tuoi micro-frontend per garantire che tutti i membri del team comprendano il sistema e come funziona.

Module Federation vs. altri approcci Micro-Frontend

Sebbene Module Federation sia una potente tecnica per l'implementazione di micro-frontend, non è l'unico approccio. Altri metodi popolari includono:

• Iframe: gli iframe forniscono un forte isolamento tra i micro-frontend, ma possono essere difficili da integrare senza problemi e possono avere un sovraccarico di prestazioni.
• Componenti Web: i componenti Web consentono di creare elementi dell'interfaccia utente riutilizzabili che possono essere utilizzati in diversi micro-frontend. Tuttavia, possono essere più complessi da implementare rispetto a Module Federation.
• Integrazione in fase di compilazione: questo approccio prevede la creazione di tutti i micro-frontend in un'unica applicazione in fase di compilazione. Sebbene possa semplificare la distribuzione, riduce l'autonomia del team e aumenta il rischio di conflitti.
• Single-SPA: Single-SPA è un framework che consente di combinare più applicazioni a pagina singola in un'unica applicazione. Fornisce un approccio più flessibile rispetto all'integrazione in fase di compilazione, ma può essere più complesso da configurare.

La scelta dell'approccio da utilizzare dipende dai requisiti specifici dell'applicazione e dalle dimensioni e dalla struttura del team. Module Federation offre un buon equilibrio tra flessibilità, prestazioni e facilità d'uso, rendendolo una scelta popolare per molti progetti.

Esempi reali di Module Federation

Sebbene le implementazioni specifiche delle aziende siano spesso riservate, i principi generali di Module Federation vengono applicati in vari settori e scenari. Ecco alcuni potenziali esempi:

• Piattaforme di e-commerce: una piattaforma di e-commerce potrebbe utilizzare Module Federation per separare diverse sezioni del sito web, come il catalogo prodotti, il carrello acquisti, il processo di checkout e la gestione dell'account utente, in micro-frontend separati. Ciò consente a diversi team di lavorare su queste sezioni in modo indipendente e distribuire aggiornamenti senza influire sul resto della piattaforma. Ad esempio, un team in *Germania* potrebbe concentrarsi sul catalogo prodotti mentre un team in *India* gestisce il carrello acquisti.
• Applicazioni di servizi finanziari: un'applicazione di servizi finanziari potrebbe utilizzare Module Federation per isolare funzionalità sensibili, come le piattaforme di trading e la gestione dell'account, in micro-frontend separati. Ciò aumenta la sicurezza e consente il controllo indipendente di questi componenti critici. Immagina un team a *Londra* specializzato nelle funzionalità della piattaforma di trading e un altro team a *New York* che gestisce la gestione dell'account.
• Sistemi di gestione dei contenuti (CMS): un CMS potrebbe utilizzare Module Federation per consentire agli sviluppatori di creare e distribuire moduli personalizzati come micro-frontend. Ciò consente una maggiore flessibilità e personalizzazione per gli utenti del CMS. Un team in *Giappone* potrebbe creare un modulo di galleria di immagini specializzato, mentre un team in *Brasile* crea un editor di testo avanzato.
• Applicazioni sanitarie: un'applicazione sanitaria potrebbe utilizzare Module Federation per integrare diversi sistemi, come le cartelle cliniche elettroniche (EHR), i portali dei pazienti e i sistemi di fatturazione, come micro-frontend separati. Ciò migliora l'interoperabilità e consente una più facile integrazione di nuovi sistemi. Ad esempio, un team in *Canada* potrebbe integrare un nuovo modulo di telemedicina, mentre un team in *Australia* si concentra sul miglioramento dell'esperienza del portale dei pazienti.

Conclusione

Module Federation fornisce un approccio potente e flessibile per l'implementazione di micro-frontend. Consentendo alle applicazioni di caricare dinamicamente codice l'una dall'altra in fase di runtime, consente la creazione di architetture frontend veramente indipendenti e componibili. Sebbene richieda un'attenta pianificazione e implementazione, i vantaggi di una maggiore scalabilità, cicli di sviluppo più rapidi e una maggiore autonomia del team lo rendono una scelta interessante per applicazioni web di grandi dimensioni e complesse. Man mano che il panorama dello sviluppo web continua a evolversi, Module Federation è destinato a svolgere un ruolo sempre più importante nel plasmare il futuro dell'architettura frontend.

Comprendendo i concetti e le best practice delineati in questo articolo, puoi sfruttare Module Federation per creare applicazioni frontend scalabili, gestibili e innovative che soddisfano le esigenze del mondo digitale frenetico di oggi.