原文地址：www.nexmo.com/blog/2020/0…
原文作者：www.nexmo.com/blog/author…
发布时间：2020年5月20日
在上一篇文章中，我们学习了Web组件的基础知识。最后，我们提供了建立一个基本示例所需的代码。在开发中，事情很少是 "简单 "的。构建Web组件可能涉及到大量的模板代码。如果你的计划是创建多个组件，这可能会变得非常繁琐。
Web组件工具是这个问题的完美解决方案。它们可以帮助将一些模板抽象成更干净的代码，并提供更高效的工作流程。同样，与开发一样，有许多工具可供选择，都是基于对创建Web组件的最佳方式的不同意见。
在这篇文章中，我们将通过这些工具中的一些工具并对它们进行比较。同样的组件将被构建，这样可以突出代码的差异。除了代码，我们将比较的其他标准是。
- 功能 我们能从盒子里得到什么？
- 文档：我们得到了什么？示例？清晰的说明？入门项目？
- 设置的方便性。是否有很多步骤来启动一个网络组件？
- 支持：论坛、Discord、Slack、社区、博客/文章、YouTube、GitHub等。论坛、Discord、Slack、社区、博客/文章、YouTube、GitHub。
- 支持。谁在维护这个工具？谁在使用它？
在做研究的时候，我发现了一个网站，它是开发人员构建Web组件的游乐场，WebComponents.dev。该网站列出了它所有的许多功能，但我们将利用的是创建相同的入门Web组件，一个计数器，只需点击一下。该网站提供了各种各样的工具来使用。
当你开始在WebComponents.dev上进行构建或者在你的研究中，你会在描述一个工具时看到 "库 "或 "编译器 "等术语。区别就在于Web组件何时被使用。对于库来说，组件依赖于用来处理渲染和更新的工具。相比之下，编译器在创建组件时有一个构建步骤，会生成工作所需的代码，而不需要以后的工具。
现在我们来比较一下吧!
纯粹的JavaScript
作为一个基线，让我们看看用纯粹的JavaScript创建Counter组件需要做些什么。
首先，我们扩展HTMLElement基类作为我们的Web组件的起点。
计数器的值被设置为0。
然后将组件的模板设置为html，样式设置为style。
模板和样式被附加到Shadow DOM中，我们可以在页面上看到它。
一旦呈现出来，我们就可以得到不同部分的引用，并对组件的动作进行带。
接下来，我们定义组件的函数inc()、dec()和update()。注意每当调用 inc()和 dec()时， update()也会被激活。否则，计数器的值永远不会改变。
然后我们有组件的connectCallback()和disconnectedCallback()生命周期方法。当组件被添加或从页面中移除时，这些方法会被调用。在这里，我们正在从按钮中添加和删除事件监听器。这一点非常重要，尤其是在做定时器等事情时，可以防止内存泄漏。你可以在MDN web docs上找到更多关于生命周期回调的信息。
最后，使用customElements.define将新的Class附加到自定义元素名上。
如果你构建的组件并不比这个例子复杂多少，Vanilla JavaScript选项可能适合你。这样你就不用担心 "库锁定 "的问题了。
如果这似乎是太多的模板和/或你想创建很多具有更多功能的组件，一个工具可能适合你。
下面是众多选项中的几个。
hybrids
乍一看计数器组件的代码，你可能会发现缺少一个Class。
他们网站上的第一行解释了这一点。"Hybrids是一个用于创建网络组件的UI库，它具有很强的声明性和功能性，基于普通对象和纯函数。"
所以，如果你喜欢函数式编程，Hybrids可能是你的Web组件库。
功能介绍
当一个工具的文档中列出其所有功能的要点时，我真的很感激。这里是直接从他们的网站上下载的。
- 最简单的定义--只有普通的对象和纯函数--没有类和这种语法。
- 没有全局生命周期--独立的属性有自己的简化生命周期方法。
- 继承之上的组成--易于重复使用、合并或拆分属性定义。
- 超快的重新计算--内置智能缓存和变化检测机制
- 不需要外部工具的模板--基于标记模板字面的模板引擎。
- 包含的开发工具--支持热模块替换，实现快速、愉快的开发。
文件资料
该文档由Gitbook提供，它提供了一个非常干净和有组织的布局。由于 hybrids 采用了一种新颖的方法，通过使用纯函数来创建 Web 组件，因此需要对一些核心概念和其他方面进行解释。文档很好地做到了这一点，提供了大量的代码片段（带有复制到剪贴板的按钮）和在StackBlitz上进行示例实验的链接。
易于设置
你可以像使用其他库一样使用hybrids。
将它安装到你的项目中
npm i hybrids
并导入到您的文件中使用
import { html, define } from 'hybrids';
还可以选择使用 ES 模块或链接到 unpkg 文件。
支持
我发现关注hybrids开发的主要方式是GitHub和Gitter。在写这篇文章的时候，这个库正在积极开发中。
@hybridsjs Twitter账户似乎并不活跃。
除了几篇关于hybrids的演讲外，关于构建Web组件的内容并不多。
文档链接到dev.to上的一些文章。
背书
似乎hybrids的创造者Dominik Lubański也是该库的唯一维护者。 我找不到在生产中使用hybrids的公司/组织名单。
Lightning Web Components
比较使用Lightning Web Components (LWC)和Vanilla JavaScript创建计数器的代码，你可以看到很多代码都被抽象化了。请注意，LWC不是扩展一个HTMLElement，而是扩展一个LightningElement。
Lightning Web Components是由Salesforce开发的。诚然，我没有Salesforce的经验。所以在研究的时候，我有点被所有不同的与Salesforce平台集成的方法给绕晕了。在本篇文章中，重点将只放在用Lightning Web Components创建Web Components上。但是，如果你是一名Salesforce开发者，并且想要为生态系统创建Web Components，我认为使用LWC不会错。更多关于这方面的信息可以在这里找到。
功能介绍
如他们网站上列出的Lightning网页组件（注：Lightning网页组件是框架，Lightning网页组件是创建的组件。大写很重要。）是。
- Lightning Fast - 精简，7kb的运行时间优化了性能，最小的模板代码。
- 基于标准--Lightning Web Components使用标准的HTML、现代JavaScript（ES6+）和最好的本地Web Components。
- 简单易学--抛开抽象概念，使用HTML、JavaScript和CSS构建自定义元素。
这似乎是很多Web组件工具的标准说法。
文档介绍
在Salesforce上的不同地方都有关于LWC的文档。 有lwc.dev，它有一个带有交互式代码片段的指南。它给了你一些信息，并提出了一些小的挑战，让你输入到代码编辑器中并立即看到结果。
另一套文档在developer.salesforce.com域名上。这可能是lwc.dev网站之前使用的。其关于lwc的信息比较多，但互动性较差。
易于设置
Lightning Web Components有一个脚手架工具，只需几条命令就能让一个应用程序启动并运行。
npx create-lwc-app my-app
cd my-app
npm run watch
也可以通过使用-t pwa标志来制作渐进式网络应用（PWA）。
支持
在这个页面上，它列出了了解更多关于LWC的方法。有一个Salesforce Stack Exchange论坛的链接，可以提问。你可以参加Pluralsight和Salesforce Trailhead的课程。在YouTube上搜索Lightning Web Components，会返回很多人们演示如何创建组件的结果。
背书
如前所述，这是一个Salesforce项目，看起来有一个工程师团队在做这个项目。
至于谁在使用它，Lightning Web Components与他们的平台非常兼容，很多Salesforce开发者都在使用它。
LitElement
(注意：TypeScript也可以用来用LitElement构建Web组件。) 快速浏览一下代码，看起来好像用Vanilla JavaScript和LitElement构建的组件之间没有什么区别。一个小而显著的区别是组件模板的更新方式。
正如网站上所说，"LitElement使用lit-html来定义和渲染HTML模板。DOM更新是闪电般的，因为lit-html只重新渲染你的UI的动态部分--不需要差异化。"
这在一定程度上归功于标签化的模板文字。
功能介绍
对于 "为什么使用LitElement？"这个问题，他们的回答包括。
- "令人愉悦的声明式" - 在你的模板中使用JavaScript。
- "快速轻巧"--就像之前提到的，由于更新方式只对改变的部分进行重新渲染，更新速度更快。
- "无缝互操作"--由于LitElement遵守Web Components制定的标准，它的组件可以独立存在，也可以与任何前端框架或库兼容。
这也是很多Web组件工具的说法。
文档介绍
文件是相当简约的。只有三个部分。
- Try：一步步演练创建一个内嵌StackBlitz代码编辑器的Web组件。
- 指南：更深入地了解LitElement，也有一个内嵌的代码编辑器。
- API：一个API探索器
易于设置
指南的入门部分指出，您可以创建一个独立的组件，也可以创建一个专门用于应用程序的组件。
创建独立组件的第一步是下载一个启动项目（JavaScript或TypeScript）。
安装它的依赖项。
如果你使用的是TypeScript版本：npm run build或npm run build:watch。
然后npm run serve。
将LitElement添加到现有项目的过程是标准的。
安装库: npm i lit-element
创建一个组件。
导入该组件。
使用该组件。
另一种设置方案是使用Open Web Components生成器。这是一个交互式的CLI，它将为一个单一的Web组件或一个启动应用程序提供支架。
支持
在LitElement网站的社区部分，有一些资源的列表。其中包括一个Slack工作区，一个非常活跃的Twitter账户，一个邮件列表，当然还有StackOverflow。
背书
LitElement是由Google开发的Polymer项目的一部分。
在Polymer的GitHub上有一个Wiki，列出了谁使用过Polymer / LitElement。当然，这其中包括谷歌的各种属性，但也包括可口可乐、麦当劳、EA等。
Stencil
当看Stencil用来创建计数器组件的代码时，代码中有一些'@'。这些是来自TypeScript的装饰器。Stencil用它们来抽象一些模板代码。
在他们的网站上，Stencil希望人们知道，该工具的一个目标是让创建Web组件变得尽可能简单。
"与直接使用Custom Elements相比，Stencil提供了额外的API，使得快速组件的编写变得更加简单。"
功能介绍
在网站的首页和介绍中，Stencil一定要说明它是一个编译器。一旦Web组件生成，它就不再依赖Stencil了。
Stencil确保清楚地说明它的功能。
- 基于Web组件
- 异步渲染管道
- 支持TypeScript
- 单向数据绑定
- 组件预渲染
- 简单的组件懒加载
- JSX支持
- 无依赖性组件
- 虚拟DOM
- 静态网站生成(SSG)
文件资料
用一个词来形容钢网文档，那就是完整。你可以看出，在整理它的过程中投入了大量的时间和精力。
第一部分，Introduction，首先介绍了为什么Stencil存在。
之后，还有一些小节。
- 目标和宗旨 - Stencil的目标和价值主张。
- 我的第一个组件--钢网组件示例分解
- FAQ--一个相当长的、有条理的答案清单。
- 什么是设计系统？- 文档中花时间定义了什么是设计系统!
- Stencil for Design Systems - 在前面的部分，他们教育您，然后告诉您Stencil如何为您创建它们。
同样，这只是第一部分! 文档涉及到组件的各个方面，如何将生成的组件集成到流行的FrontEnd框架中，配置选项，指南，测试等等。我从来没有一个问题没有得到文档的解答。
易于设置
在文档的介绍部分，有一个 "入门 "的部分。 Stencil有一个交互式的CLI工具，运行npm init stencil可以创建一个Web组件、一个Stencil应用程序或一个生产用的Progressive App。
运行npm init stencil可以创建一个Web组件，一个Stencil应用程序，或者一个生产就绪的Progressive Web App。
支持
在社区部分，有Twitter、Slack和GitHub的链接。还有很多关于模板的YouTube视频和文章/博客帖子。
背书
Stencil是由Ionic核心团队和社区提交的贡献一起维护的。
在首页的显著位置显示的是使用Stencil的公司的标志。列出了苹果、亚马逊、保时捷、Arm、Panera和微软。
结束语
这些只是不断增长的构建Web组件的工具列表中的一部分。如果这些工具都不符合您的开发者清单，我会看看WebComponents.dev 上还有哪些工具。对于我们Vonage来说，我们决定使用Stencil。有了TypeScript的支持，伟大的文档，以及创建设计系统的能力，我们已经完成了大部分的Web组件项目。
在下一篇文章中，我们将从头到尾用Stencil建立一个Web组件。
你有使用这些工具中的任何一个建立Web组件吗？也许还有我们没有提到的工具？你的经验是什么？请在评论区告诉我们。
