Concetti e compromessi dei micro-frontend
Comprenda perché i team adottano i micro-frontend e le differenze tra gli approcci runtime e build-time.
Concetti e compromessi dei micro-frontend è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Che cosa sono i microfrontend?
I microfrontend estendono i microservizi al livello dell'interfaccia utente. Una singola applicazione web viene suddivisa in parti frontend gestite, sviluppate e distribuite in modo indipendente da team separati.
Strategie di integrazione
Esistono tre strategie di integrazione principali: in fase di build (pacchetti npm), lato server (composizione edge) e a runtime (Module Federation, iframe, web component).
Integrazione in fase di build
Pubblicate i componenti condivisi come pacchetti npm. È semplice, ma ogni modifica richiede una nuova pubblicazione e una nuova distribuzione per tutti i consumer: non si tratta di una distribuzione realmente indipendente.
// Team A publishes:
npm publish @company/design-system
// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independentIntegrazione a runtime tramite Module Federation
Webpack 5 Module Federation consente a un'app (host) di caricare a runtime i componenti di un'altra app (remote), permettendo una distribuzione realmente indipendente.
Integrazione tramite iframe
Incorporate i microfrontend in iframe per ottenere il massimo isolamento. Vantaggi: nessun conflitto tra CSS e JavaScript. Svantaggi: esperienza utente scadente (scorrimento, focus, dimensionamento), condivisione dello stato difficoltosa e scarsa compatibilità con la SEO.
Web Components
Racchiudete ogni microfrontend in un custom element. Funziona con qualsiasi framework e offre un isolamento nativo, ma non dispone di funzionalità specifiche di React come la condivisione del contesto.
// Remote team builds:
customElements.define('product-detail', ProductDetailElement);
// Host team embeds:
<product-detail product-id="123" />Compromessi: vantaggi
Distribuzione indipendente (distribuite l'interfaccia del vostro team senza modificare quella degli altri), autonomia dei team (scegliete il vostro stack e le vostre dipendenze) e scalabilità (i team lavorano in parallelo senza conflitti nel codice).
Compromessi: costi
Complessità operativa (più repository, pipeline CI e distribuzioni), duplicazione dei bundle (React viene caricato più volte se non viene condiviso), sovraccarico delle prestazioni e maggiore difficoltà nel debugging tra i confini.
Quando scegliere i microfrontend
I microfrontend sono particolarmente utili in presenza di più team numerosi che lavorano sullo stesso prodotto, di stack tecnologici diversi per sezioni differenti o della necessità di distribuire le sezioni in modo completamente indipendente.
Quando NON scegliere i microfrontend
Evitateli per i team piccoli (il sovraccarico supera i vantaggi), per le applicazioni semplici o quando avete il pieno controllo dell'intero frontend: i monorepo con Nx/Turborepo sono generalmente sufficienti.
Design system condiviso
Indipendentemente dalla strategia di integrazione, un design system condiviso (pubblicato come pacchetto o esposto tramite Module Federation) garantisce la coerenza visiva tra i microfrontend.
Controllo rapido
Quale approccio di integrazione consente una distribuzione realmente indipendente dei microfrontend a runtime?
Riepilogo
I microfrontend scompongono l'interfaccia utente per offrire autonomia ai team e distribuzione indipendente. Le opzioni di integrazione vanno dai pacchetti npm (semplici, ma non indipendenti) a Module Federation (a runtime e realmente indipendente). Valutate i costi operativi: i microfrontend sono adatti ai prodotti grandi sviluppati da più team, ma aggiungono complessità ai progetti più piccoli.
Domande Frequenti
La lezione «Concetti e compromessi dei micro-frontend» è gratuita?
Sì — il testo completo di «Concetti e compromessi dei micro-frontend» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Concetti e compromessi dei micro-frontend»?
Comprenda perché i team adottano i micro-frontend e le differenze tra gli approcci runtime e build-time. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Concetti e compromessi dei micro-frontend»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Concetti e compromessi dei micro-frontend
- Module Federation con Webpack 5
- Stato condiviso e routing tra MFE
- Deployment indipendente e pipeline CI per MFE