Composer des pages et des vues à l'aide de micro-frontends

Vous pouvez composer des vues d'une application avec une composition côté client, une composition côté bord et une composition côté serveur. Les modèles de composition présentent des caractéristiques différentes en termes de compétences d'équipe nécessaires, de tolérance aux pannes, de performances et de comportement du cache.

Le schéma suivant montre comment la composition se produit au niveau des couches côté client, côté périphérie et côté serveur d'une architecture de micro-frontend.

Les couches côté client, côté périphérie et côté serveur sont abordées dans les sections suivantes.

Montage côté client

Chargez et ajoutez dynamiquement des micro-frontends sous forme de fragments DOM (Document Object Model) sur le client (navigateur ou vue Web mobile). Les artefacts du micro-frontend, tels que JavaScript les fichiers CSS, peuvent être chargés à partir de réseaux de diffusion de contenu (CDN) pour réduire la latence. La composition côté client nécessite les éléments suivants :

• Une équipe chargée de posséder et de gérer une application shell ou un framework de micro-frontend pour permettre la découverte, le chargement et le rendu des composants du micro-frontend lors de l'exécution dans le navigateur

• Des niveaux de compétence élevés dans les technologies frontales telles que le HTML, le CSS et JavaScript une compréhension approfondie des environnements de navigateur

• Optimisation de la quantité de données JavaScript chargées dans une page et discipline pour éviter les conflits d'espaces de noms globaux

Le schéma suivant montre un exemple d' AWS architecture pour la composition côté client sans serveur.

La composition côté client s'effectue dans l'environnement du navigateur via une application shell. Le schéma montre les détails suivants :

1. Une fois l'application shell chargée, elle envoie une demande initiale à Amazon pour découvrir les micro-frontends CloudFront à charger via un point de terminaison du manifeste.

2. Les manifestes contiennent des informations sur chaque micro-frontend (par exemple, le nom, l'URL, la version et le comportement de secours). Les manifestes sont servis par le service de découverte des microfrontends. Dans le schéma, ce service de découverte est représenté par Amazon API Gateway, une AWS Lambda fonction, et Amazon DynamoDB. L'application shell utilise les informations du manifeste pour demander à des micro-frontends individuelles de composer la page selon une mise en page donnée.

3. Chaque bundle de micro-frontend est composé de fichiers statiques (tels que JavaScript CSS et HTML). Les fichiers sont hébergés dans un compartiment Amazon Simple Storage Service (Amazon S3) où ils sont servis. CloudFront

4. Les équipes peuvent déployer de nouvelles versions de leurs micro-frontends et mettre à jour les informations du manifeste en utilisant des pipelines de déploiement dont elles sont propriétaires.

Composition côté bord

Utilisez des techniques de transclusion telles que les inclusions côté Edge (ESI) ou les inclusions côté serveur (SSI) prises en charge par certains CDN et proxys devant les serveurs d'origine pour composer une page avant de l'envoyer par câble aux clients. L'ESI requiert les éléments suivants :

• Un CDN avec fonctionnalité ESI ou un déploiement de proxy devant des micro-frontends côté serveur. Les implémentations de proxy telles que HAProxy, Varnish et NGINX prennent en charge le SSI.

• Compréhension de l'utilisation et des limites des implémentations ESI et SSI.

Les équipes qui lancent de nouvelles candidatures ne choisissent généralement pas la composition côté bord comme modèle de composition. Cependant, ce modèle peut fournir une voie pour les applications existantes qui reposent sur la transclusion.

Montage côté serveur

Utilisez les serveurs d'origine pour composer les pages avant qu'elles ne soient mises en cache sur le périphérique. Cela peut être fait à l'aide de technologies traditionnelles, telles que PHP, Jakarta Server Pages (JSP) ou de bibliothèques de modèles, pour composer les pages en incluant des fragments provenant de micro-frontends. Vous pouvez également utiliser JavaScript des frameworks, tels que Next.js, exécutés sur le serveur pour composer des pages sur le serveur avec un rendu côté serveur (SSR).

Une fois les pages affichées sur le serveur, elles peuvent être mises en cache sur des CDN afin de réduire le temps de latence. Lorsque de nouvelles versions de micro-frontends sont déployées, les pages doivent être restituées et le cache doit être mis à jour pour fournir les dernières versions aux clients.

La composition côté serveur nécessite une connaissance approfondie de l'environnement du serveur afin d'établir des modèles de déploiement, de découverte des micro-frontends côté serveur et de gestion du cache.

Le schéma suivant montre la composition côté serveur.

Le diagramme inclut les composants et processus suivants :

1. Amazon CloudFront fournit un point d'entrée unique pour accéder à l'application. La distribution a deux origines : la première pour les fichiers statiques et la seconde pour le compositeur d'interface utilisateur.

2. Les fichiers statiques sont hébergés dans un compartiment Amazon S3. Ils sont utilisés par le navigateur et le compositeur de l'interface utilisateur pour les modèles HTML.

3. Le compositeur d'interface utilisateur s'exécute sur un cluster de conteneurs dans AWS Fargate. Avec une solution conteneurisée, vous pouvez utiliser les fonctionnalités de streaming et de rendu multithread si nécessaire.

4. Parameter Store, une fonctionnalité de AWS Systems Manager, est utilisé comme système de découverte de microfrontends de base. Cette fonctionnalité fournit un magasin clé-valeur utilisé par le compositeur de l'interface utilisateur pour récupérer les points de terminaison du micro-frontend à consommer.

5. Le micro-frontend de notifications stocke le JavaScript bundle optimisé dans le compartiment S3. Cela se répercute sur le client car il doit réagir aux interactions de l'utilisateur.

6. Le micro-frontend des avis est composé d'une fonction Lambda, et les avis des utilisateurs sont stockés dans DynamoDB. Le micro-frontend des révisions est entièrement rendu côté serveur et produit un fragment HTML.

7. Détails du produit Le micro-frontend est un micro-frontend low-code qui utilise. AWS Step Functions L'Express Workflow peut être invoqué de manière synchrone et contient la logique de rendu du fragment HTML et d'une couche de mise en cache.

Pour plus d'informations sur la composition côté serveur, consultez le billet de blog intitulé Micro-frontends de rendu côté serveur : l'architecture.