Un Approccio Tecnico all’Orchestrazione di Microfrontend

La componibilità nel frontend

Nel mondo moderno dello sviluppo web, la costruzione di applicazioni modulari, manutenibili e scalabili è fondamentale per tenere il passo con i requisiti aziendali e offrire esperienze utente eccezionali. Pertanto, la componibilità è diventata un concetto cruciale anche nello sviluppo di frontend, sottolineando la necessità di componenti modulari e riutilizzabili che possono essere combinati per costruire interfacce utente complesse.

Le sfide più importanti della componibilità sono l’interoperabilità, la comunicazione e le prestazioni. Quando queste caratteristiche delle applicazioni di frontend cambiano, si scatena un effetto domino che richiede il repackaging, il test e la distribuzione dell’intera applicazione. Questo introduce maggiore complessità che può andare a scapito della developer experience.

L’architettura a microfrontend è emersa come uno stile architettonico innovativo per ridurre questa complessità. Si tratta di un approccio innovativo allo sviluppo di frontend che prevede la scomposizione di applicazioni monolitiche in unità indipendenti e collaborative.

Le basi dell’architettura a microfrontend

I microfrontend suddividono l’applicazione frontend in funzionalità indipendenti e minimali. Sono sviluppati in modo indipendente in repository separati da un team autonomo responsabile della costruzione, del test e della distribuzione. Ogni microfrontend possiede la propria codebase, il proprio ciclo di vita e le proprie dipendenze, agendo come una mini-applicazione all’interno di un insieme più ampio, spesso comunicando tra loro tramite un’API condivisa.

L’architettura a microfrontend consente di avere una codebase semplice e disaccoppiata che permette aggiornamenti incrementali dell’applicazione per ogni modulo e può essere distribuita in modo indipendente. Poiché ogni funzionalità è sviluppata e gestita in modo autonomo, i team possono iterare sulle singole funzionalità costruendole, testandole e distribuendole in modo indipendente, riducendo la possibilità di avere potenziali problemi.

Molti casi di studio fanno riferimento al modo in cui l’architettura a microfrontend migliora la componibilità delle loro applicazioni. Un buon esempio è il modo in cui le grandi piattaforme di e-commerce più popolari, come IKEA, hanno sfruttato l’Edge Side Includes (ESI) come tecnologia fondamentale nell’implementazione dell’architettura micro-frontend per scalare il loro negozio online. IKEA ha registrato una riduzione del 50% dei tempi di sviluppo e del 75% dei tempi di caricamento delle pagine. Un altro esempio è il modo in cui il team architettura di Emtec Digital ha portato un fornitore di logistica di terze parti a ottenere un incremento del 70% anno su anno nello sviluppo dei prodotti dopo la migrazione.

Questo approccio architetturale riduce chiaramente la complessità delle applicazioni frontend di grandi dimensioni; tuttavia, alcuni requisiti essenziali si combinano per farlo funzionare. Vediamoli.

Componenti chiavi di un’architettura a microfrontend

• Microservizi: L’autonomia dei microservizi consente lo sviluppo, la distribuzione e la manutenzione indipendenti, promuovendo l’agilità e la resilienza dell’architettura a microafrontend.
• API: Le API definiscono canali di comunicazione chiari e sicuri tra i microservizi, assicurando che i dati fluiscano senza problemi e che le funzionalità si sincronizzino perfettamente. Poiché i micro-frontend sono un’architettura distribuita, richiedono una gestione più formale delle API o degli eventi.
• Routing: Il routing è fondamentale perché i microfrontend visualizzino correttamente ogni parte dell’interfaccia utente. Assicura che i microfrontend vengano visualizzati nell’ordine corretto, creando un’esperienza utente omogenea e coerente. Per questo motivo, è opportuno prendere in considerazione soluzioni di rendering lato server (SSR) per microfrontend come Piral, la module federation per Next.js, TailorX, e Isomorphic Layout Composer (ILC).
• Controllo di versione: Poiché i microfrontend vengono sviluppati, distribuiti e mantenuti in modo indipendente, è essenziale garantire che i singoli componenti siano correttamente versionati. Di conseguenza, per mantenere l’ordine e la collaborazione è necessario tracciare e documentare in modo efficiente tutte le modifiche all’intera applicazione utilizzando sistemi di controllo di versione come Git.
• Orchestrazione: I microfrontend sono spesso composti da componenti indipendenti costruiti da team indipendenti. Pertanto, le piattaforme di orchestrazione di container come Kubernetes sono strumenti essenziali per coordinare e gestire più microfrontend all’interno di una singola applicazione.
• Sistemi di compilazione: I microfrontend sono costituiti da moduli indipendenti costruiti utilizzando framework, librerie e strumenti come Webpack Module Federation. I team possono implementare sistemi di compilazione adeguati per costruire, testare e distribuire in modo efficiente i componenti del microfrontend.

