Single-spa: Il framework Javascript per il routing di 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.

Indice

1. SIngle-spa: Una sola pagina, diversi framework 
   1. Trasforma la tua App in Microfrontend in soli due semplici passaggi
   2. Team di sviluppo diversi? no problem con il framework Single-spa
2. Pro e contro del framework single-spa
   1. Ci sono i pro… 
   2. … E i contro

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. 

Alcuni framework compatibili con Single SPA

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. 

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

Di seguito, potete vedere una rappresentazione schematica e sintetica del funzionamento di un sito classico versus un'applicazione web sviluppata in SPA.

Funzionamento di un sito classico versus SPA

Ora che abbiamo capito cos'è un applicazione SPA, andiamo a vedere come possiamo creare un'applicazione in microfrontend: due sono i passaggi fondamentali.

Trasforma la tua app in microfrontend in soli due semplici passaggi

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 con il framework Single-spa!

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. 

Pro e contro del framework 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 a volte 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. Qui, sul blog di Ulixe!