我们如何使用Web组件

在GitHub，我们为提供一流的开发人员体验而自豪。我们正面的一部分是我们的前端，我们努力保持尽可能轻便，快速，快速。对于像GitHub一样大的产品，这可以是完全的任务。与许多前端码布一样，我们利用组件，独立，隔离和可重复使用的代码，允许应用团队快速有效地提供高保真UI，同时仍然保持高标准的质量。

我们在GitHub中使用Web组件。我们拥有十几个开源Web组件，并且数十个是封闭源的更多。

当GitHub在十年前推出时，我们有一个适度的前端代码库，主要用于jQuery。十年和近85,000行代码稍后，我们有一个大型前端码布开始展示成长的痛苦。我们最终从jQuery转变（出于当时的博客文章中详述的原因）并开始使用能够更好地解决我们问题的新技术。

我们开始涉及一种名为Web组件的新技术，这是一组允许开发自定义HTML元素的本机浏览器技术，逐步增强了JavaScript。

我们选择使用Web组件，因为我们的代码库已经构建成组件类似的行为。尽管如此，随着GitHub Monolith的规模，我们认为在前端变得无法管理之前，我们看到需要更好的封装 - 并且Web组件适合账单。 Web组件提供比我们现有的JavaScript行为更好的可移植性和封装。我们很乐意与我们现有的前端基础架构一起尝试网络组件，因为它不会对特定框架的预付成本或“买入”并不产生。

我们的前两个自定义元素于2014年发货：＆lt;相对时间＆gt;和＆lt; local-time＆gt;，以友好格式的显示时间和日期，＆lt; include-fragment＆gt;，它允许我们延迟加载HTML片段。慢慢地，我们实现了这些元素的功能如何强大，并开始替换CodeBase批发内的设计模式，例如用＆lt;详细信息对话框替换我们的“面向框”模态对话框模式。我们的组件现在的范围是＆lt;远程输入＆gt的非常通用的多功能行为。对于特定的单一用途组件，例如＆lt; markdown-toolbar＆gt;元素及其兄弟姐妹。

对于电源网组件提供，仍有疼痛点和陷阱。通过跨越数十个团队的数百名工程师拥有的如此大的CodeBase，我们需要提供尽可能多的支持和工具，编码最佳实践，无需手动代码审查成为一个瓶颈。

为了使工程师在编写高质量的Web组件时 - 并鼓励最佳实践 - 我们一直在努力使创作Web组件更容易的工具。

我们一直将我们的Rails代码转换为使用ViewComponent，这是一种在Rails中构建可重用组件的框架。 ViewComponent使用Web组件携手，因为ViewComponent可以与Web组件具有一对一关系，允许我们的开发人员对前端和后端的单个抽象工作。

Catalyst，我们的开源库，使其更容易编写Web组件，这是一个推动力，这些驱动力与我们的最佳实践中的一些有关。 Catalyst利用TypeScript添加装饰器，该装饰器保存在编写Web组件所需的很多样式板上。

催化剂从优秀的刺激图书馆和谷歌的诉讼中获取了灵感。它旨在回答我们开发人员需要的特定需求集。我们的内部开发人员体验调查表明了在遗留模式下提供了重大改进。

您可以在我们的指南中阅读更多关于Catalyst及其约定，模式和反模式的信息。

我们为开发人员提供了一组开源Lint配置。对于一般代码实践，我们有eslint-plugin-github。我们还有eslint-plugin-custom-compents，它提供了进一步检查创作Web组件。提取这些以开源存储库允许我们从单甘石中删除代码，但保持一致。

我们还具有内部测试，以验证开发人员遵循最佳实践，并确保他们不继续使用已弃用模式和行为。我们的测试之一，确保不推出弃用的“面部框”模式，并使用A＆lt; dialogy-dialog＆gt;元素作为替代品。

Class FaceBoxDeprecationTest＆lt; test :: fast :: testcase预期_number_of_faceboxes = 44＃查找使用rel = facebox设置的面部框触发器，在html属性或＃中作为哈希分配的一部分（对于Rails帮助者）Regex_for_faceBox_Binding =％R | rel \％r | rel \ s * [=：]＆gt ;？\ s * [＆＃34;＆＃39;]？面向框架regex_for_data_facebox =％r |数据面框\ s * =＆gt;？\ s * | def test_limit_facebox实际_rel_facebox = grep（regex_for_facebox_binding，选项：％w [-in]，paths：％w [app / ** / *。erb]）实际_data_facebox = grep（regex_for_data_facebox，选项：％w [-in]，paths：％ w [app / ** / *。erb]）count =实际= actic_rel_facebox.count（＆＃34; \ n＆＃34;）+ active_data_facebox.count（＆＃34; \ n＆＃34;）assert_operator count，：＆lt; = ，预期的_number_of_faceboxes，＆lt;＆lt;＆lt; -eolit看起来您添加了一个面部框。请使用＆lt;详细信息对话框和gt;相反。如果您必须在此测试中递增预期，请在此测试中，请/ cc @ github / ui-frameworks-readyers，因为我们可能会提供帮助！ vishent.eol assert_equal预期_number_of_faceboxes，count，＆lt;＆lt; -eolit看起来像你删除了一个面向框。你太棒了！ 💖💖💖💖💖💖💖💖💖递减预期_Number_of_faceboxes在此测试中并享受自己特殊的。你应该得到它。将endend

