原文地址：dev.to/webpadawan/…
原文作者：dev.to/webpadawan
发表时间：2019年7月24日 ・7分钟阅读
Web Components，就像前端生态系统中的几乎所有技术一样，有支持者也有反对者。今年Paul Lewis在Fronteers的演讲公告中就提到了舆论的两极性。顺便说一下，我认为这将是一个象征性的会议，在2011年Alex Russell最初介绍Web Components的地方。
虽然我必须承认，Web Components有优点也有缺点，但我认为它们值得更深入的研究，在我看来，这里有一定的空白，我正在努力填补。我的经验和社区的观察成为我今年写的几篇博文的基础，包括这个 "企业 "系列，我仍然有一些东西要讲。
上一篇文章是关于企业级软件公司的，非常重视所有权，做出正确的决策，并与网络标准保持同步。但有很多企业的软件开发并不是核心领域，所以他们通常会将其外包出去，尤其是在构建内部使用的Web应用程序时。
创建这种企业级的应用程序可能是具有挑战性的。它们通常是在预算紧张的情况下建立的，因为它们不会给所有者带来任何直接收入。同时，这些应用程序，用户可以花整个工作日的时间。最后，这样的应用程序往往有很长的寿命，这意味着多年的维护，支持和痛苦的错误修复。
在这篇博文中，我想介绍三家公司，他们使用Web Components创建了主要针对企业客户的UI开发平台。一个必要的免责声明：我是一个在Vaadin工作的前端开发人员，这里列出的公司--所以我试图通过提供或多或少的平等代表比较技术来避免偏见。
Nuxeo
Nuxeo是一家软件公司，提供一个用Java编写的企业内容管理平台，并在Apache 2.0许可下开源开发。Nuxeo声称 "零遗留 "和投资创新是其优势之一。在前端方面，Nuxeo是Web Components规范的早期采用者之一，这一点可以得到证实。
2014年，谷歌已经在Chrome浏览器中实现了所谓的 "v0 "Custom Elements和Shadow DOM提案，并在积极倡导。Nuxeo属于对Web Components所承诺的 "使用平台 "方式感到兴奋的公司。因此，Nuxeo将这些前沿规范视为现有JSF堆栈的潜在替代品。
2017年，Nuxeo平台的新客户端 "Web UI 1.0 "呈现了。它是用Web Components和Polymer 1构建的（当时使用的是HTML Imports和 "v0 "提案下的引擎）。另外，nuxeo-elements是一个不断发展的UI和数据可视化控件的集合，用于用Nuxeo构建Web应用程序，它已经被开源开发。
自从决定使用 Web Components 后，Nuxeo 有了很多变化。特别是，元素集合现在已经更新到了Polymer 3，并移到了monorepo。最后，JSF已经在LTS 2019版本中被废弃，并给出了动机解释，一个帮助将现有基于JSF的项目转换为Web UI的迁移工具已经在测试版中发布。
Nuxeo做出的一个重要决定是终止对2018年宣布的IE11的支持。根据关于 "投入过多的时间 "修复bug和性能问题的措辞，我们可以理解，这是经过一番挣扎后的艰难抉择。现实情况是，IE11在转移到Web组件（Nuxeo的话是JSF）时需要备份解决方案。
Ionic
Ionic是一家软件公司，提供开源的MIT授权的跨平台UI开发工具包，名为Ionic框架，并提供商业服务和支持。最初专注于使用Cordova和Angular为移动设备构建原生风格的应用，最终Ionic推出了自己的工具。Stencil，一个针对Web Components和PWAs的编译器。
根据最近的推文，Ionic和Stencil的核心开发由10人负责，GitHub上的团队只有15名公开成员。然而，自2013年成立以来，Ionic一直专注于打造一款面向企业使用的产品。这也解释了为什么选择AngularJS，在React崛起严重影响JS格局之前，AngularJS曾经很流行。
在2017年聚合物峰会上宣布的Stencil alpha花了近2年时间，到2019年6月作为1.0.0稳定版登陆。Ionic团队正在开发新的功能，尤其是与SSR相关的功能，而SSR通常被提到是Shadow DOM的 "缺点 "之一。最近，Stencil团队分享了预渲染和客户端补水的演示，作为未来的改进。
关于Stencil的一个重要注意点是，虽然它是基于Web Components的，但它将Custom Elements作为一个编译目标。除此之外，Stencil还提供了一套据称是保持竞争力的关键创新功能。TypeScript，JSX，虚拟DOM，反应式数据绑定和异步渲染（被描述为 "类似于React Fiber"）。
在Max Lynch最近的博文中，Ionic被宣称是 "处于两个关于Web Components的竞争性愿景的中间"。Stencil提供的开发者体验既类似于Angular（TypeScript、装饰器），也类似于React（生命周期回调、JSX）。同时，Ionic也紧跟JS框架社区周围的趋势，比如构建设计系统。
Vaadin
Vaadin是一家为用Java构建Web应用提供框架、组件和工具的公司。从历史上看，Vaadin一直采用GWT，并从2009年开始将其用于UI组件。从Java到JavaScript的编译是当时的一个关键功能，但在2018年，Vaadin已经摆脱了GWT，并发布了基于Web Components标准的UI的10版本。
Vaadin被称为Polymer社区的先驱之一。早期的Web Components实验始于2015年的Polymer 0.8，结果创建了Vaadin Elements：一套组件，旨在成为Polymer元素目录的无缝扩展。最初的集合包含5个元素，并专注于功能丰富的复杂控件，如data grid。
早期版本的Vaadin Elements曾经依赖于Paper Elements，并从中利用了很多东西，同时也是超越Polymer团队的一个例子，Rob Dodson在 "Built with Polymer "多播集中提到了这一点。然而，随着时间的推移，对所有权，特别是对代码库、版本和外观的完全控制的需求已经变得很明显。
事实证明，实现自己的主题，而不局限于Material Design的能力，是客户项目的基本功能。因此，我们扩展了Vaadin组件的所有基元：按钮，文本字段，覆盖等。同时，我们还提出了自己的主题方法，以摆脱Paper Elements使用的废弃的CSS mixins建议和@apply语法。
到目前为止，Vaadin组件使用Lumo作为默认主题，并提供Material版本作为替代。组件集已经发展了，我们在改进它的同时也学到了很多东西，包括对polyfills的贡献和处理浏览器的bug。最后，我们的组件现在已经与Vaadin Flow集成，这是一个为Java用户带来Web组件支持的框架。
总结
企业内部网络应用形成了一个独立的世界。它们被很好地隐藏在NDA之下，充满了传统的野兽，有时并没有真正地与现代趋势保持一致，比如极小的捆绑大小--谁会在意在快速的企业内部网中的桌面上下载500 kB的JS？但某些旨在接近这些应用的产品是用Web Components构建的。
Nuxeo、Ionic和Vaadin是提供此类产品的公司。而且它们都提供长期支持（LTS），或者作为高级功能（Ionic），或者3年支持（Nuxeo），或者5年支持（Vaadin）。但是，除了可以筹集资金并对网络平台的稳定性安全多年之外，让我概述一下我认为我们可以学习的其他一些经验。
-
灵活性。一些喜欢功能型方法的人一直在抱怨Custom Elements的设计是基于类的。但是DOM API使用类语法和原型继承的事实不应该限制任何人实现自己的抽象层：钩子，对象，甚至是DOM树的服务器端表示。
-
可选主题。DOM API是使用类语法和原型继承的，这不应该限制任何人实现自己的抽象层：钩子，对象，甚至服务器端的DOM树表示。影子DOM与自定义CSS属性的结合使用，似乎是一个被低估的Web平台功能。大多数开发者都坚持使用全局CSS和类名约定，而理论上我们现在有潜在的更可扩展和可靠的解决方案。"适者生存 "在行动？
-
IE11：一鸣惊人。虽然Web Components polyfills支持IE11，但要确保在该 "兼容性解决方案 "中运行的大型应用程序的正常性能几乎是不可能的。不得不让一个应用在IE11中运行，这在企业环境中经常出现，实际上意味着需要一个单独的版本（YouTube有一个）。
有一些希望，随着时间的推移，更多的企业公司会开始考虑Web Components，特别是在Firefox ESR 68出来之后。在写这篇文章的时候，它正在经历所谓的资格和测试期。这样一来，从Firefox 63开始就有的对Custom Elements和Shadow DOM的支持，将为更多的用户提供服务。
而我个人也希望今年下半年这个系列的下一篇博文能有足够的素材。这就是你，读者，可以帮我很多忙的地方。如果您的公司正在使用Web Components，请在评论中联系我，并分享您所学到的东西！当然，也欢迎分享任何其他的反馈。当然，也欢迎分享任何其他的反馈，我真的很感激，它能让我得到启发。
