Costruire Composable Frontend grazie ai Micro-Frontend

Il bisogno di un’architettura Composable Frontend in azienda

Uno dei motivi principali per cui la vostra organizzazione ha bisogno di un’architettura Composable Frontend è che le esigenze del mercato, dei clienti e la tecnologia sono in continuo mutamento. Per “rimanere a galla” bisogna essere il più possibile agili e di conseguenza la vostra applicazione deve potersi adattare rapidamente ai cambiamenti e soddisfare quindi le nuove tendenze e le aspettative dei clienti.

Tuttavia, l’utilizzo di una tradizionale architettura monolitica per il frontend rende ciò quasi impossibile. In un’applicazione frontend monolitica tutti i componenti sono fortemente accoppiati, perciò qualsiasi modifica apportata a uno di essi richiede aggiornamenti a tutta l’applicazione.

Ad esempio, l’aggiornamento del codice dell’interfaccia utente (UI) può richiedere la modifica di più sezioni interconnesse dell’applicazione, aumentando il rischio di errori e allungando i tempi di sviluppo. Inoltre, il rilascio degli aggiornamenti spesso implica il rilascio dell’intero frontend, causando potenziali tempi di inattività.

Al contrario, le architetture più recenti come quella Composable Frontend danno priorità alla modularità, suddividendo l’interfaccia utente in componenti riutilizzabili ciascuno dei quali gestisce la propria logica e la propria visualizzazione.

Questo approccio modulare consente lo sviluppo e l’aggiornamento indipendente di componenti specifici senza impattare sull’intera applicazione; supporta inoltre l’uso di architetture Micro-Frontend, in cui piccole applicazioni autonome possono essere sviluppate, testate e distribuite in modo indipendente da team di sviluppo che utilizzano stack tecnologici diversi.

Come risultato, team indipendenti possono collaborare in maniera più efficace, accelerare il time-to-market, migliorare la riusabilità dei componenti software sviluppati e ottenere una maggiore flessibilità, garantendo che l’applicazione possa adattarsi rapidamente ai cambiamenti e soddisfare le aspettative dei clienti.

Il ruolo dei Micro-Frontend

Appresa l’importanza di un’architettura Composable Frontend, la domanda principale da porsi è come poter ottenere questo risultato utilizzando un’architettura Micro-Frontend.

L’architettura Micro-Frontend prevede l’utilizzo di componenti modulari del frontend di un’applicazione web che possono essere sviluppati, testati e distribuiti in modo indipendente. Questo stile architetturale segue un approccio simile all’architettura a microservizi, suddividendo applicazioni frontend complesse in componenti più piccoli e indipendenti.

Sulla base di questa definizione, i Micro-Frontend possono essere utilizzati come elementi costitutivi dell’architettura Composable Frontend. L’intero processo può essere paragonabile alla composizione di un puzzle, dove ogni pezzo è una piccola parte dell’intero quadro.

Le strategie per ottenere una vera composability con i Micro-Frontend

Esistono diversi modi per ottenere un’architettura Composable come approccio allo sviluppo di frontend. Queste strategie rientrano in tre categorie principali: approccio allo sviluppo, metodi di orchestrazione e comunicazione. Conosciamole meglio nei successivi paragrafi.

L’approccio allo sviluppo

Supponiamo di utilizzare un’architettura monolitica. A seconda delle sue dimensioni, è possibile suddividere l’applicazione in parti gestibili in tre modi principali: utilizzando una suddivisione verticale, una suddivisione orizzontale o un mix di entrambe.

È possibile utilizzare l’approccio a suddivisione orizzontale quando si desidera dividere l’applicazione in base agli elementi o alle pagine della UI. Ad esempio, ciascuno Micro-Frontend sarà responsabile di elementi specifici dell’interfaccia utente come l’header, il menu laterale, la dashboard, l’elenco dei prodotti o il checkout.

L’approccio basato su suddivisione verticale prevede la scomposizione dell’applicazione monolitica in base alle funzionalità aziendali, che in seguito diventeranno Micro-Frontend, ognuno dei quali si concentrerà su una funzionalità specifica o su un journey dell’utente. Per esempio, supponiamo di avere un’applicazione per la prenotazione di viaggi; potrebbe essere organizzata con Micro-Frontend separati per la ricerca, la prenotazione, il pagamento e la gestione dei profili utente.

Metodi di orchestrazione

A differenza dei microservizi, i Micro-Frontend devono unirsi per formare l’applicazione. Ci sono due modi per ottenere ciò: l’orchestrazione lato client e l’orchestrazione lato server.

Per l’orchestrazione lato client, il browser integra più Micro-Frontend utilizzando vari stack tecnologici. I metodi più comuni includono:

• Iframes: Una funzione nativa del browser che consente la composizione fornendo un viewport per il rendering di ogni Micro-Frontend.
• Module Federation: Un approccio all’orchestrazione basato sull’integrazione in tempo reale.
• Framework specifici: Esistono alcuni framework ad hoc per Micro-Frontend come micro-Ic e single-spa, che si concentrano sulla gestione e sull’integrazione dei Micro-Frontend.
• Mia-Platform Microfrontend Composer: Questo Composer ha un’interfaccia user-friendly che consente sia a esperti sia a principianti di configurare facilmente i Micro-Frontend senza scrivere codice.

Questi stack tecnologici, spesso basati su framework o librerie JavaScript, lavorano insieme per integrare perfettamente i Micro-Frontend in un’esperienza utente coesa.

