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à.
Composizione di pagine e visualizzazioni con micro-frontend
È possibile comporre viste di un'applicazione con composizione lato client, composizione lato bordo e composizione lato server. I modelli di composizione hanno caratteristiche diverse in termini di competenze di squadra necessarie, tolleranza agli errori, prestazioni e comportamento della cache.
Il diagramma seguente mostra come avviene la composizione a livello client, edge-side e lato server di un'architettura di microfrontend.
I livelli lato client, lato bordo e lato server sono discussi nelle sezioni seguenti.
Composizione lato client
Carica e aggiungi dinamicamente i micro-frontend come frammenti DOM (Document Object Model) sul client (browser o visualizzazione web mobile). Gli artefatti del micro-frontend, ad esempio i file CSS, possono essere caricati dalle JavaScript reti di distribuzione dei contenuti (CDN) per ridurre la latenza. La composizione lato client richiede quanto segue:
-
Un team che possieda e gestisca un'applicazione shell o un framework di microfrontend per consentire l'individuazione, il caricamento e il rendering dei componenti di microfrontend in fase di esecuzione nel browser
-
Livelli di competenza elevati nelle tecnologie di frontend come HTML, CSS e comprensione approfondita degli JavaScript ambienti dei browser
-
Ottimizzazione della quantità di JavaScript file caricati in una pagina e disciplina per evitare conflitti tra namespace globali
Il diagramma seguente mostra un' AWS architettura di esempio per la composizione lato client senza server.
La composizione lato client avviene nell'ambiente del browser tramite un'applicazione shell. Il diagramma mostra i seguenti dettagli:
-
Dopo aver caricato l'applicazione shell, invia una richiesta iniziale ad Amazon CloudFront per scoprire i micro-frontend da caricare tramite un endpoint manifest.
-
I manifesti contengono informazioni su ogni micro-frontend (ad esempio nome, URL, versione e comportamento di fallback). I manifesti sono forniti dal servizio di scoperta dei microfrontend. Nel diagramma, questo servizio di discovery è rappresentato da Amazon API Gateway, una AWS Lambda funzione e Amazon DynamoDB. L'applicazione shell utilizza le informazioni del manifesto per richiedere ai singoli microfrontend di comporre la pagina all'interno di un determinato layout.
-
Ogni pacchetto di micro-frontend è composto da file statici (come JavaScript CSS e HTML). I file sono ospitati in un bucket Amazon Simple Storage Service (Amazon S3) e serviti tramite. CloudFront
-
I team possono implementare nuove versioni dei loro micro-frontend e aggiornare le informazioni del manifesto utilizzando pipeline di distribuzione di loro proprietà.
Composizione laterale
Utilizza tecniche di transclusione come Edge Side Includes (ESI) o Server Side Includes (SSI) supportate da alcuni CDN e proxy davanti ai server di origine per comporre una pagina prima di inviarla via cavo ai client. ESI richiede quanto segue:
-
Un CDN con funzionalità ESI o una distribuzione proxy davanti a micro-frontend lato server. Le implementazioni proxy come HAProxy, Varnish e NGINX supportano SSI.
-
Comprensione dell'uso e dei limiti delle implementazioni ESI e SSI.
I team che iniziano nuove applicazioni in genere non scelgono la composizione laterale come modello di composizione. Tuttavia, questo modello potrebbe fornire un percorso per le applicazioni legacy che si basano sulla transclusione.
Composizione lato server
Utilizzate i server di origine per comporre le pagine prima che vengano memorizzate nella cache periferica. Questo può essere fatto con tecnologie tradizionali, come PHP, Jakarta Server Pages (JSP) o librerie di modelli, per comporre le pagine includendo frammenti di microfrontend. È inoltre possibile utilizzare JavaScript framework, come Next.js, in esecuzione sul server per comporre pagine sul server con rendering lato server (SSR).
Dopo aver eseguito il rendering delle pagine sul server, è possibile memorizzarle nella cache sui CDN per ridurre la latenza. Quando vengono implementate nuove versioni di micro-frontend, le pagine devono essere nuovamente renderizzate e la cache deve essere aggiornata per fornire le versioni più recenti ai clienti.
La composizione lato server richiede una conoscenza approfondita dell'ambiente server per stabilire i modelli di implementazione, l'individuazione di microfrontend lato server e la gestione della cache.
Il diagramma seguente mostra la composizione lato server.
Il diagramma include i seguenti componenti e processi:
-
Amazon CloudFront fornisce un punto di accesso unico all'applicazione. La distribuzione ha due origini: la prima per i file statici e la seconda per il compositore dell'interfaccia utente.
-
I file statici sono ospitati in un bucket Amazon S3. Vengono utilizzati dal browser e dal compositore dell'interfaccia utente per i modelli HTML.
-
Il compositore dell'interfaccia utente viene eseguito su un cluster di contenitori in. AWS Fargate Con una soluzione containerizzata, puoi utilizzare le funzionalità di streaming e il rendering multithread, se necessario.
-
Parameter Store, una funzionalità di AWS Systems Manager, viene utilizzato come sistema di rilevamento di microfrontend di base. Questa funzionalità fornisce un archivio chiave-valore utilizzato dal compositore dell'interfaccia utente per recuperare gli endpoint di micro-frontend da utilizzare.
-
Il micro-frontend delle notifiche archivia il pacchetto ottimizzato nel bucket S3. JavaScript Questo viene visualizzato sul client perché deve reagire alle interazioni dell'utente.
-
Il micro-frontend delle recensioni è composto da una funzione Lambda e le recensioni degli utenti sono archiviate in DynamoDB. Il microfrontend delle recensioni viene renderizzato completamente sul lato server e genera un frammento HTML.
-
Il micro-frontend dei dettagli del prodotto è un microfrontend a basso codice che utilizza. AWS Step Functions Express Workflow può essere richiamato in modo sincrono e contiene la logica per il rendering del frammento HTML e un livello di memorizzazione nella cache.
