企业级 Web 组件。第二部分：Nuxeo、Ionic、Vaadin

Web Components 与前端生态系统中的几乎所有技术一样，既有支持者也有反对者。Paul Lewis 在 Fronteers 大会上宣布的演讲内容就提到了这种意见分歧。顺便一提，我认为具有象征意义的是，Web Components 最初就是在 2011 年由 Alex Russell提出的同一个大会上提出的。

我必须承认 Web Components 有其优势和劣势，但我认为它们值得更深入的研究。在我看来，这方面存在一些空白，而我正在努力填补这些空白。我的经验和社区的观察为我今年撰写的多篇博文奠定了基础，包括这个“企业级”系列，而且我还有一些内容想要分享。

上一篇文章主要讨论了企业级软件公司，它们非常重视所有权，会做出正确的决策，并紧跟网络标准。但对于许多公司而言，软件开发并非其核心业务，因此他们通常会将软件开发外包，尤其是在构建内部使用的Web应用程序时。

开发这类企业级应用可能充满挑战。由于它们无法为所有者带来直接收入，因此通常预算非常有限。与此同时，用户却可能花费一整天的时间在这些应用上。最后，这类应用的生命周期往往很长，这意味着需要数年的维护、支持和繁琐的漏洞修复工作。

在这篇博文中，我想介绍三家主要面向企业客户、使用 Web Components 构建 UI 开发平台的公司。需要说明的是：我是 Vaadin 的一名前端开发人员，Vaadin 也是本文提到的公司之一——因此，我尽量避免主观偏见，力求对所比较的技术进行较为公平的呈现。

Nuxeo

Nuxeo是一家软件公司，提供基于 Java 编写、采用 Apache 2.0 许可开源的企业内容管理平台。Nuxeo 声称其优势之一是“零遗留系统”和对创新的持续投入。在前端方面，Nuxeo 是 Web Components 规范的早期采用者之一，这印证了这一点。

2014年，谷歌在Chrome浏览器中实现了所谓的“v0”自定义元素和Shadow DOM提案，并积极推广这些提案。Nuxeo公司对Web Components所承诺的“使用平台”理念感到兴奋。因此，Nuxeo将这些前沿规范视为现有JSF技术栈的潜在替代方案。

Nuxeo平台的新客户端“Web UI 1.0”于2017年发布。它基于Web Components和Polymer 1构建（底层使用了HTML Imports和“v0”提案）。此外，用于构建Nuxeo Web应用程序的UI和数据可视化控件集合nuxeo-elements也已开源开发。

自决定使用 Web Components 以来，Nuxeo 发生了许多变化。特别是，元素集合已更新至 Polymer 3 并迁移至monorepo。此外，在 LTS 2019 版本中，JSF 已被弃用，并附有详细的说明。同时，一个用于将现有基于 JSF 的项目迁移到 Web UI 的迁移工具也已发布 beta 版。

Nuxeo于 2018 年宣布停止对 IE11 的支持，这是一项重要的决定。从他们关于“耗费大量时间”修复漏洞和性能问题的措辞中，我们可以理解这是经过一番艰难抉择后做出的决定。事实上，在迁移到 Web Components（Nuxeo 使用的是 JSF）时，IE11 需要一个备用方案。

离子

Ionic是一家软件公司，提供名为Ionic 框架的开源 MIT 许可的跨平台 UI 开发工具包，并提供商业服务和支持。Ionic 最初专注于使用 Cordova 和 Angular 构建移动设备的原生风格应用程序，后来开发了自己的工具：Stencil，一个用于 Web Components 和 PWA 的编译器。

根据最近的推文，Ionic 和 Stencil 的核心开发由 10 人负责，GitHub 上的团队也只有 15 位公开成员。然而，自 2013 年成立以来，Ionic 一直专注于打造企业级产品。这解释了他们为何选择 AngularJS，AngularJS 在 React 兴起之前曾风靡一时，但 React 的出现极大地改变了 JavaScript 的格局。

从2017年Polymer Summit大会上发布的Stencil alpha版本到2019年6月正式发布1.0.0稳定版，历时近两年。Ionic团队正在开发新功能，特别是与SSR相关的功能，SSR通常被认为是Shadow DOM的“缺点”之一。最近，Stencil团队分享了预渲染和客户端水合度功能的演示，作为未来的改进方向。

关于 Stencil，需要特别注意的一点是，尽管它基于 Web Components，但它将自定义元素视为编译目标。此外，Stencil 还提供了一套其认为是保持竞争力的关键创新功能：TypeScript、JSX、虚拟 DOM、响应式数据绑定和异步渲染（被描述为“类似于 React Fiber”）。

