【微前端】在服务器端构建微前端
规模发展
微服务现在已经众所周知好几年了，并被广泛采用。但前端通常仍然是整体式的。这种应用程序结构通常反映在团队结构上：有几个独立的后端团队和一个单一的前端团队。这也阻止了后端开发团队提供完整的可用功能——他们总是缺少前端。要实施前端，所有更改必须由一个前端团队完成。这使得规模化开发变得困难。通过实现微型前端，我们可以组建一个完整的团队，他们可以自己发布完整的功能。这也是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的《微前端行动》。
参考：
- 36 次浏览