L’orchestrazione lato server invece, prevede l’utilizzo del server backend per l’integrazione e il rendering dei Micro-Frontend in HTML, che viene poi inviato al browser. Questo approccio scarica la responsabilità dell’integrazione dal client e riduce al minimo la quantità di codice JavaScript necessaria sul frontend.

Comunicazione

Parliamo ora dell’approccio finale: impostare le modalità di comunicazione tra le diverse parti dell’applicazione. Questo passaggio è fondamentale nelle configurazioni dell’architettura Micro-Frontend, in quanto garantisce che i componenti lavorino insieme in modo fluido ed efficace. Per ottenere questo risultato, si può utilizzare uno dei seguenti metodi:

• API del browser: Poiché tutti i Micro-Frontend sono renderizzati nello stesso browser, possono accedere alle API del browser web come Local Storage, IndexDB e altre API di archiviazione web. In questo modo, i dati possono essere memorizzati da un micro-frontend e recuperati dagli altri.
• Eventi del browser: Il sistema di eventi intrinseco del browser consente la comunicazione tra i singoli componenti. Ad esempio, l’uso degli iframe richiede l’uso dell’oggetto window, window.postMessage, per trasmettere gli eventi all’applicazione che ascolta gli eventi degli iframe e li gestisce. Gli eventi personalizzati possono anche migliorare la comunicazione tra i componenti.
• Gestori degli stati (state manager): Strumenti come Redux consentono di condividere i dati tra i componenti dell’applicazione. La maggior parte dei framework moderni supportano state manager di questo tipo, alcuni dei quali funzionano senza problemi tra i diversi framework.
• API del web server: A differenza dei metodi basati sul browser, questo tipo di API memorizzano i dati sul server. I server forniscono endpoint o connessioni WebSocket per facilitare la comunicazione tra i Micro-Frontend.

Le sfide nell’utilizzo dei Micro-Frontend e come superarle

Il percorso di miglioramento della propria architettura Composable potrebbe presentare alcune sfide. Se da un lato l’uso di Micro-Frontend rende il sistema più flessibile e scalabile, dall’altro può essere difficile mantenere l’aspetto coerente di tutte le sue parti e gestire bene le loro dipendenze.

Ad esempio, le diverse applicazioni Micro-Frontend possono utilizzare versioni diverse degli stessi strumenti, il che può causare conflitti o far apparire le cose in modo diverso da ciò che si era previsto.

Vediamo alcuni di questi problemi e le loro potenziali soluzioni.

Perdita degli stili CSS

La gestione dei CSS (Cascading Style Sheets) può essere impegnativa se non viene eseguita correttamente.
Supponiamo di avere diversi team che lavorano su un sito web di e-commerce: il team A si occupa della pagina principale, il team B della pagina dei dettagli del prodotto ecc. Gli stili delle pagine potrebbero andare in conflitto quando il team C cerca di integrare le parti dei team A e B, creando un’esperienza utente visivamente incoerente.

In queste situazioni, è possibile utilizzare moduli CSS o Shadow DOM per l’incapsulamento degli stili. I moduli CSS generano nomi di classi univoci per limitare la dispersione degli stili, mentre Shadow DOM isola gli stili all’interno di un componente web, garantendo che non interferiscano con altre parti dell’applicazione.

Stili a livello globale e librerie di terze parti

Quando si utilizzano stili o librerie di stili di terze parti che applicano gli stili a livello globale, si possono incontrare vari problemi che si manifestano in incoerenze in varie parti del progetto composte da componenti più piccoli.

Come soluzione, è meglio limitarsi agli stili necessari solo per parti specifiche del progetto. Per ottenere questo risultato si possono usare metodi come CSS-in-JS che consente di aggiungere gli stili direttamente al codice JavaScript. In questo modo, si evita di avere troppi stili che agiscono tutti insieme, assicurando coerenza e prevenendo modifiche inaspettate.

Gestione delle dipendenze

La gestione delle dipendenze tra moduli indipendenti è una sfida comune.
I componenti più piccoli potrebbero includere file CSS, librerie JavaScript o dipendenze ridondanti, aumentando le dimensioni dell’applicazione e causando problemi di prestazioni. Per evitare questo problema:

• Innanzitutto, utilizzate gli stessi strumenti in tutto il progetto. Ad esempio, se un team usa Bootstrap per la gestione degli stili, anche tutti gli team dovrebbero fare altrettanto. Questa coerenza renderebbe il progetto più leggero e veloce.
• In secondo luogo, mantenete tutto aggiornato. Assicuratevi che tutti utilizzino le ultime versioni degli strumenti, poiché gli aggiornamenti spesso risolvono i bug e migliorano la compatibilità. Stabilite delle regole sulla frequenza degli aggiornamenti e sulle versioni da utilizzare.

Conclusioni

L’architettura Micro-Frontend è fondamentale per migliorare le architetture Composable Frontend nei progetti delle aziende. Questo approccio aumenta la modularità, le prestazioni e la scalabilità, consentendo a diversi team di lavorare contemporaneamente su varie parti con gli strumenti migliori.

Mia-Platform è pronta a supportarvi in questo viaggio. Grazie a Mia-Platform Microfrontend Composer, potete costruire e gestire facilmente Micro-Frontend, consentendo al vostro team di creare e mantenere siti web complessi in modo efficiente. Mia-Platform supporta lo sviluppo di applicazioni modulari e scalabili, incoraggiando al tempo stesso il lavoro di squadra grazie a un insieme unificato di strumenti.

Se si vuole provare a costruire un’applicazione Composable Frontend, si può sperimentare micro-lc, l’orchestratore di Micro-Frontend open source costruito e mantenuto da Mia-Platform.