Comprensione e implementazione di micro-frontend su AWS - AWS Linee guida prescrittive

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Comprensione e implementazione di micro-frontend su AWS

Amazon Web Services (collaboratori)

Luglio 2024 (cronologia dei documenti)

Poiché le organizzazioni puntano all'agilità e alla scalabilità, l'architettura monolitica convenzionale spesso diventa un collo di bottiglia, ostacolando lo sviluppo e l'implementazione rapidi. I micro-frontend mitigano questo problema suddividendo interfacce utente complesse in componenti più piccoli e indipendenti che possono essere sviluppati, testati e implementati in modo autonomo. Questo approccio migliora l'efficienza dei team di sviluppo e facilita la collaborazione tra backend e frontend, favorendo l'allineamento dei sistemi distribuiti. end-to-end

Questa guida prescrittiva è personalizzata per aiutare i leader IT, i proprietari di prodotti e gli architetti di diversi domini professionali a comprendere l'architettura micro-frontend e creare applicazioni micro-frontend su Amazon Web Services ().AWS

Panoramica

I microfrontend sono un'architettura basata sulla scomposizione dei frontend delle applicazioni in artefatti sviluppati e distribuiti in modo indipendente. Quando si suddividono frontend di grandi dimensioni in artefatti software autonomi, è possibile incapsulare la logica aziendale e ridurre le dipendenze. Ciò consente una consegna più rapida e frequente di incrementi di prodotto.

I micro-frontend sono simili ai microservizi. In effetti, il termine micro-frontend deriva dal termine microservice e mira a trasmettere la nozione di microservizio come frontend. Mentre un'architettura di microservizi in genere combina un sistema distribuito nel backend con un frontend monolitico, i microfrontend sono servizi di frontend distribuiti autonomi. Questi servizi possono essere configurati in due modi:

  • Solo frontend, si integra con un livello API condiviso dietro il quale esegue un'architettura di microservizi

  • Full stack, il che significa che ogni micro-frontend ha la propria implementazione di backend.

Il diagramma seguente mostra un'architettura di microservizi tradizionale, con un monolite di frontend che utilizza un gateway API per connettersi ai microservizi di backend.

Monolite frontend lato client che si connette a microservizi lato server.

Il diagramma seguente mostra un'architettura di micro-frontend con diverse implementazioni di microservizi.

Moduli front-end a livello di integrazione lato client e microservizi lato server.

Come illustrato nel diagramma precedente, è possibile utilizzare i micro-frontend con architetture di rendering lato client o lato server:

  • I micro-frontend renderizzati lato client possono utilizzare direttamente le API esposte da un API Gateway centralizzato.

  • Il team può creare un backend-for-frontend (BFF) all'interno del contesto limitato per ridurre la chiacchierata del frontend nei confronti delle API.

  • Sul lato server, i microfrontend possono essere espressi con un approccio lato server potenziato sul lato client utilizzando una tecnica chiamata idratazione. Quando una pagina viene renderizzata dal browser, la pagina associata JavaScript viene idratata per consentire interazioni con gli elementi dell'interfaccia utente, come fare clic su un pulsante.

  • I micro-frontend possono eseguire il rendering sul backend e utilizzare collegamenti ipertestuali per indirizzare verso una nuova parte di un sito Web.

I micro-frontend sono la soluzione ideale per le organizzazioni che desiderano eseguire le seguenti operazioni:

  • Scala con più team che lavorano sullo stesso progetto.

  • Abbraccia la decentralizzazione del processo decisionale, permettendo agli sviluppatori di innovare entro i confini dei sistemi identificati.

Questo approccio riduce significativamente il carico cognitivo sui team, in quanto diventano responsabili di parti specifiche del sistema. Aumenta l'agilità aziendale perché è possibile apportare modifiche a una parte del sistema senza interrompere il resto.

I micro-frontend sono un approccio architettonico distinto. Sebbene esistano diversi modi per creare micro-frontend, hanno tutti tratti comuni:

  • Un'architettura di micro-frontend è composta da più elementi indipendenti. La struttura è simile alla modularizzazione che avviene con i microservizi sul backend.

  • Un microfrontend è completamente responsabile dell'implementazione del frontend all'interno del suo contesto limitato, che comprende quanto segue:

    • Interfaccia utente

    • Dati

    • Stato o sessione

    • Logica aziendale

    • Flusso

Un contesto limitato è un sistema internamente coerente con confini accuratamente progettati che mediano ciò che può entrare e uscire. Un microfrontend dovrebbe condividere la minor quantità possibile di logica e dati aziendali con altri microfrontend. Ovunque sia necessario, la condivisione avviene tramite interfacce chiaramente definite come eventi personalizzati o flussi reattivi. Tuttavia, quando si tratta di questioni trasversali come un sistema di progettazione o la registrazione delle librerie, la condivisione intenzionale è benvenuta.

Uno schema consigliato è quello di creare micro-frontend utilizzando team interfunzionali. Ciò significa che ogni micro-frontend è sviluppato dallo stesso team che lavora dal backend al frontend. La proprietà del team è fondamentale, dalla codifica all'operatività del sistema in produzione.

Questa guida non intende raccomandare un approccio particolare. Anziché, discute diversi modelli, migliori pratiche, compromessi e considerazioni architettoniche e organizzative.