微前端，将微服务理念扩展到前端开发

2021-04-27 18:03:26 阅读：140 来源： 互联网

由多个可以独立发布功能的团队构建现代Web应用程序的技术，策略和方法。

什么是微前端？

“微前端”一词最早于2016年底在ThoughtWorks Technology Radar中提出。它将微服务的概念扩展到了前端世界。当前的趋势是构建一个功能强大且功能强大的浏览器应用程序（也称为单页应用程序），该应用程序位于微服务架构之上。随着时间的流逝，通常由一个单独的团队开发的前端层会不断增长，并且变得更加难以维护。这就是我们所谓的Frontfront Monolith。

Micro Frontends背后的想法是将网站或Web应用程序视为由独立团队拥有的功能的组合。每个团队都有自己关心和专长的不同业务或任务领域。一个团队是跨职能的，并且从数据库到用户界面，端到端地开发其功能。

但是，这个想法并不新鲜。它与“独立系统”概念有很多共同点。在过去，类似的方法被称为“垂直系统的前端集成”。但是Micro Frontends显然是一个更友好，更轻巧的术语。

单体前端

垂直组织

什么是现代Web应用程序？

在引言中，我使用了“构建现代的Web应用程序”一词。让我们定义与此术语相关的假设。

为了更广泛地理解这一点，Aral Balkan写了一篇博客文章，介绍了他所说的“文档到应用程序连续体”。他用滑尺的概念上来，其中一个网站，内置了静态的文档，通过链路连接，是在左侧端和纯粹的行为驱动的，无内容的应用就像一个在线照片编辑器右侧。

如果您将项目放置在此范围的左侧，则非常适合在Web服务器级别进行集成。使用此模型，服务器从构成用户请求页面的所有组件中收集并连接HTML字符串。更新是通过从服务器重新加载页面或通过ajax替换页面的一部分来完成的。古斯塔夫·尼尔森·科特（Gustaf Nilsson Kotte）撰写了有关该主题的综合文章。

当您的用户界面必须提供即时反馈（即使是在不可靠的连接上）时，仅由服务器呈现的站点已不再足够。要实现诸如“乐观UI”或“骨架屏幕”之类的技术，您还需要能够在设备本身上更新UI 。 Google的“渐进式Web应用程序”一词恰当地描述了成为网络良好公民（渐进式增强功能）的平衡行为，同时还提供了类似于应用程序的性能。这种应用程序位于site-app-continuum中间的某个位置。在这里，仅基于服务器的解决方案已不再足够。我们必须移动集成到浏览器中，这是本文的重点。

微型前端背后的核心思想

不受技术影响每个团队都应该能够选择和升级其堆栈，而无需与其他团队进行协调。自定义元素是一种隐藏实现细节，同时为其他人提供中立接口的好方法。
隔离团队代码
即使所有团队都使用相同的框架，也不要共享运行时。构建自包含的独立应用程序。不要依赖共享状态或全局变量。
建立团队前缀
同意尚无法隔离的命名约定。命名空间CSS，事件，本地存储和Cookies，以避免冲突并阐明所有权。
与自定义API相比，本机浏览器功能更受青睐
使用浏览器事件进行通信，而不是构建全局的PubSub系统。如果您确实必须构建跨团队API，请尝试使其尽可能简单。
建立弹性站点
即使JavaScript失败或尚未执行，您的功能也应该很有用。使用通用渲染和渐进增强来改善可感知的性能。

DOM是API

Web组件规范中的互操作性方面，Custom Elements是在浏览器中集成的一个很好的原语。每个团队建立他们的组件使用他们所选择的网络技术，并把它包装自定义元素中（如<order-minicart></order-minicart>）。该特定元素（标记名，属性和事件）的DOM规范充当其他团队的合同或公共API。优点是他们可以使用组件及其功能，而无需了解实现。他们只需要能够与DOM交互即可。

但是，仅自定义元素并不能解决我们所有需求。为了解决渐进增强，通用渲染或路由问题，我们需要其他软件。

该页面分为两个主要区域。首先，我们将讨论页面组成-如何根据不同团队拥有的组件来组装页面。之后，我们将展示实现客户端Page Transition的示例。

页面组成

除了使用不同框架本身编写的代码的客户端和服务器端集成之外，还应该讨论很多附带主题：隔离js的机制，避免css冲突，按需加载资源，在团队之间共享公共资源，处理数据获取并考虑为用户提供良好的加载状态。我们将一步一步地涉及这些主题。

基本原型

该型号拖拉机商店的产品页面将作为以下示例的基础。

