网络组件：帮助推动网络发展的秘密成分

2019 年 I/O 大会上的 Web 组件

Arthur Evans
X GitHub

发布时间：2019 年 6 月 18 日

在 2019 年 Google I/O 大会上，Polymer 项目的 Kevin Schaaf 和 Salesforce 的 Caridy Patiño 讨论了 Web 组件的现状。

如果您今天使用过网络，那么很可能使用过 Web 组件。据我们统计，目前大约有 5% 到 8% 的页面加载使用了一个或多个 Web 组件。这使得 Web 组件成为过去五年中发布的最成功的新 Web 平台功能之一。

一张图表，显示 8% 的网站使用 v1 自定义元素。这一数字远超 v0 自定义元素的 5% 最高点。

您可以在日常使用的网站（例如 YouTube 和 GitHub）上找到 Web 组件。此外，许多使用 AMP 构建的新闻和发布网站也使用它们，因为 AMP 组件也是 Web 组件。许多企业也在采用 Web 组件。

什么是 Web 组件？

那么，什么是 Web 组件？Web Components 规范提供了一组低级 API，可用于扩展浏览器的内置 HTML 标记集。Web 组件提供：

  • 一种用于创建组件的常用方法（使用标准 DOM API）。
  • 一种常用的接收和发送数据的方式（使用属性/事件）。

除了该标准接口之外，标准并未规定组件的实际实现方式：

  • 用于创建其 DOM 的渲染引擎。
  • 如何根据属性或特性的变化自行更新。

换句话说，Web 组件会告知浏览器何时以及何处创建组件，但不会告知浏览器如何创建组件。

作者可以选择与 React 类似的功能性渲染模式来构建其 Web 组件，也可以使用声明性模板（如您在 Angular 或 Vue 中可能看到的）。作为作者，您可以完全自由地选择在组件内部使用的技术，同时仍保持互操作性。

Web 组件有哪些用途？

Web 组件与专有组件系统之间的主要区别在于互操作性。由于它们具有标准接口，因此您可以在使用内置元素（如 <input> 或 <video>）的任何位置使用 Web 组件。

由于它们可以表示为真实的 HTML，因此可以由所有热门框架进行渲染。这样一来，您的组件就可以在更多不同的应用中得到更广泛的应用，而不会将用户锁定到任何一个框架中。

由于组件接口是标准接口，因此使用不同库实现的 Web 组件可以混合在同一页面上。当您更新技术堆栈时，这一事实有助于确保您的应用在未来继续可用。您无需像从一个框架迁移到另一个框架那样替换所有组件，而是可以一次更新一个组件。

谁在使用 Web 组件？

因此，出于上述所有原因，Web 组件在各种不同的应用场景中都取得了巨大成功。以下三种使用情形尤其受欢迎：内容网站、设计系统和企业应用。

展示广告网络网站

Web 组件是逐步增强内容的理想技术，因为无数 CMS 系统已经能够将它们输出为标准 HTML。

AMP 是一个很好的示例，展示了 Web 组件如何快速轻松地融入发布行业的内容服务基础设施。

设计系统

越来越多的公司正在使用设计系统（一套用于定义组织网站和应用的通用外观和风格的组件和准则）来统一其展示方式。Web 组件也非常适合这种情况。

Material Design 首页，网址为 https://material.io。

通常，设计师必须应对许多团队基于 React、Angular 和所有其他框架构建自己的设计系统组件版本，而不是使用一组规范组件。

Web 组件就是答案，它是一个真正的一次编写、随处运行的组件系统，同时仍允许应用团队自由使用他们选择的框架

ING、EA 和 Google 等公司正在 Web 组件中实现其公司设计语言。

企业：Salesforce 的 Web 组件

Web 组件作为一种安全且不会过时的标准化技术，在企业内部也取得了显著进展。Salesforce 界面平台架构师 Caridy Patiño 解释了他们为何使用 Web 组件构建界面平台。

Salesforce 是一系列应用的集合，其中许多应用是通过收购获得的。这些服务中的每项都可能在自己的技术堆栈上运行。由于它们基于不同的堆栈构建，因此很难让它们具有相同的外观和风格。此外，Salesforce 还支持客户使用 Salesforce 平台构建自己的自定义应用。因此，理想情况下，外部开发者也应该能够使用这些组件。

Salesforce 发现其平台客户存在以下需求：

  • 标准解决方案，而非专有解决方案，因此更容易找到经验丰富的开发者，并且新开发者可以更快地进入工作状态。
  • 通用组件模型 - 因此，自定义任何 Salesforce 应用的方式都相同。

他们还发现了一些客户不想要的东西：

  • 组件和应用的破坏性变更。换句话说，必须实现向后兼容性。
  • 被旧技术所困，无法发展。
  • 被困在围墙花园里。

使用 Web 组件作为新界面平台的基础满足了所有这些需求，最终诞生了新的 Lightning Web 组件。

Web 组件使用入门

有很多很棒的方法可以开始使用 Web 组件。

如果您要构建 Web 应用，不妨考虑使用许多可用的标准 Web 组件。以下是几个示例：

  • Google 以 Web 组件的形式提供自己的 Material Design 系统：Material Web Components。
  • Wired Elements 是一组很酷的 Web 组件，具有草图式的手绘外观。
  • 还有一些出色的专用 Web 组件，例如 <model-viewer>，您可以将其放入任何应用中以添加 3D 内容。

如果您要为公司开发设计系统，或者要销售可在任何环境中使用的单个组件或库，请考虑使用 Web 组件来创作组件。您可以使用内置的 Web 组件 API，但它们属于低阶 API，因此有许多库可供您选择，以简化该过程。

如需开始构建自己的组件，您可以查看 LitElement，这是 Google 开发的 Web 组件基类，具有与 React 类似的出色功能渲染体验。

可考虑的其他工具和库：

  • Stencil 是一个以 Web 组件为优先的框架。它包含多项热门框架功能，例如 JSX 和 TypeScript
  • Angular Elements 提供了一种将 Angular 组件封装为 Web 组件的方法。
  • Vue.js Web 组件封装容器提供了一种将 Vue 组件打包为 Web 组件的方法。

更多资源：

  • open-wc.org 提供了出色的入门信息，以及有关构建和开发工具的提示和默认配置。
  • 网站开发基础提供了有关基本 Web 组件 API 的入门知识，以及设计 Web 组件的最佳实践。
  • MDN 提供了 Web 组件 API 的参考文档以及一些教程。