从应用程序特定的前端行为到开源Web组件的道路以Monolith CodeBase内的催化剂组件开头。提取良好候选人的组件将广泛化为强大的，严格的行为依赖性Web组件。

在整形单片中，工程师可能会在不断修改它们的同时使用特色标志慢慢地思考并慢慢运送它们。在组件在生产中进行了一段时间后，我们将寻找机会将组件升级为自己的存储库。我们还定期评估CodeBase，以查找可重用的模式，通用行为或组件，否则有令人信服的原因被解除为自己的存储库。

我们鼓励开发人员编写Catalyst组件，同时在Dotcom Monolith开发用户界面。利用催化剂从一开始的好处是图书馆摘要一些常见的写作Web组件的缺陷并强制执行最佳实践。

注册Web组件可能会产生一些样板，但我们可以更轻松地命名约定和洒上的打字装饰器。催化剂中的行动使得事件倾听比管理全球活动侦听器更容易。突变现有HTML的目标优于浏览器中的HTML模板更好。

虽然包含在我们的应用程序中，因此组件可能会在不同上下文中使用时添加特定于特定的代码。特定于应用程序的代码是可以完成的特定需求，但如果组件应该在其他上下文中工作，则需要灵活和概括。通常，这是以硬编码选项的形式来配置，这些选项应该是可配置的。概括一个组件，使其更加便携对于能够通过其他团队重复使用至关重要。

在提取催化剂组分之前，我们去除催化剂特异性功能并将其转换为平纹网组件。为什么删除团队声明的库使得编写Web组件更容易？虽然Catalyst对开发人员有益，但我们希望我们的组件具有零依赖性。在GitHub组织之外需要开发人员在贡献代码之前了解Catalyst，这是我们不想产生的额外摩擦。

虽然Monolith组件可能紧密耦合到特定的应用程序逻辑，但有第三方依赖项，并依赖于现有测试，我们有一个不同的开源组件的标准。我们的开源组件应靠近0依赖性，框架和图书馆不可知，轻巧，自由，从任何其他组件解耦，并应该只做一件事和一件事。

虽然我们希望我们的组件无依赖，但我们也希望从泰勒斯 - 而且包括类型的稳健性保证。我们包含使用ES模块写入的组件的类型键盘定义，以使Bundler能够轻松消耗。我们还确保使用我们的标准化配置确保有一个完整的测试套件和Linter设置。

通过开源生命周期的组件的一个很好的例子是＆lt;键入效果＆gt;元素。 GitHub中的产品工程团队最近被原型设计了一个终端启发的UI，其中文本出现在某人键入它。在以前的项目中，我们使用了键入动画的优秀和强大的键入.js，并且该团队最初达到该库。

UI已经构建的UI的部分是轻量级的，我们的工具识别为页面添加键入的.js将增加捆绑尺寸五倍。 UI系统团队要求产品工程团队考虑其他选择。我们发现，我们为此申请所需的功能有限，以至于值得自己建立自己。

产品工程团队为新UI写了我们自己键入动画的第一版。使用催化剂，花费不到一天，少于40行代码。意识到其他团队可以使用这种效果，我们决定将它通过生命周期步骤。我们将组件重构为具有零依赖性的组件，“将”它从催化剂文库中出来，并将组件开放为＆lt;键入效果。

总的来说，我们很激动我们的最后一篇文章以来我们向Github前端做出了兴奋。根据我们进行的内部开发人员调查，我们的开发人员对催化剂和景观感到满意！

开发人员享受ViewComponent的封装，使测试UI更易于测试，并增加开发人员的信心。开发人员感到催化剂是从“旧式”JavaScript的欢迎变化，而无需巨大的框架或范例。

我们继续在名称“GitHub元素”下开源更广泛的开源行为Web组件。我们在https://github.com/github-中有一系列这些元素，它将在WebComponents.org上同步到我们的页面。

我们对Web组件的未来感到兴奋，并继续监控提出的HTML规范的更改。我们最兴奋的两项建议是模板零件和陈述的影子DOM提案。这些提案将使工程师更容易运送Web组件，并且可以解决我们具有当前Web组件状态的常见疼痛点。我们在今天正在生产的Ponyfill中实施了最低可行的模板零件，我们热衷于看到它从更广泛的社区获得牵引力。

感谢Keith Cirkel开始启动这篇文章，Ben Scofield和Joel Hawksley进行审查，并昵称霍尔登与我们一起使用以提取＆lt;打字效果＆gt;元素。