它具有一个变体选择器，可以在三种不同的拖拉机型号之间进行切换。更改产品图片时，名称，价格和建议会更新。还有一个“购买”按钮，将选择的变体添加到购物篮中，并在顶部增加一个迷你购物篮，并相应地进行更新。

在浏览器中尝试并检查代码

所有HTML都是使用纯JavaScript和没有依赖项的ES6模板字符串在客户端生成的。该代码使用简单的状态/标记分离，并在每次更改时重新呈现整个HTML客户端-无需花哨的DOM扩散，并且目前还没有通用呈现。也没有团队分离-代码被编写在一个js / css文件中。

客户端整合

在此示例中，页面分为三个团队拥有的单独的组件/片段。Team Checkout（蓝色）现在负责与购买过程有关的所有事情，即“购买”按钮和迷你购物篮。Team Inspire（绿色）在此页面上管理产品推荐。该页面本身归团队产品（红色）所有。

在浏览器中尝试并检查代码

团队产品决定要包括的功能以及在布局中的位置。该页面包含Team Product本身可以提供的信息，例如产品名称，图像和可用的变体。但是它也包括其他团队的片段（“自定义元素”）。

如何创建自定义元素？

让我们以“购买”按钮为例。团队产品包括仅添加<blue-buy sku="t_porsche"></blue-buy>到标记中所需位置的按钮。为此，Team Checkout必须blue-buy在页面上注册该元素。

