Ulixe_Group

Single-spa: framework Javascript per il routing di microfrontend

Un valido approccio ai microfrontend

Single-spa è un framework JavaScript con grandi potenzialità, che ti darà una mano ad evitare quello che è stato fatto per decenni: sviluppare applicativi monolitici con decine, se non centinaia, di funzionalità al loro interno, pagine innestate l’una dentro l’altra e decine di classi.  

Nel mondo dello sviluppo web ormai da qualche anno si sente parlare di microfrontend. Se sei un web designer come me, questo termine ti potrebbe suscitare sentimenti contrastanti perché non sai ancora esattamente cosa sono, ma dopo averli studiati un po’ è tutto più chiaro: piccole applicazioni che fanno una cosa specifica, più piccole sono meglio è. 

Oggi la parola d’ordine è micro-applicazioni, separate tra di loro, che possano essere sviluppate da team diversi senza che questi si pestino i piedi a vicenda e magari anche con tecnologie web differenti, il tutto che possa convivere nella stessa pagina. 

Single-spa logo

Una sola pagina, diversi framework 

La richiesta di un cliente di Ulixe che mi ha fatto propendere per lo studio di questa soluzione è stata quella di voler utilizzare diversi framework (Angular e React) nello stesso sito. I due framework JS permettono entrambi il routing, ovvero un cambio di contenuto della pagina senza effettivamente spostarsi verso un nuovo URL; tuttavia, questi non possono essere usati contemporaneamente, perché entrambi necessitano di un ambiente dedicato. 

Micro Frontend Overview: Single SPA
Single SPA Frameworks

In questo modo si è vincolati per sempre all’utilizzo di un singolo framework e nel momento in cui l’applicazione inizia a crescere o nascono diverse esigenze, ci si muove a grandi passi verso il famoso monolite: una grossa applicazione su cui magari lavorano più team, che nel corso del tempo diventa davvero complicato mantenere. 

Single-spa, invece, si fa carico di effettuare il routing tra diverse applicazioni (da ora microfrontend), svincolandosi dall’utilizzo di una singola tecnologia

Tutto in due passi: creare l’App contenitore e convertire l’applicazione esistente in microfrontend 

Per creare dei microfrontend e farli convivere tra di loro bisogna avere un’infrastruttura che li contenga, una specie di “app contenitore” che funge da scheletro per caricare Single-spa e almeno una barra di navigazione, una homepage e magari anche un footer. Under the hood, come si dice in gergo, Single-spa non fa altro che puntare ad un elemento della pagina identificato tramite id, dentro al quale caricherà il microfrontend definito da noi, sulla rotta dedicata. 

Ad esempio, mettendola sul pratico, puntando sull’URL miosito.com/app/vetrina potrebbe essere caricato un microfrontend in React, mentre sull’URl miosito.com/app/carrello potrebbe esserci un altro applicativo completamente separato sviluppato in Angular

Una cosa notevole è la possibilità di far funzionare una qualunque applicazione già esistente senza cambiare una riga di codice, se non per alcune semplici configurazioni che ti permettono, tramite Single-spa, di convertire un’applicazione Angular (o Vue, React, ecc..) in un microfrontend Single-spa in pochi passi.

Ovviamente il framework che si utilizza deve essere supportato da Single-spa ma nessun problema, al momento sono supportati i principali framework JavaScript esistenti tra cui Angular, React, Vue, Svelte, Dojo e tanti altri. 

Qui puoi trovare la documentazione ufficiale per effettuare tutte le operazioni, mentre su Git Hub trovi un progetto con un esempio di App contenitore con due microfrontend già configurati!

Team di sviluppo diversi? no problem!

Eh sì, senza vincoli di tecnologie, è possibile affidare task dello stesso progetto a diversi team, dal momento che nello sviluppo e nel rilascio delle applicazioni non ci sono interdipendenze. Questo significa inoltre che nel caso in cui ci fosse qualche problema di sviluppo non verrebbe intaccato l’intero sito, ma una singola parte. 

Non solo! I microfrontend non devono essere necessariamente caricati nemmeno sullo stesso server, creando un’effettiva interdipendenza nulla tra le parti: i team a cui si affidano le diverse parti del sito possono trovarsi ovunque nel mondo e le competenze possono anche essere diverse perché ognuno svilupperà la propria parte che verrà poi caricata in modo passivo dove richiesta da Single-spa

Per concludere, vediamo alcuni pro e contro da prendere in considerazione se si vuole sviluppare un applicativo con un approccio microfrontend basato su Single-spa.

Ci sono i pro… 

Nel caso in cui si scelga di approcciare i microfrontend, Single-spa può essere una buona soluzione in determinate condizioni:  

  • nel caso in cui si vogliano sviluppare applicazioni differenti caricate nella stessa pagina, magari applicazioni già esistenti che si vogliono riunire in un unico “contesto”. Un esempio pratico può essere una vecchia applicazione monolitica che viene smontata e dalla quale nascono più applicazioni Angular, che si sceglie di rendere disponibili nello stesso dominio. 
  • Nel momento in cui sia necessario utilizzare diversi framework per parti diverse del proprio sito. Si può optare per una vetrina super veloce sviluppata in React, mentre per il carrello e l’area riservata del cliente ci si può affidare alla stabilità di Angular
  • Single-spa si è dimostrato, infine, facile da integrare in progetti già esistenti con pochi comandi da console di sviluppo, senza stravolgere l’applicazione originale, come invece capita utilizzando altri approcci. 

… E i contro

Naturalmente, come tutte le soluzioni ci sono anche degli svantaggi:  

  • il fatto stesso di utilizzare un framework aggiuntivo oltre ai framework necessari per l’esistenza del sito stesso, richiede di caricare file aggiuntivi, potenzialmente rallentando la navigazione
  • le applicazioni convertite in Single-spa non possono più funzionare singolarmente, ma solo all’interno del contesto dell’app container. 
  • l’implementazione di Single-spa comporta decisamente un effort superiore e forse non molto sensato, visto che esistono soluzioni più integrate quando si utilizza un singolo framework per costruire dei microfrontend (Angular ad esempio con la sua Angular Module Federation). 

E anche per questa volta è tutto, grazie per l’attenzione! 

Alla prossima dal mondo del web design! 

Riccardo Massa, l’autore di questo articolo, è uno sviluppatore Web specializzato in applicazioni Angular e lavora in Ulixe dal 2016. Laureato in biologia, appassionato di computer, fotografia, videogiochi, film, Scrubs e Friends. La forza di volontà e le mille passioni lo hanno portato nel mondo IT, dove può unire la creatività all’informatica, misurandosi con sfide sempre nuove. Vive la sua vita a un quarto di citazione di The Office alla volta. Torna a trovarci nel nostro blog per leggere altri articoli di Riccardo.

Ti è piaciuto l'articolo?

Share on Facebook
Share on Twitter
Share on Linkedin
Email

Lascia un commento

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

Entra anche tu nel team ULIXE!

Compila il form qui sotto e inviaci il tuo CV

Hai delle domande o vuoi sottoporci un progetto? Scrivi qui, ti risponderemo subito.