在 Max Lynch 最近的一篇博文中，他声称 Ionic 介于两种相互竞争的 Web Components 愿景之间。Stencil 提供的开发者体验既类似于 Angular（TypeScript、装饰器），也类似于 React（生命周期回调、JSX）。此外，Ionic 也顺应了 JS 框架社区的趋势，例如构建设计系统。

瓦丁

Vaadin是一家提供 Java Web 应用框架、组件和工具的公司。Vaadin 一直以来都基于 GWT，并自 2009 年起将其用于 UI 组件。当时，从 Java 编译到 JavaScript 是一项关键特性，但 Vaadin 在 2018 年放弃了 GWT，并在版本 10中采用了基于 Web Components 标准的 UI。

Vaadin 被誉为 Polymer 社区的先驱之一。早在 2015 年，Vaadin 就开始尝试使用 Web Components，并基于 Polymer 0.8 版本进行开发，最终创建了Vaadin Elements：一套旨在无缝扩展 Polymer 元素目录的组件。最初的 Vaadin Elements 包含 5 个元素，专注于功能丰富、复杂的控件，例如数据网格。

早期版本的 Vaadin Elements 依赖于 Paper Elements，并大量借鉴了 Paper Elements 的功能。正如 Rob Dodson 在 Polymer 播客节目“ Built with Polymer ”中提到的，Vaadin Elements 的扩展规模也超越了 Polymer 团队的范畴。然而，随着时间的推移，对代码库、版本控制和外观的所有权，尤其是完全控制权的需求变得日益凸显。

事实证明，能够实现自定义主题（不局限于 Material Design）是客户项目的关键特性。因此，我们扩展了 Vaadin 组件，添加了所有基本元素：按钮、文本框、叠加层等等。此外，我们还提出了自己的主题化方案，摒弃了@applyPaper Elements 中已弃用的 CSS mixins 方案和语法。

截至目前，Vaadin 组件默认使用Lumo主题，并提供 Material 版本作为备选方案。组件集不断发展完善，我们在改进过程中积累了丰富的经验，包括为 polyfill 做出贡献以及修复浏览器 bug。最终，我们的组件现已集成到Vaadin Flow 框架中，该框架为 Java 用户提供 Web Components 支持。

概括

企业内部 Web 应用自成一派。它们被保密协议严密保护，充斥着陈旧过时的技术，有时甚至与现代趋势脱节，比如追求极简的软件包体积——谁会在意在高速的企业内网中下载 500 kB 的 JS 文件呢？但某些旨在服务于这些应用的产品却采用了 Web Components 构建。

Nuxeo、Ionic 和 Vaadin 都是提供此类产品的公司。它们都提供长期支持 (LTS)，Ionic提供高级功能， Nuxeo提供 3 年支持，Vaadin提供 5 年支持。除了可以筹集资金并确保网络平台多年稳定运行之外，我还想概述一些我认为我们可以从中吸取的其他经验教训：

1. 灵活性。一些偏好函数式编程的人一直抱怨自定义元素的设计是基于类的。但 DOM API 使用类语法和原型继承这一事实，不应限制任何人实现自己的抽象层：钩子、对象，甚至是 DOM 树的服务器端表示。

2. 主题化能力。将 Shadow DOM 与自定义 CSS 属性结合使用来实现主题化，似乎是 Web 平台一项被低估的功能。大多数开发者仍然坚持使用全局 CSS 和类名约定，而理论上我们现在拥有更具可扩展性和可靠性的解决方案。“适者生存”的法则正在发挥作用吗？

3. IE11：一个致命的缺陷。尽管 Web Components polyfill 支持 IE11，但几乎不可能确保大型应用程序在该“兼容方案”下正常运行。在企业环境中，应用程序通常需要在 IE11 下运行，而这实际上意味着需要一个单独的版本（例如 YouTube 就有一个）。

人们希望随着时间的推移，越来越多的企业会开始考虑使用 Web Components，尤其是在Firefox ESR 68 发布之后。截至撰写本文时，该版本正处于所谓的资格认证和测试阶段。自 Firefox 63 起就已提供的自定义元素和 Shadow DOM 支持，也将因此惠及更广泛的用户群体。

就我个人而言，我希望今年晚些时候能有足够的素材来撰写本系列的下一篇博文。而读者朋友们，你们的帮助至关重要。如果贵公司正在使用 Web Components，请在评论区留言，分享你们的经验！当然，也欢迎你们提出任何其他反馈意见，我非常感激，这能激励我不断创作。