Framework e strumenti

Non mancano i framework di frontend, come Angular e Next.js, ma la maggior parte di essi non sono creati pensando ai microfrontend. Pertanto, a volte mancano meccanismi per affrontare le sfide dell'architettura micro-frontend.

Considerazioni generali sul quadro

Questa guida non ha lo scopo di consigliare o confrontare singoli framework. Poiché più micro-frontend vengono spesso eseguiti sulla stessa pagina dell'applicazione Web, le prestazioni di caricamento e di runtime sono le principali preoccupazioni. È importante scegliere un framework che introduca il minor sovraccarico possibile.

I framework sono suddivisi in base al livello di rendering:

• Rendering lato client (CSR)

• Rendering lato server (SSR)

Le architetture frontend includono altre funzionalità, come la generazione statica di siti (SSG). Tuttavia, SSG viene eseguito una sola volta. I micro-frontend sono composti principalmente in fase di esecuzione, quindi CSR e SSR sono le opzioni principali.

Rendering lato client

Per quanto riguarda la CSR, ci sono due opzioni popolari:

• Framework SPA singolo

• Federazione dei moduli

Single SPA è una scelta leggera per la composizione di micro-frontend. Risolve le sfide più comuni nelle architetture di microfrontend, come la composizione di più microfrontend nella stessa pagina ed evitare conflitti di dipendenza.

Module Federation è nato come plug-in, offerto da webpack 5, e risolve la maggior parte delle sfide nelle architetture di microfrontend, inclusa la gestione delle dipendenze tra diversi artefatti. Module Federation 2.0 funziona nativamente con Rspack, webpack, esbuild e ora con. JavaScript

Prendi in considerazione l'idea di non utilizzare affatto un framework. I browser moderni, con una quota di mercato complessiva del 98 percento secondo caniuse.com, offrono funzionalità come elementi personalizzati in modo nativo e sono adeguati per un'applicazione di micro-frontend. Se necessario, combinate elementi personalizzati con librerie leggere per la propagazione di eventi, l'internazionalizzazione o altri problemi specifici.

Rendering lato server

Sul lato SSR, le due opzioni principali sono più complicate:

• Abbraccia un framework esistente come Next.js e applica un principio di micro-frontend che utilizza Module Federation.

• Usa HTML- over-the-wire per scambiare frammenti HTML che rappresentano micro-frontend e componi questi frammenti all'interno di un modello in fase di esecuzione. Un esempio di questo approccio è Podium.