class BlueBuy extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button type="button">buy for 66,00 €</button>`;
  }

  disconnectedCallback() { ... }
}
window.customElements.define('blue-buy', BlueBuy);

现在，每次浏览器遇到新blue-buy标签时，connectedCallback都会调用。this是对自定义元素的根DOM节点的引用。可以使用标准DOM元素的所有属性和方法，例如innerHTML或getAttribute()。

命名元素时，规范定义的唯一要求是名称必须包含破折号（-），以保持与即将到来的新HTML标记的兼容性。在接下来的示例中，将[team_color]-[feature]使用命名约定。团队名称空间可防止冲突，因此只需查看DOM，就可以清楚地了解功能的所有权。

亲子沟通/ DOM修改

当用户在变型选择器中选择另一台拖拉机时，必须相应地更新购买按钮。要实现此团队产品，只需从DOM中删除现有元素，然后插入一个新元素即可。

container.innerHTML;
// => <blue-buy sku="t_porsche">...</blue-buy>
container.innerHTML = '<blue-buy sku="t_fendt"></blue-buy>';

在disconnectedCallback旧元素被同步调用提供的元素与收拾东西像事件侦听器的机会。之后，将调用connectedCallback新创建的t_fendt元素的。

另一个性能更高的选项是仅更新sku现有元素上的属性。

document.querySelector('blue-buy').setAttribute('sku', 't_fendt');

如果Team Product使用具有DOM差异功能的模板引擎（如React），则将由算法自动完成。

为此，Custom Element可以实现attributeChangedCallback并指定observedAttributes应为其触发该回调的列表。

const prices = {
  t_porsche: '66,00 €',
  t_fendt: '54,00 €',
  t_eicher: '58,00 €',
};

class BlueBuy extends HTMLElement {
  static get observedAttributes() {
    return ['sku'];
  }
  connectedCallback() {
    this.render();
  }
  render() {
    const sku = this.getAttribute('sku');
    const price = prices[sku];
    this.innerHTML = `<button type="button">buy for ${price}</button>`;
  }
  attributeChangedCallback(attr, oldValue, newValue) {
    this.render();
  }
  disconnectedCallback() {...}
}
window.customElements.define('blue-buy', BlueBuy);

为了避免重复，render()引入了一种方法，该方法从connectedCallback和中调用attributeChangedCallback。此方法收集所需的数据，并收集innerHTML的新标记。当决定在Custom Element中使用更复杂的模板引擎或框架时，这里就是初始化代码的地方。

浏览器支持

上面的示例使用了Chrome，Safari和Opera当前支持的Custom Element V1 Spec 。但是，通过文档注册元素，可以使用轻量级且经过战斗测试的polyfill来使其在所有浏览器中都能正常工作。在后台，它使用了广泛支持的Mutation Observer API，因此在后台不会出现任何骇人的DOM树。

框架相容性

由于自定义元素是一种网络标准，因此所有主要的JavaScript框架（例如Angular，React，Preact，Vue或Hyperapp）都支持它们。但是，当您进入细节时，某些框架中仍然存在一些实现问题。Rob Dodson在“无处不在的自定义元素”中放出了一个兼容性测试套件，重点突出了未解决的问题。

亲子或兄弟姐妹交流/ DOM事件

但是，传递属性不足以进行所有交互。在我们的示例中，当用户单击“购买”按钮时，迷你购物篮应刷新。

这两个片段都属于Team Checkout（蓝色）所有，因此它们可以构建某种内部JavaScript API，该API可使迷你购物篮知道何时按下按钮。但这将要求组件实例彼此了解，并且也将成为隔离冲突。

较干净的方法是使用PubSub机制，其中组件可以发布消息，而其他组件可以订阅特定主题。幸运的是，浏览器内置了此功能。这正是浏览器事件怎么样click，select或者mouseover工作。除了本地事件，还可以使用创建更高级别的事件new CustomEvent(...)。事件始终与创建/调度事件的DOM节点相关。大多数本机事件还具有起泡功能。这样就可以侦听DOM特定子树上的所有事件。如果要侦听页面上的所有事件，请将事件侦听器附加到window元素。在blue:basket:changed示例中，-event的创建如下所示：

class BlueBuy extends HTMLElement {
  [...]
  connectedCallback() {
    [...]
    this.render();
    this.firstChild.addEventListener('click', this.addToCart);
  }
  addToCart() {
    // maybe talk to an api
    this.dispatchEvent(new CustomEvent('blue:basket:changed', {
      bubbles: true,
    }));
  }
  render() {
    this.innerHTML = `<button type="button">buy</button>`;
  }
  disconnectedCallback() {
    this.firstChild.removeEventListener('click', this.addToCart);
  }
}

迷你购物篮现在可以订阅此事件，window并在刷新数据时得到通知。

class BlueBasket extends HTMLElement {
  connectedCallback() {
    [...]
    window.addEventListener('blue:basket:changed', this.refresh);
  }
  refresh() {
    // fetch new data and render it
  }
  disconnectedCallback() {
    window.removeEventListener('blue:basket:changed', this.refresh);
  }
}

通过这种方法，迷你购物篮片段向其范围（window）之外的DOM元素添加了一个侦听器。对于许多应用程序这应该可以，但是如果您对此感到不舒服，则还可以实现一种方法，其中页面本身（团队产品）侦听事件并通过调用refresh()DOM元素通知迷你购物篮。

// page.js
const $ = document.getElementsByTagName;

$('blue-buy')[0].addEventListener('blue:basket:changed', function() {
  $('blue-basket')[0].refresh();
});

强制性地调用DOM方法并不常见，但是例如可以在video元素api中找到。如果可能，应首选使用声明式方法（属性更改）。

服务器端渲染/通用渲染

自定义元素非常适合在浏览器内部集成组件。但是，当构建一个可在Web上访问的站点时，初始负载性能很可能会变得很重要，并且在下载并执行所有js框架之前，用户将看到白屏。另外，最好考虑一下如果JavaScript失败或被阻止，站点将发生什么情况。杰里米·基思（Jeremy Keith）在他的电子书/播客“弹性Web设计”中解释了其重要性。因此，在服务器上呈现核心内容的能力是关键。可悲的是，Web组件规范根本没有涉及服务器渲染。没有JavaScript，没有自定义元素:(

自定义元素+服务器端包含=❤️

为了使服务器渲染正常工作，重构了前面的示例。每个团队都有自己的快递服务器，render()还可以通过url访问Custom Element的方法。

$ curl http://127.0.0.1:3000/blue-buy?sku=t_porsche
<button type="button">buy for 66,00 €</button>

“自定义元素”标记名称用作路径名-属性成为查询参数。现在，有一种方法可以通过服务器呈现每个组件的内容。与<blue-buy>-Custom Elements结合使用，可以实现与通用Web组件非常接近的功能：

<blue-buy sku="t_porsche">
  <!--#include virtual="/blue-buy?sku=t_porsche" -->
</blue-buy>

该#include注释是“服务器端包含”的一部分，该功能在大多数Web服务器中都可用。是的，这与过去将当前日期嵌入到我们网站上的技术相同。还有像一些替代技术ESI，nodesi，compoxure和裁缝，但对于我们的项目SSI已经证明了自己作为一个简单且非常稳定的解决方案。

该#include评论被替换的响应/blue-buy?sku=t_porsche之前，Web服务器发送完整的网页浏览器。nginx中的配置如下所示：

upstream team_blue {
  server team_blue:3001;
}
upstream team_green {
  server team_green:3002;
}
upstream team_red {
  server team_red:3003;
}

server {
  listen 3000;
  ssi on;

  location /blue {
    proxy_pass  http://team_blue;
  }
  location /green {
    proxy_pass  http://team_green;
  }
  location /red {
    proxy_pass  http://team_red;
  }
  location / {
    proxy_pass  http://team_red;
  }
}

该指令ssi: on;启用了SSI功能，upstream并location为每个小组添加了and块，以确保所有以开头的url都/blue将被路由到正确的应用程序（team_blue:3001）。此外，该/路线已映射到红色队，该红色队控制着主页/产品页面。

此动画显示了在禁用了JavaScript的浏览器中的拖拉机商店。

检查代码

现在，变体选择按钮是实际的链接，每次单击都会导致页面重新加载。右侧的终端说明了如何将页面请求路由到团队红色，该团队控制产品页面，然后标记由团队蓝色和绿色组成的片段进行补充。

重新打开JavaScript时，仅第一个请求的服务器日志消息将可见。像第一个示例一样，所有后续的拖拉机更改都在客户端进行处理。在后面的示例中，将根据需要从JavaScript中提取产品数据并通过REST API进行加载。

您可以在本地计算机上使用此示例代码。仅需要安装Docker Compose。

git clone https://github.com/neuland/micro-frontends.git
cd micro-frontends/2-composition-universal
docker-compose up --build

然后，Docker在端口3000上启动nginx并为每个团队构建node.js映像。在浏览器中打开http://127.0.0.1:3000/时，您应该会看到一个红色的拖拉机。结合在一起的日志docker-compose可以很容易地查看网络中发生了什么。遗憾的是，无法控制输出颜色，因此您必须忍受这样一个事实，即团队蓝色可能会以绿色突出显示：)

这些src文件被映射到各个容器中，并且当您更改代码时，节点应用程序将重新启动。更改nginx.conf要求重新启动docker-compose才能生效。因此，随时随处摆弄并提供反馈。

数据获取和加载状态

SSI / ESI方法的缺点是，最慢的片段确定整个页面的响应时间。因此，可以缓存片段的响应是很好的。对于生产成本高昂且难以缓存的片段，通常最好将其从初始渲染中排除。可以将它们异步加载到浏览器中。在我们的示例中green-recos，显示个性化推荐的片段就是这种选择。

一种可能的解决方案是，红色团队仅跳过SSI Include。

前

<green-recos sku="t_porsche">
  <!--#include virtual="/green-recos?sku=t_porsche" -->
</green-recos>

后

<green-recos sku="t_porsche"></green-recos>

重要说明：自定义元素不能自动关闭，因此编写<green-recos sku="t_porsche" />将无法正常进行。

渲染仅在浏览器中进行。但是，正如可以在动画中可以看出，这种变化现在推出了大幅回流的页面。推荐区域最初是空白的。团队果岭JavaScript已加载并执行。进行了用于获取个性化推荐的API调用。呈现推荐标记，并请求关联的图像。现在，该片段需要更多空间并推动页面布局。

有不同的选择来避免像这样令人讨厌的重排。控制页面的红色小组可以固定建议容器的高度。在响应式网站上，确定高度通常很棘手，因为对于不同的屏幕尺寸，高度可能会有所不同。但是更重要的问题是，这种团队间协议在红色和绿色团队之间建立了紧密的联系。如果绿色团队希望在reco元素中添加其他子标题，则必须与红色团队在新高度上进行协调。两个团队都必须同时推出自己的更改，以避免布局混乱。

更好的方法是使用一种称为“骨架屏幕”的技术。红色小组将green-recosSSI包括在标记中。另外，绿色团队更改了其片段的服务器端渲染方法，从而生成了内容的示意图。该骷髅标记可以重用的实际内容的布局样式的部分。这样，它可以保留所需的空间，并且实际内容的填充不会导致跳转。

骨架屏幕对于客户端渲染也非常有用。当您的自定义元素由于用户操作而被插入DOM时，它可以立即渲染框架，直到到达服务器所需的数据为止。

即使在诸如变量选择之类的属性更改上，您也可以决定切换到框架视图，直到新数据到达。这样，用户可以得到片段中正在发生某些事情的指示。但是，当您的端点快速响应时，新旧数据之间的短暂骨架闪烁也可能很烦人。保留旧数据或使用智能超时可以有所帮助。因此，请明智地使用此技术，并尝试获取用户反馈。

(本文由翻译自Michael Geers 的文章《Micro Frontends，extending the microservice idea to frontend development》，转载请注明出处，原文链接 https://micro-frontends.org/)

标签：blue,浏览器,理念,DOM,前端,元素,团队,前端开发,页面
来源： https://www.cnblogs.com/0591jb/p/14710168.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9