Principi dell'architettura micro-frontend
Perché usare i micro-frontend, autonomia dei team, deployment indipendente, compromessi della diversità tecnologica.
Principi dell'architettura micro-frontend è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Che cosa sono i micro-frontend
I micro-frontend applicano le idee dei microservizi all'interfaccia utente: un'app di grandi dimensioni viene suddivisa in parti sviluppate e distribuite in modo indipendente, ciascuna gestita da un team diverso, e poi composta in un'unica esperienza per l'utente.
Il problema del monolite
Un unico frontend di grandi dimensioni obbliga ogni team a lavorare sullo stesso codebase, a coordinare i rilasci e a condividere un'unica compilazione. Con la crescita dell'organizzazione, questo diventa un collo di bottiglia: compilazioni lente, conflitti durante il merge e cicli di rilascio.
Principio: autonomia del team
L'idea fondamentale è la responsabilità end-to-end. Ogni team è responsabile della propria porzione di UI, dal codice al deployment — con repository, pipeline e runtime propri — e può procedere senza aspettare gli altri.
Vertical slice, non livelli
I team sono suddivisi per funzionalità di business (Checkout, Search, Profile), non per livello tecnico. Ogni slice contiene la propria UI, la logica e l'accesso ai dati relativi a quella funzionalità.
Principio: deployment indipendente
Ogni micro-frontend viene rilasciato secondo il proprio ciclo. Il team Search può effettuare dieci deployment al giorno senza intervenire su Checkout. I rilasci sono disaccoppiati, con una conseguente riduzione dei rischi e del coordinamento necessario.
Principio: diversità tecnologica (facoltativa)
I team possono scegliere framework diversi per ogni slice. Nella pratica, la maggior parte delle organizzazioni adotta uno standard comune (ad esempio, usa solo Vue) per condividere gli strumenti, ma l'architettura consente la diversità quando è giustificata.
Approccio di integrazione: build-time
Un modo per combinare le slice consiste nell'integrazione build-time: ogni micro-frontend viene pubblicato come package e l'applicazione container lo installa come dipendenza, compilando tutto insieme.
// container package.json
{
"dependencies": {
"@org/checkout": "^2.1.0",
"@org/search": "^1.4.0"
}
}Il compromesso del build-time
L'integrazione build-time è semplice, ma accoppia i rilasci: per distribuire una nuova versione di Checkout, il container deve essere ricompilato e distribuito nuovamente. Si perde così il vero deployment indipendente.
Approccio di integrazione: run-time
L'integrazione run-time carica i micro-frontend nel browser a runtime: il container recupera il codice di un remote quando è necessario. Ogni remote viene distribuito indipendentemente; il container utilizza l'ultima versione senza essere ricompilato.
Module Federation
La principale tecnica run-time è Module Federation: una funzionalità di build che consente a un'app di esporre moduli e a un'altra di consumarli in rete a runtime, condividendo le dipendenze comuni. La utilizzerà nelle prossime lezioni.
Scelta dell'approccio
Utilizzi il build-time per i team piccoli che desiderano semplicità e un unico deployment. Utilizzi il run-time (Module Federation) quando il deployment indipendente e l'autonomia dei team sono prioritari e si accetta una maggiore complessità operativa.
Verifica rapida
Verifichi la Sua comprensione dei principi dei micro-frontend.
Riepilogo
Ha imparato i principi dei micro-frontend:
- Una UI di grandi dimensioni viene suddivisa in slice di cui i team sono responsabili e che vengono distribuite indipendentemente, per poi essere composte per l'utente.
- Autonomia del team: responsabilità end-to-end di una slice verticale di business.
- Deployment indipendente: ogni slice viene rilasciata secondo il proprio ciclo.
- La diversità tecnologica è facoltativa; la maggior parte dei team adotta uno standard comune.
- L'integrazione può essere build-time (semplice, con rilasci accoppiati) oppure run-time (Module Federation, vera indipendenza).
Domande Frequenti
La lezione «Principi dell'architettura micro-frontend» è gratuita?
Sì — il testo completo di «Principi dell'architettura 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Principi dell'architettura micro-frontend»?
Perché usare i micro-frontend, autonomia dei team, deployment indipendente, compromessi della diversità tecnologica. Eserciti Vue 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 Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue 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 «Principi dell'architettura 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 Vue Academy?
Sì. Ogni lezione Vue 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
- Principi dell'architettura micro-frontend
- Module Federation di Webpack con Vue
- Plugin Vite Federation
- Stato condiviso tra micro-frontend