使用微前端撰写页面和视图

您可以使用客户端合成、边缘组合和服务器端合成来组合应用程序的视图。组合模式在必要的团队技能、容错能力、性能和缓存行为方面具有不同的特征。

下图显示了微前端架构的客户端、边缘端和服务器端层的组合是如何发生的。

以下各节将讨论客户端、边缘端和服务器端层。

客户端合成

在客户端（浏览器或移动 Web 视图）上以文档对象模型 (DOM) 片段的形式动态加载和附加微前端。微前端工件（例如 JavaScript 或 CSS 文件）可以从内容分发网络 (CDN) 加载，以减少延迟。客户端组合需要满足以下条件：

• 一个拥有和维护 shell 应用程序或微前端框架的团队，以便能够在浏览器中在运行时发现、加载和渲染微前端组件

• 前端技术（例如 HTML、CSS 和）方面的高技能水平以及 JavaScript对浏览器环境的深入理解

• 优化页面中的 JavaScript 加载量，以及避免全局命名空间冲突的纪律

下图显示了无服务器客户端 AWS 组合的示例架构。

客户端合成在浏览器环境中通过 shell 应用程序进行。该图显示了以下细节：

1. 加载外壳应用程序后，它会向 Amazon 发出初始请求 CloudFront，以发现要通过清单终端节点加载的微前端。

2. 清单包含有关每个微前端的信息（例如，名称、URL、版本和后备行为）。清单由微前端发现服务提供。在图中，该发现服务由 Amazon API Gateway（一个 AWS Lambda 函数）和亚马逊 DynamoDB 表示。shell 应用程序使用清单信息请求各个微前端在给定布局中撰写页面。

3. 每个微前端包都由静态文件（例如 JavaScript CSS 和 HTML）组成。这些文件托管在亚马逊简单存储服务 (Amazon S3) 存储桶中并通过它提供服务。 CloudFront

4. 团队可以使用他们拥有的部署管道部署其微前端的新版本并更新清单信息。

边缘构图

在通过网络将页面发送给客户端之前，使用某些CDN和代理支持的边缘端包含 (ESI) 或服务器端包含 (SSI) 等嵌入技术来撰写页面。ESI 要求满足以下条件：

• 具有 ESI 功能的 CDN，或者服务器端微前端前的代理部署。诸如 HAProxy、Varnish 和 NGINX 之类的代理实现支持 SSI。

• 了解 ESI 和 SSI 实现的使用和局限性。

开始使用新应用程序的团队通常不会为其构图模式选择边缘构图。但是，这种模式可能会为依赖嵌入的遗留应用程序提供一条途径。

服务器端合成

在页面缓存到边缘之前，使用源服务器来撰写页面。这可以通过传统技术（例如 PHP、Jakarta Server Pages (JSP) 或模板库）来完成，通过包含来自微前端的片段来撰写页面。您还可以使用服务器上运行的 JavaScript 框架（例如 Next.js），在服务器上使用服务器端渲染 (SSR) 来撰写服务器上的页面。

在服务器上呈现页面后，可以将其缓存在CDN上以减少延迟。部署新版本的微前端时，必须重新渲染页面，并且必须更新缓存以向客户提供最新版本。

服务器端组合需要对服务器环境有深入的了解，以建立部署、发现服务器端微前端和缓存管理的模式。

下图显示了服务器端的构成。

该图包括以下组件和流程：

1. Amazon CloudFront 为该应用程序提供了一个独特的入口点。该发行版有两个来源：第一个用于静态文件，第二个用于用户界面编辑器。

2. 静态文件托管在 Amazon S3 存储桶中。它们由浏览器和界面编辑器用于 HTML 模板。

3. UI 编辑器在中的容器集群上运行AWS Fargate。借助容器化解决方案，您可以根据需要使用流媒体功能和多线程渲染。

4. Parameter Store（一种功能）被用作基本的微前端发现系统。 AWS Systems Manager此功能提供了 UI 编辑器使用的键值存储，用于检索要使用的微前端端点。

5. 通知微前端将优化的 JavaScript 捆绑包存储在 S3 存储桶中。这会在客户端上呈现，因为它必须对用户交互做出反应。

6. 评论微前端由 Lambda 函数组成，用户评论存储在 Dynam oDB 中。评论的微前端完全在服务器端呈现，并输出一个 HTML 片段。

7. 产品详细信息微前端是一个低代码的微前端，它使用. AWS Step Functions Express Workflow 可以同步调用，它包含渲染 HTML 片段的逻辑和缓存层。

有关服务器端组合的更多信息，请参阅博客文章服务器端渲染微前端——架构。