Da tutte queste considerazioni è nata l’esigenza di superare la complessità e le sfide di coordinamento insite nella manutenzione di questi microfrontend disparati.

Orchestrare un’architettura a microfrontend

Le funzionalità delle applicazioni microfrontend sono spesso realizzate da diversi team indipendenti. A differenza di un frontend monolitico, con l’aumentare della complessità dell’applicazione aumentano anche i requisiti infrastrutturali, le pipeline CI/CD, i domini e la duplicazione delle dipendenze tra i diversi microfrontend. Per risolvere questo problema, il team di sviluppo deve garantire una comunicazione e un’integrazione perfetta tra questi microfrontend separati per creare applicazioni modulari. Da qui la necessità di un’orchestrazione.

L’orchestrazione di microfrontend comporta il coordinamento e la gestione della distribuzione e delle operazioni di più componenti autonomi all’interno di un’applicazione più ampia. Si concentra sullo sviluppo e sulla distribuzione di questi moduli indipendenti, assicurando che essi forniscano collettivamente un’applicazione web unificata e funzionale. Per questo motivo, per distribuire e gestire queste applicazioni web complesse si adottano piattaforme di orchestrazione di container come Kubernetes.

Benefici dell’orchestrazione di microfrontend

L’orchestrazione di microfrontend offre diversi vantaggi alle applicazioni web su larga scala. Alcuni di questi vantaggi includono:

• Flusso di sviluppo migliorato: L’orchestrazione dei microfrontend consente ai team autonomi di assumersi la responsabilità di come i loro microfrontend vengono costruiti, testati e distribuiti utilizzando le tecnologie e i framework che preferiscono. Ciò consente l’integrazione runtime e lo sviluppo parallelo e accelera la distribuzione complessiva di funzionalità e correzioni di bug. Ogni microfrontend astrae il linguaggio utilizzato, consentendo agli sviluppatori di concentrarsi su concetti e compiti di alto livello senza sentirsi sopraffatti dagli stack tecnologici impiegati in ciascun componente.
• Operazioni e manutenzione semplificate: Gli strumenti di orchestrazione dei microfrontend gestiscono il caricamento, l’instradamento e la comunicazione tra i microfrontend, rendendo l’architettura complessiva più gestibile. Con l’uso delle configurazioni dei plugin di Webpack Module Federation i team possono specificare il modo in cui le dipendenze del codice vengono mantenute e condivise all’interno dei singoli microfrontend.
• Prestazioni e scalabilità migliorate: La natura modulare dei microfrontend è una caratteristica chiave che ne promuove la scalabilità. Con l’orchestrazione dei microfrontend, il team di sviluppatori può sviluppare e mantenere con cura ogni singolo microfrontend. In questo modo, questi diversi moduli possono essere scalati simultaneamente in modo indipendente in base alle loro esigenze di risorse, ottimizzando l’utilizzo delle risorse. Così, anche quando un microfrontend si guasta, gli altri possono continuare a funzionare, garantendo un’esperienza utente più solida.

Il microfrontend è l’architettura perfetta per costruire e gestire applicazioni web su larga scala. Come per i microservizi, non esiste un’unica strategia che vada bene per tutti o che sia ampiamente accettata come standard di settore per l’implementazione del microfrontend.

Come implementare un’architettura a microfrontend

Quando si considera un’architettura di microfrontend, ci sono diversi approcci che i team di sviluppo devono prendere in considerazione. Tuttavia, a seconda del contesto, ogni dettaglio di implementazione può emergere come la scelta ottimale.

Microfrontend basati su iframe

Questo metodo prevede l’incorporazione di ogni microfrontend nel proprio iframe, con una single page application (SPA) che funge da container. La SPA esegue il rendering degli iframe e gestisce la comunicazione tra di essi. Questo metodo garantisce la massima indipendenza e isolamento da un microfrontend all’altro, poiché ogni iframe funziona come un’applicazione separata. Tuttavia, poiché ogni iframe viene caricato e gestito separatamente, potrebbe aggiungere complessità e creare problemi di prestazioni. I framework di microfrontend, come le SPA o la module federation, sono utilizzati per raggruppare i microfrontend e caricarli in un’unica applicazione web. Spotify, per esempio, ha avuto un notevole successo utilizzando gli iframe per la sua architettura a microfrontend.

Integrazione a build-time

