Micro Front-end – From the 00s to the 20s

Miki Lombardi Miki Lombardi

Full-stack developer Plansoft

Micro Front-end articolo Lombardi

I Micro Front-end non portano con sé alcuna formula magica, piuttosto tanti metodi, concetti e principi specifici, che derivano in larga parte dall’architettura dei Microservices.

Ridurre i tempi di realizzazione e il costo di un deploy, isolare e risolvere facilmente le inefficienze di singoli componenti, rendere più efficiente il lifecycle di un’applicazione: questi i principali benefici che genera l’implementazione dei Micro Front-end.

Cosa sono i Micro Front-end?

Per spiegare in modo semplice cosa siano i Micro Front-end, possiamo definirli come dei concetti e dei principi architetturali di un’applicazione. Per entrare nel dettaglio, sono dei pattern architetturali applicabili anche al lato più critico di una moderna applicazione: il front-end.

Ognuno di questi pattern ha diversi obiettivi, di cui il più importante è la suddivisione di una grande e complessa applicazione (con a sua volta una UI articolata) in tanti piccoli programmi, ognuno indipendente e dedicato a svolgere solamente il compito prefissato.

Essendo ogni “micro-applicazione” indipendente dall’altra, siamo in grado di sviluppare con diversi stack tecnologici e mantenendo le principali linee guide dell’applicazione principale.

Ovviamente tutto ciò ha dei pro e dei contro, poiché sarà sempre necessario manutenere (anche in termini di risorse) le varie tecnologie utilizzate (ed anche i vari framework javascript). Si tratta dunque di una scelta strategica, che dipende molto dall’organizzazione aziendale e dagli obiettivi del progetto.

Un importante aspetto da sottolineare è che tutte queste micro-app verranno poi “unite” per formare l’applicazione principale, senza alcun visibile cambiamento nel suo utilizzo per l’utente finale: per lui, il tutto diventa una Single Page Application (SPA).

Una SPA può ovviamente essere inclusa all’interno di un wireframe padre, per gestire l’eventuale lifecycle dell’applicazione.

foto micro front-end
L’articolo in versione inglese di Miki Lombardi su Medium.

Quando è necessario usare il pattern Micro Front-end?

La decisione di implementare i micro front-end è importante e difficile. Potrebbe essere necessario infatti ripensare alcune parti e concetti dell’applicazione, per avvicinarsi quanto più possibile ai principi del Domain Driven Design.

Al fine di comprendere quanto possa essere importante suddividere in più contesti un’applicazione, proviamo a considerare l’esempio pratico di un’applicazione di amministrazione che gestisce una scuola.

Per quanto semplice possa essere, nasconde tuttavia varie insidie:

Molti utenti e persone che richiedono molteplici funzionalità diverse;

– Numerose pagine che dovrà avere l’applicazione: profilo staff, profilo studente, dettaglio delle materie, registro elettronico, risultati ufficiosi, corsi extra scolastici e così via.

Come si evince dall’elenco di cui sopra, ogni funzionalità potrebbe far riferimento a più attori. C’è inoltre un altro aspetto da considerare, che forse avrai già intuito: ogni pagina è come se fosse, nella pratica, un’applicazione a sé stante. Risulta infatti completa e indipendente dalle altre.

Ed è qui che entra in gioco il pattern Micro Front-End.

"Un importante aspetto da sottolineare è che tutte queste micro-app verranno poi “unite” per formare l’applicazione principale, senza alcun visibile cambiamento nel suo utilizzo per l’utente finale: per lui, il tutto diventa una Single Page Application (SPA)"

Perché usare questo approccio?

Ci sono molteplici motivi che ci possono spingere, in determinate situazioni, ad utilizzare questo pattern:

– Tempi morti e build infinita su progetti di larga scala;

Costo di un deploy;

Inefficienza di alcuni componenti, che possono affondare tutto il progetto;

Difficoltà nel trovare i bug che causano errori bloccanti nel lifecycle dell’intera applicazione.

Molti di questi problemi quotidiani vengono risolti da un approccio Micro Front-end grazie ai principi base del pattern, quali:

Decentralizzazione;

Automazione;

DDD;

Isolamento di errori;

Indipendenza;

Agile/Lean method.

Ogni team che si occupa di un’applicazione avrà piena responsabilità e indipendenza della propria funzionalità. Potrà addirittura usare un servizio di Continuos Delivery!

Plansoft Storie
Conosci Miki Lombardi nella sua Storia e cosa fa in Plansoft.

Come posso implementare i Micro Front-end?

Eccoci ad un altro aspetto molto importante, ovvero come implementare questo pattern.

Il primo punto fermo, fondamentale, è che i Micro Front-end devono essere studiati appositamente per ogni caso d’uso, esattamente come avviene quando vogliamo costruire un’architettura a microservices.

Ci sono vari modi per sviluppare i Micro Front-end, a seconda dalle esigenze di progetto. Ogni porzione dell’applicazione potrebbe essere inclusa:

Direttamente dall’edge, ovvero da chi serve il tutto (come una CDN): Edge Server Side Include;

Elaborando la richiesta lato server, quindi restituendo il tutto già composto: Server Side Include;

Componendo il tutto lato client, partendo da un configuratore: Client Side Include.

Se si fosse in possesso di una CDN (o di un server cloud gestito) con la possibilità di utilizzare la Edge Server Include, si potrebbero conseguire enormi vantaggi, tra i quali certamente un basso costo di manutenzione e una velocità notevole. Nel mondo reale purtroppo non esistono molti servizi che forniscono questo genere di funzionalità, tanto meno AWS.

La scelta del metodo di implementazione deve quindi essere effettuata solo dopo un’attenta analisi.

Conclusioni

I Micro Front-end sono dei principi architetturali che rendono un’applicazione più agile e composta da diversi micro-componenti indipendenti, pur mantenendo agli occhi dell’utente finale le sembianze di una Single Page Application.

I vantaggi dell’architettura a Micro Front-end non si hanno solamente dal lato architetturale ma anche da quello delle risorse: ogni developer può infatti cambiare team, oppure variare lo stack restando sempre sullo stesso progetto, il tutto mantenendo un efficiente costo di entrata su di una nuova funzionalità.

Infine un consiglio: per iniziare a pensare all’architettura e implementare questo pattern, mantieni la più ampia apertura di mente!

Soluzioni e Tecnologie Plansoft.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *