原文作者：www.radibit.com/
发布时间：2020年5月3日
Radimir Bitsov是一位前端工程师、网络性能工程师和无障碍性倡导者。他是A11y Meetup Berlin的组织者，也是Perf-tooling.today的贡献者。Radimir热爱开源社区，喜欢分享他的知识和学习。
在过去的几年里，JavaScript领域对基于组件的架构的需求显著增长。如今有大量的解决方案，使得工程团队很难评估和投资于最适合他们需求的解决方案。当考虑到Web开发的基本方面--可访问性、性能和包容性时，这就变得更加困难了。
在这篇文章中，我解释了为什么我们决定使用Web Components，用Stencil作为构建它们的工具包，用Storybook来展示它们。我以我们最近发布的开源Web应用CovApp为例，展示这些技术如何帮助我们提供快速和无障碍的Web体验。
什么是Web Components？
Web Components是一组网络平台API，允许你实现封装的、可重用的、自定义的HTML元素。当我们提到Web Components时，我们通常指的是以下规范。
- 影子DOM： 一个DOM功能，让你可以在你的HTML元素中定义一个范围内的子树，包括样式和行为。
- 自定义元素。让你可以实现新的HTML元素。
- HTML模板和插槽。让你可以用占位符（slots）定义可重复使用的标记模板。
对开发者来说，好消息是最流行的浏览器都支持关键的Web Components规范。
浏览器支持Web组件表
哪些公司使用Web Components？
Google是最早采用并倡导现代Web组件概念的科技公司之一，它的Polymer项目。Google的支持，以及稳定发布的API，帮助在Web开发者社区普及了这一理念。
如今，Web Components的采用率看起来很有希望。像苹果、IBM、Mozilla、SAP、微软、Google和GitHub这样的技术巨头都在整合它们，并取得了巨大的效果。
我们为什么选择Stencil？
在选择前端框架或工具包时，我们的指导原则之一是确保它尽可能地接近网络标准。遵循网络标准有助于我们在开发过程中优先考虑可访问性、交叉兼容性和逐步增强。
由于Web Components是一个由多个原生Web API组成的套件，我们希望对它们进行投资，作为在不同的Web项目中组织和共享代码的一种方式。
有几种成熟的创建或生成Web Components的解决方案，包括。
每一种解决方案都有自己的优势，分析它们并不在本文的范围内--尽管我建议检查每个解决方案。
也就是说，以下是我们选择Stencil的主要原因。
1. 框架无关的构建时间工具
Stencil的核心是生成Web组件的编译器。你可以决定在哪个上下文中集成它们，比如在特定的JavaScript框架中、内容网站、Web应用程序等。
2. 使用Rollup进行优化构建
Stencil利用了Rollup.js，因此它可以捆绑JavaScript代码并提供灵活的输出目标。它还使用了代码拆分和树状震动等性能策略。
3. 常见的（类似React的）开发者体验
由于Stencil使用了虚拟DOM、反应式数据绑定、异步渲染和JSX等特性，所以有React经验的开发者应该会觉得它比较容易使用。
4. 使用TypeScript的类型化组件
Stencil通过输入信息生成Web Components，保证正确传递值作为组件属性。
我们在选择创建Web Components的工具时，另一个重要的考虑因素是应用程序的捆绑大小。由于Stencil是一个构建时工具，所以代码足迹在我们性能预算的可接受范围内。Stencil团队还提供了Stencil与其他流行的JavaScript框架的捆绑大小基准比较。
工具包捆绑包大小比较(来源：ionicframework.com/blog/introd…)
如果你想对这些工具进行更全面的分析，我推荐这篇 Stencil.js vs lit-element vs Vanilla vs Shadow DOM vs Vue.js 的比较。
用Storybook组织和共享组件
Stencil能够生成不同的输出目标，允许开发人员根据他们的应用如何使用来构建代码。例如，作为一个分布式内容网站、网络应用或第三方库。
我们成功地将Stencil功能和Storybook（一种组织组件的技术）结合起来，结果就是我们自己的Data4Life网络组件库。🎉
Storybook使我们能够在车间环境中可视化并测试我们组件的不同方面。我们的库的可视化表现也是我们设计、产品和前端团队之间沟通的桥梁。
我最喜欢Storybook的一个功能是附加支持，特别是自动的可访问性审核。我们组件库的高级功能包括以下附加组件。
- Knobs: 暴露组件属性和输入，用于实时编辑组件的UI。
- Viewport：将组件的属性和输入暴露出来，以便实时编辑组件的UI。检查不同视口的响应性。
- 可访问性。根据WCAG规范验证组件。
我们共享组件的策略是使用包管理系统--在我们的例子中：npm。通过这种方式，我们可以在多个公司的网络应用和网站中重复使用代码片段。
从概念到最终实现
我们发现使用Stencil和Storybook最大的好处是，它们能让我们快速地创建功能齐全、无障碍的网络应用。同时，我们能够专注于我们解决方案的基本方面，而不牺牲开发人员的经验。
真正的考验出现在我们与柏林Charité大学医院的合作中。我们的任务是创建一个应用程序，让人们回答有关冠状病毒（COVID-19）症状的问题。在填写完数字问卷后，用户会收到一个建议，可以去医院看病，也可以呆在家里，还可以给医生看个人症状总结。
我们开发这款应用的时间？一个星期。结果呢？CovApp 🙌
我们使用我们的组件库和Stencil构建了CovApp，用于协调应用程序的特定视图、模板和逻辑（例如，决策树、二维码生成）。
我们还对CovApp进行了开源，并提供了对自定义调色板、标识和语言的支持。
由于性能和可访问性是我们从一开始就融入开发流程的主题，因此我们在关键性能指标 "交互时间"（3G/首次加载时低于2.5秒）和 "首次有内容的绘画"（3G/首次加载时低于2秒）上取得了理想的完美成绩。
除了自动检查流程，我们还对语义内容结构、键盘导航、焦点状态和语音辅助技术的有意义的公告进行了人工审核。
CovApp项目凸显了数字无障碍性在关键时刻的重要性--比如在流行病期间，以及为什么快速和包容性的网络应用体验是必不可少的。