L’integrazione in fase di build è uno dei modi più comuni di implementare i micro-frontend. In questo caso, ogni componente agisce come una libreria impacchettata, installata e inserita nell’applicazione principale durante la sua compilazione. Questo crea un’esperienza strettamente accoppiata con un caricamento iniziale più veloce, ma sacrifica la flessibilità delle distribuzioni indipendenti e può gonfiare la dimensione complessiva del bundle. Questo processo diventa più complesso quando si utilizzano diverse tecnologie, rendendo difficile la sincronizzazione di numerosi problemi di compilazione e versioni di librerie.

Integrazione a run-time

Per i microafrontend, l’integrazione a run-time consiste in tre tipi di composizioni:

• Composizione client-side: La composizione client-side utilizza gli script del browser per integrare diversi microfrontend in un’unica pagina. Ciò consente di precaricare, caricare e renderizzare elementi dell’applicazione su richiesta. I microfrontend vengono caricati e integrati direttamente nel browser dell’utente, orchestrati da un’applicazione contenitore o da un framework JavaScript. Questo offre aggiornamenti indipendenti e tempi di esecuzione potenzialmente più rapidi, oltre a non dover ricaricare la pagina per eseguire il rendering di contenuti dinamici. Tuttavia, la complessità e le dimensioni del bundle possono crescere nel tempo.
• Composizione server-side: In questo tipo di composizione, tutte le funzionalità sono assemblate nel backend che decide quale microfrontend caricare. Il server, che si trova tra il browser e l’applicazione host, determinerà l’URL per instradare la richiesta e quindi eseguirà il rendering di una pagina completa con tutti i microfrontend pre-integrati, consegnandola come un’unica unità. Questo migliora la SEO e il caricamento iniziale, ma il compromesso è la complessità del server e la ridotta flessibilità del lato client. Questo metodo può essere utilizzato in molti modi; tuttavia, per eseguire questo compito è possibile utilizzare un semplice reverse proxy con Nginx.
• Composizione edge-side: Edge Side Includes (ESI) supporta la composizione nel microfrontend consentendo l’assemblaggio di contenuti web dinamici, spesso utilizzando un provider content delivery network (CDN). In questo tipo di composizione, l’orchestrazione avviene sul CDN stesso invece che sul lato client o server. Ciò offre scalabilità e personalizzazione e consente ai singoli team di prendere le decisioni giuste per i loro microfrontend. Tuttavia, spesso richiede un’infrastruttura CDN o edge e aggiunge complessità di configurazione. Le alternative all’uso dell’ESI sono strumenti popolari come NGINX o Varnish.

Sviluppare microfrontend con micro-lc

Mia-Platform mantiene attivamente micro-lc, un orchestratore di microfrontend open-source progettato per facilitare la creazione di applicazioni frontend flessibili e multi-tenant. Si tratta di un motore di rendering unificato, che si integra perfettamente con vari modelli di microfrontend come iFrame, parcel, e shadowed components.

L’interfaccia principale di micro-lc consente di caricare, incorporare e orchestrare singoli microfrontend in tempo reale. È disponibile come CDN bundle per l’inserimento in pagine HTML o altri script e come container Docker configurabile. micro-lc offre opzioni di configurazione versatili e funzionalità integrate per qualsiasi applicazione web. È il cuore di Mia-Platform Microfrontend Composer, uno strumento che semplifica lo sviluppo di microfrontend, anche per gli utenti non tecnici.

Mia-Platform Microfrontend Composer è un ambiente di sviluppo visuale che fornisce un’interfaccia senza codice per costruire e gestire microfrontend. È possibile progettare qualsiasi cosa, da semplici pagine statiche a intricate strutture web specializzate. Combinando l’abilità tecnica di microfrontend con l’approccio user-friendly di Mia-Platform Microfrontend Composer, è possibile sbloccare la potenza dei microfrontend senza perdersi in complessi dettagli tecnici.

Conclusione

Le architetture a microfrontend forniscono gli stessi vantaggi al lato frontend che i microservizi offrono al lato backend dell’applicazione. Anche se siamo ancora agli inizi di questo concetto relativamente nuovo, è chiaro che rappresenta una soluzione innovativa per la creazione di applicazioni grandi e complesse. Se implementata con successo, offre molti vantaggi, tra cui una maggiore flessibilità, scalabilità, migliori prestazioni, affidabilità, tempi di sviluppo più rapidi e costi di manutenzione ridotti. Tuttavia, come ogni tecnologia emergente, ci sono alcune sfide da considerare prima di immergersi. Con il giusto strumento di orchestrazione, è possibile superare le sfide di complessità e coordinamento insite nell’architettura a microfrontend.

Se stai migrando le tue applicazioni frontend monolitiche verso un’architettura a microfrontend, micro-lc può aiutare a gestire la complessità dell’applicazione.