Micro frontend: cosa sono e quali benefici portano?

I micro frontend nascono dall’esigenza di semplificare lo sviluppo frontend, in cui la gestione di un applicativo monolitico rischierebbe di diventare complessa.
Un’applicazione monolitica di grandi dimensioni è infatti difficile da gestire sotto diversi aspetti: la codebase cresce e diventa difficile da mantenere ed evolvere; la fase di build diventa lunga e complessa; l’applicazione deve essere rilasciata e scalata nella sua interezza; e così via.
Per questo motivo, molto spesso la soluzione è scomporre l’applicazione in una serie di componenti più piccoli, che possono essere sviluppati, rilasciati e scalati indipendentemente, semplificando la gestione da parte del team. Questo lavoro può essere svolto nella parte di backend ricorrendo ai microservizi e nella parte di frontend grazie ai micro frontend.

Perché disaccoppiare il frontend?

I micro frontend sono dunque un pattern architetturale che applica la logica di disaccoppiamento propria dei microservizi alla parte di frontend.

Tra i tanti benefici troviamo:

• Maggiore scalabilità, perché le singole parti possono scalare in maniera indipendente;
• Rapidità e agilità di sviluppo: i team lavorano e rilasciano in modo indipendente le proprie porzioni di codice;
• Indipendenza nello sviluppo, che si traduce nella possibilità non soltanto di sviluppare parti diverse in contemporanea, ma anche di aggiungere, rimuovere o riscrivere parti del frontend senza che questo ne intacchi la stabilità o il funzionamento;
• Riduzione del time-to-market di nuovi servizi digitali;
• Codebase più piccola e quindi gestibile;
• Possibilità di utilizzare framework diversi all’interno dello stesso applicativo.

Micro-lc: l’orchestratore di micro frontend open-source

Dall’esperienza di sviluppo con i micro frontend, Mia-Platform ha realizzato un orchestratore che permette di rendere ancora più semplice l’utilizzo di questo pattern architetturale e la gestione dei singoli frontend: micro-lc è un applicativo che svolge la funzione di orchestratore di micro frontend e che è stato rilasciato in modalità open-source.

Micro-lc si compone di due parti, backend e frontend, e ne permette l’estensione tramite plugin:

• La parte frontend è costituita da un container, che racchiude le funzionalità cross-applicativo utilizzate per configurare i frontend collegati: gli elementi di base del layout (top bar e menu sidebar, sidebar collassabile e interno alla top bar); i colori dell’applicativo; il logo e la Favicon; il titolo della finestra; le impostazioni di darkmode/lightmode; i dati utente; gli analitici Google; la gestione dei Plugin.
  I frontend sono realizzati con Qiankun, che si occupa di fornire delle funzioni da usare per montare o smontare i micro frontend in un applicativo contenitore. La scelta di utilizzare Qiankun è stata determinante perché permette che i frontend condividano lo stesso DOM, semplificando così la loro comunicazione (che può essere realizzata tramite l’utilizzo di eventi o l’implementazione di funzioni personalizzate da iniettare nella window);
• La parte di backend consente di gestire le configurazioni generali, quelle che definiscono gli elementi del frontend e l’autenticazione degli utenti.

Tra i plugin messi a disposizione da Mia-Platform troviamo element-composer, che permette di comporre la UI della pagina in modo dinamico per realizzare micro frontend orizzontali.

I benefici di un orchestratore come micro-lc

L’utilizzo di un orchestratore di micro frontend permette di migliorare l’esperienza di sviluppo a micro frontend: semplifica l’orchestrazione e astrae il linguaggio utilizzato.

Tra i vantaggi specifici di micro-lc troviamo il fatto che è integrato nella fase di runtime, semplificando anche le operazioni di rilascio. A differenza dell’integrazione a buildtime, infatti, non richiede di rilasciare tutti gli elementi dell’applicativo a ogni modifica, ma permette di rilasciare la singola configurazione e di visualizzare le modifiche semplicemente ricaricando la pagina.

I vantaggi di velocità, agilità e flessibilità offerti dall’orchestratore open-source di Mia-Platform non riguardano soltanto la creazione di nuove applicazioni frontend, ma anche alla migrazione di un frontend monolite verso un’architettura a micro frontend.

Micro-lc è inoltre estremamente configurabile e permette di modificare il layout inserendo gli asset grafici del brand, offrendo così un’esperienza di utilizzo personalizzata.

Se vuoi approfondire l’approccio architetturale a micro frontend e un caso reale di applicazione guarda la registrazione dell’evento Headless & API Date e segui l’intervento di Edoardo Pessina, Full Stack Developer Specialist su “Micro frontend: come orchestrare componenti riutilizzabili in applicativi frontend organici con il framework micro-lc”.

Guarda la registrazione dell'evento