Che cosa sono i micro frontend?

La maggior parte degli sviluppatori ha già sentito parlare di architettura a microservizi, ma il concetto di micro frontend non è così diffuso. Come suggerisce il nome stesso, questo concetto racchiude quello di microservizi. L'obiettivo dei micro frontend è risolvere tanti dei problemi che presentano un po' tutte le applicazioni monolitiche. Queste sono spesso molto grandi e difficili da gestire e modificare. L'inserimento di nuove persone nel team può essere un problema. In aggiunta, quando più team lavorano a parti diverse dell'applicazione, le modifiche devono essere coordinate tra tutti i team.

I microservizi permettono di suddividere il backend in tanti servizi indipendenti. Lo stesso approccio può essere applicato per suddividere le applicazioni a pagina singola (Single Page Application, SPA) in applicazioni più piccole. Solo che qualcuno deve occuparsi dell'orchestrazione delle diverse parti in modo che l'utente abbia sempre l'esperienza di un'unica applicazione SPA.

Quali sono le alternative a un'architettura micro frontend?

Naturalmente esistono altri modi per gestire alcuni aspetti indesiderati delle grandi applicazioni, come separare parte del codice nel pacchetto npm. Questo approccio può risolvere un aspetto del problema, come le dimensioni del repository. Ad esempio, in Angular, è possibile separare il codice in un modulo con caricamento lazy, applicando una suddivisione verticale dell'applicazione fino a un certo punto. Tuttavia questo approccio ha i suoi svantaggi, ad esempio bisogna creare un progetto di livello superiore quando una delle dipendenze viene aggiornata. Inoltre, l'esperienza di sviluppo non è delle migliori. Quando si utilizza qualsiasi tipo di framework, l'ideale sarebbe aggiornare tutto alla stessa versione, ma è un'impresa che nessuno è felice di svolgere. C'è la possibilità anche di unire più applicazioni tramite iframe. Le applicazioni diventano sì indipendenti, ma oserei dire troppo indipendenti, tant'è che la comunicazione tra app diventa un problema, così come la condivisione di codice, stile, ecc. 

I micro frontend sono la soluzione?

I micro frontend combinano gli approcci appena descritti. In pratica ogni micro frontend è un'applicazione distinta rispetto alla SPA. Non vengono compilati in index.html con script e file di stile collegati ma in modulo JavaScript. Invece di un iframe nell'applicazione principale, il codice definisce che quando l'URL corrisponde a un pattern, il modulo viene sottoposto a caricamento lazy e collocato in una posizione specifica. In questo modo possiamo avere più applicazioni nella stessa pagina che si possono collegare tra di loro.

Di conseguenza, nei micro frontend non è necessario gestire il layout e le regole CSS di base, perché vengono gestiti nell'applicazione principale. Un altro vantaggio sta nel fatto che, quando più micro frontend utilizzano la stessa versione di React, è possibile condividere lo stesso modulo React. Non c'è bisogno di scaricarlo separatamente per ciascun micro frontend. E se ci sono diverse versioni di un modulo JavaScript, non è un problema.

La preoccupazione principale con i micro frontend è l'overflow dello stile sulle altre parti dell'applicazione. Fortunatamente, i framework di interfaccia utente più diffusi presentano degli strumenti per gestire facilmente questo aspetto.

Strumenti per le architetture micro frontend

Scrivere il codice per poi caricarlo nelle applicazioni micro frontend sembra un compito arduo. Per fortuna ci sono tanti framework in grado di gestire l'orchestrazione e dotati di strumenti per convertire le applicazioni scritte con i framework più diffusi nel formato micro frontend.

Noi di Pure abbiamo scelto single-spa. Tra i vantaggi principali, è intuitivo, supporta vari framework JavaScript e ha una documentazione dettagliata. Inoltre, single-spa offre vari tipi di micro frontend, ognuno per un processo specifico.

Al momento, stiamo usando solo il tipo "Application" perché è il più facile da usare per i passaggi dalla SPA ai micro frontend. Gli altri tipi richiedono un'architettura micro frontend più dettagliata. In più, "Application" è il tipo consigliato dagli autori di single-spa.

Creazione di micro frontend con il framework single-spa

Al momento stiamo usando single-spa per una delle nostre applicazioni più grandi che per ora contiene 5 micro frontend circa. A volte, a lavorare su questi micro frontend sono team diversi dai team di sviluppo dell'applicazione principale. Negli ultimi sei mesi, da quando abbiamo adottato i micro frontend, non abbiamo mai avuto problemi. Siamo molto soddisfatti perché l'applicazione principale non è pesante come prima e si può aggiornare più facilmente. In più, quando aggiungiamo una nuova funzionalità, non ci preoccupiamo degli effetti collaterali, perché l'operazione avviene con un micro frontend. Prossimamente vorremmo suddividere i frontend di altre applicazioni grandi che stiamo sviluppando in Pure perché i vantaggi sono molto promettenti. Se hai riscontrato i nostri stessi problemi con il frontend della tua applicazione, ti consigliamo di provare i micro frontend.