规模发展

微服务现在已经众所周知好几年了，并被广泛采用。但前端通常仍然是整体式的。这种应用程序结构通常反映在团队结构上：有几个独立的后端团队和一个单一的前端团队。这也阻止了后端开发团队提供完整的可用功能——他们总是缺少前端。要实施前端，所有更改必须由一个前端团队完成。这使得规模化开发变得困难。通过实现微型前端，我们可以组建一个完整的团队，他们可以自己发布完整的功能。这也是ThoughtWorks连续第三次将微型前端放在其著名技术雷达的“采用”部分的原因之一！

微前端组成

对于我们的用例，微型前端由标记（HTML）、样式（CSS）、脚本（JavaScript）和图像组成。我们希望在我们的页面中组成不同的微前端，或通常称之为“片段”。一些片段是交互的。一些片段可能依赖于某些片段。一些片段可能希望与其他片段交互。

有两种方法可以集成来自微前端的片段：客户端和服务器端。两者各有利弊。我们正在比较服务器端组合的不同方式，因为我们专注于搜索引擎优化。谷歌现在支持很多JavaScript，但索引需要更长的时间，这对一个频繁变化的网站是不利的，而其他一些爬虫根本不支持JavaScript。

此外，通过服务器端组合，对慢速移动客户端（如智能手机）的支持更好。移动客户端通常具有较慢的互联网连接，因此它们可以从较小的下载负载中获益。它们的计算能力也较低，因此它们可以从预先呈现的HTML中获益。

服务器端包括（SSI）

SSI是一种简单的服务器端脚本语言，允许使用条件语句并包含来自文件和URL的其他片段。

要在页面中包含另一个片段，请添加和SSI标记，如<--#include virtual=“/url/to/include”->。web服务器获取片段并用片段的内容替换SSI标记。组合输出返回给客户端。

要想更深入地了解SSI的作品，请看我的同事Artun Subasi去年在duesentrieb夏令营所做的介绍。

赞成的意见

• 久经考验
• 在Nginx、Apache和其他web服务器中得到很好的支持
• 支持超时和回退内容

弊端

• 片段以并行方式获取，但仅在获取最后一个片段后交付（Nginx）
• 没有对资产处理的内置支持。ApachePageSpeed（谷歌以前称为modpagespeed）可以进行一些CSS处理并结合片段中的CSS，但自2018年初以来没有收到任何更新，似乎已经死了

边缘侧包括（ESI）

ESI是一种简单的标记语言，允许包含来自其他URL的片段。

ESI的工作原理与SSI非常相似。ESI更侧重于反向代理或CDN层，而SSI则针对web服务器本身。当然，这些边界有些模糊，因为Nginx也经常用作反向代理。ESI本身没有条件逻辑。但Varnish允许在其自己的DSL（称为“VCL”）中使用条件逻辑。

赞成的意见

• 久经考验
• 清漆支持良好（并行抓取需要商业版）。Squid（项目网站已经过时，但有新版本）和Mongrel（自2010年以来没有新版本）也支持它

弊端

• 没有内置的超时支持。专有扩展确实存在。
• 互斥，使用基于CDN的ESI进行缓存
• 没有对资产处理的内置支持

Zalando Tailor

Tailor是一个节点。基于js的片段服务由Zalando开源，作为独立服务运行。它是Mosaic项目的一部分——Zalando的伞式项目——前端模块化。

Zalando Tailor使用自定义标记组成页面。它们定义<fragment src=”http://www.example.com“>-用于指定要加载的片段的标记。可以通过链接头由片段本身填充资源，如样式和脚本。

赞成的意见

• 对资产处理的内置支持
• 作为第一方概念的碎片
• 立即异步获取多个片段和流

弊端

• 专有解决方案，需要带有样式和AMD JS绑定的自定义链接头

Podium

Podium也用JavaScript实现并在节点上运行。js。它是由挪威芬恩公司开发的。没有他们的分类广告网站。Podium是一个将片段（他们称之为“podlet”）集成到页面（他们称页面为“布局”）中的库。

要运行podium，您至少需要两个实例：一个布局服务器和至少一个podlet服务器。podlet服务器公开片段，布局服务器将其集成到页面中。每个片段都需要公开一个“Podlet清单”，其中包含JSON数据资产，并且可能包含回退URL。布局服务器最初获取回退内容，并在Podlet服务器不可用时将其缓存。

赞成的意见

• 内置资产处理支持（片段需要公开元数据端点）
• 作为第一方概念的碎片
• 内置代理支持隐藏片段服务器
• Fragement服务器可以定义回退内容

弊端

• 专有解决方案，与库紧密耦合

最后的想法和建议

ESI和SSI是经过良好测试的稳定技术，易于学习。像Varnish的VCL这样的定制添加增加了复杂性，但引入了许多新的可能性。一般来说，这些解决方案对于资产处理并没有很好的解决方案，并且难以满足现代web应用程序的需求。

像Tailor和Zalando这样的更现代的解决方案解决了老式工具存在的许多问题。但是，他们引入了公平份额的复杂性，并有自己的学习曲线。这两个工具或多或少都是一个人的表演（如果你看贡献日志的话）。所以你应该准备好介入并继续发展，如果是Zalando或Finn。如果您将这些产品中的任何一种作为应用程序的基石，就不要放弃他们的解决方案。

为了更广泛地了解合成技术（包括客户端合成），我可以推荐bluesoft的这篇关于微前端的文章。如果你对微前端感兴趣，你应该看看MichaelGeers的《微前端行动》。

参考：

• 原文：https://www.esentri.com/composing-micro-frontends-server-side/
• 本文：http://jiagoushi.pro/node/1540