Micro-frontend: Oltre i Microservizi, la Rivoluzione Modulare delle Interfacce

Nello sviluppo moderno, il backend è diventato agile grazie ai microservizi, ma per anni il frontend è rimasto intrappolato nel paradigma del “Monolito”. Spesso ci si trova a gestire Single Page Application (SPA) massicce dove ogni modifica di un team rischia di rompere il codice di un altro. I micro-frontend nascono per risolvere questo collo di bottiglia, estendendo i principi del disaccoppiamento e dell’indipendenza direttamente all’interfaccia utente.

Lo “Spiegone” Tecnico: Come funzionano davvero?

A differenza di un’applicazione tradizionale dove tutto il codice viene impacchettato in un unico bundle in fase di build, i micro-frontend si basano sull’integrazione a runtime (Runtime Integration)

I 4 Pilastri del Funzionamento:

• Host (o Shell): È l’applicazione principale che l’utente carica per prima. Non contiene logica di business, ma orchestra il caricamento dei moduli remoti, gestisce l’autenticazione e la navigazione.
• Remote (o Micro-app): Sono le singole funzionalità (es. il carrello, il profilo) sviluppate come app indipendenti. Ogni Remote espone un file chiamato remoteEntry.js, che funge da "mappa" per spiegare all'Host quali componenti sono disponibili.
• Deduplicazione delle Dipendenze: Se tre micro-frontend usano React, l’Host si assicura che il browser ne scarichi solo una copia (singleton), evitando di appesantire il caricamento.
• Isolamento: Ogni modulo vive in un ambiente protetto. Se il micro-frontend dei “Prodotti Correlati” crasha, il resto della pagina continua a funzionare correttamente.

Regole d’Oro e Best Practice

L’architettura micro-frontend introduce complessità operativa; per gestirla con successo, segui queste linee guida fondamentali:

1. Definisci Confini Chiari (Domain-Driven Design)

Non dividere i moduli in base alla tecnologia, ma in base al dominio di business (es. Team Checkout, Team Catalogo). Ogni team deve possedere la funzionalità “end-to-end”, dal database alla UI.

2. Condividi solo il Necessario

Evita di condividere troppe librerie. Condividi come singleton solo le dipendenze critiche (Angular Core, React, RxJS) per evitare conflitti di versione e “bundle bloat”.

3. Usa l’URL come Unica Fonte di Verità

Per la navigazione e lo stato globale (filtri, ID prodotti), usa i parametri dell’URL. Questo garantisce che i moduli siano disaccoppiati: se un modulo cambia l’ID nell’URL, gli altri reagiscono senza bisogno di chiamate dirette.

4. Implementa un Design System Centralizzato

Senza una libreria di componenti condivisa (bottoni, font, colori), l’interfaccia diventerà presto incoerente. Usa un Design System versionato tramite npm o esposto come modulo federato.

5. Strategia di Fallback e Resilienza

Implementa meccanismi di errore (Error Boundaries in React o Error Handlers in Angular). Se un modulo remoto non carica, mostra un placeholder o un messaggio di errore localizzato invece di rompere l’intera applicazione.

6. Pipeline di CI/CD Indipendenti

Ogni micro-frontend deve avere la propria pipeline di rilascio. Devi poter deployare il “Carrello” dieci volte al giorno senza dover ricostruire o testare il “Catalogo”.

Implementazione Pratica: Angular e Module Federation:

In Angular, lo standard è il plugin @angular-architects/module-federation.

Configurazione del Remote (Ordini)

Nel file webpack.config.js dell'app remota:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
  name: 'mfe_ordini',
  exposes: {
    './Module': './src/app/ordini/ordini.module.ts',
  },
  shared: {
   ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});

Caricamento nell’Host (Shell)

Nel router dell’applicazione principale:

// app-routing.module.ts
import { loadRemoteModule } from '@angular-architects/module-federation';

const routes: Routes =;

Implementazione Pratica: React e Vite

Con Vite, si utilizza spesso il plugin vite-plugin-module-federation per una velocità di build superiore.

Configurazione del Remote (Dashboard)

// vite.config.ts
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins:
    })
  ]
});

Interoperabilità: Ospitare React in Angular

Per far convivere framework diversi, la soluzione migliore è trasformare il micro-frontend React in un Web Component.

Passo 1: Wrapper React

// mfe-react/src/main.jsx
import r2wc from '@r2wc/react-to-web-component';
import MyComponent from './MyComponent';

const WebComponent = r2wc(MyComponent, { props: { user: "string" } });
customElements.define('react-widget', WebComponent);

Passo 2: Integrazione Angular

In Angular, carichi il bundle e usi il tag personalizzato:

@Component({
  selector: 'app-react-host',
  template: `<react-widget [attr.user]="currentUser"></react-widget>`,
})
export class ReactWrapperComponent {
  currentUser = "Mario";
}

Comunicazione Disaccoppiata: Custom Events

Evita di usare Store globali condivisi tra framework diversi (anti-pattern). Usa gli eventi nativi del browser.

// Invio da un modulo (es. React)
const event = new CustomEvent('mfe:action', { detail: { id: 42 } });
window.dispatchEvent(event);

// Ascolto in un altro modulo (es. Angular)
window.addEventListener('mfe:action', (e) => {
  console.log('Ricevuto ID:', e.detail.id);
});

Conclusioni

I micro-frontend non sono per tutti. Se il tuo team è piccolo, il costo della configurazione supererà i benefici. Ma per le grandi organizzazioni con oltre 50 sviluppatori, sono l’unica via per scalare senza creare un “mostro” di codice ingestibile. Seguendo le regole della federazione e mantenendo i domini ben separati, potrai finalmente liberare il potenziale del tuo frontend.

Grazie di aver letto un’altro dei miei articoli e come sempre…

BUONA PROGRAMMAZIONE ! ❤