MDN 黑客马拉松:利用浏览器兼容性数据构建实用工具

从 2018 年 3 月 16 日星期五到 3 月 18 日星期日,34 人齐聚莫齐拉巴黎办事处,致力于改进 MDN 浏览器兼容性数据。令人惊叹的成果包括 221 个拉取请求,这些请求提高了我们数据质量,并创建、原型化和改进工具以及仪表盘。

People clustered around 3 tables working on their computers in a gorgeous 19th century Parisian ballroom.
2018 年巴黎 MDN 黑客马拉松期间,人们在美丽的加尼埃宴会厅工作。

MDN 黑客马拉松 活动

MDN 黑客马拉松起源于 文档冲刺,MDN 团队在 2010 年到 2013 年间组织了这些冲刺,将核心志愿者团队召集在一起,在一个周末内编写和本地化 MDN 内容。2014 年,我们扩大了冲刺范围,邀请了来自不同背景的人参与,不仅有技术作家和文字编辑,还有喜欢编码或具备 UX 设计技能的人。

前两次 MDN 黑客马拉松活动分别于 2014 年在巴黎2015 年在柏林 举行。我们休息了几年,但怀念这些活动以及它们所体现的社区精神。这次巴黎的 MDN 黑客马拉松是今年计划的两次活动中的第一次(下一次将于秋季举行)。对于三月份的活动,我们决定将新兴的 MDN 社区聚集在一起,并通过专注于一个具有广泛范围的单一主题来最大限度地提高生产力:浏览器兼容性数据。

MDN 黑客马拉松的模式结合了非正式会议和黑客松;参与者会提出项目并承诺完成具体的任务(而不是会议或冗长的讨论),这些任务可以在三天或更短的时间内完成。人们会选择那些在一个周末内就能取得重大进展的项目。

浏览器兼容性数据

Web 平台的独特之处在于它旨在在不同的工具、浏览器或服务器之上创建一致的体验。你只需创建一次网站,它就能在所有浏览器中运行,无论设备、操作系统或工具选择如何。

在一个不断发展的互联世界中,实现这一点非常困难,而且浏览器以不同的速度和不同的优先级实现平台。即使它们的目标相同,也不可能让所有主要参与者同时实现一项新功能。了解每个浏览器中的支持程度可以帮助开发者做出明智的决策,决定哪些技术已经成熟到可以使用的程度,以及哪些技术应该避免(例如,不稳定、非标准或过时的技术)。

在过去的十年里,MDN 一直在收集这种浏览器兼容性信息,并利用它来改进我们的参考页面。将这些信息直接集成到 MDN 页面中也存在缺点:维护起来很困难,而且几乎不可能在其他地方重复使用。几年前,我们决定将这些信息迁移到机器可读的格式,以便可以重复使用。

A BCD table containing example browser information for an unspecified "browser status"
在 MDN Web 文档中找到的典型浏览器兼容性数据 (BCD) 表。

Florian Scholz 的带领下,我们现在正在 将浏览器兼容性数据迁移 到 JSON 数据库中,目前已经完成大约 60%(包括所有 HTTP、HTML、JS,甚至 WebExtensions)。我们正在努力将所有 Web API 纳入其中,以及 SVG、WebDriver 和 MathML 信息。

与此同时,我们还在试验在新的工具中重复使用兼容性信息,其中一些工具是在内部开发的,而另一些工具是在外部开发的。我们每周都会以 npm 包 的形式发布我们的数据,该包保证会随着 MDN 本身的更新而保持最新。我们是自己的第一个客户!

我们今年的目标是将 100% 的 MDN 兼容性信息纳入 JSON 数据库,并开始在我们的内联兼容性表格之外的工具中重复使用这些数据。

2018 年巴黎活动

人们对浏览器兼容性数据 (BCD) 的兴趣以及需要在上面投入的巨大工作量使它成为 3 月份活动的自然主题。GitHub 上的 BCD 社区非常活跃,此次活动为贡献者提供了一个很好的机会,让他们能够面对面交流。

Some code displayed on a giant screen of the Paris office during the MDN Paris Event
在演示时,我们敢于深入挖掘代码。

来自不同背景和组织的 34 人齐聚莫齐拉巴黎办事处:来自多个不同团队(MDN、开放创新、Web 兼容性和 WebDriver/Marionette)的莫齐拉员工(开发者、作家,甚至经理)、志愿者以及来自 Google、三星、微软和万维网联盟(现场和远程)的代表。

在第一天早上,Florian Scholz 介绍了 BCD,每个人都进行了自我介绍,因此在活动期间人们敢于相互交流,并且对房间里可用的技能有了概述。在项目提案之后,人们聚集成组,工作开始了。看着人们与那些提出想法或拥有特定技能的人互动非常有趣。不到 15 分钟,每个人就已经深入黑客攻击了。

在每个下午结束时,我们会聚在一起演示完成的工作。星期六和星期天早上,我们还举办了一系列闪电演讲,任何人都可以发表任何演讲,目的是开阔我们的思维,接受其他想法。

我们星期天以最后一组演示结束,结果真是令人惊叹……

成果

MDN 黑客马拉松的参与者向我们的代码库提交了 221 个 PR。参与的项目如此之多,不可能一一列举,但以下是一些亮点。

可视化工具

Mozilla 技术讲师和 JavaScript 黑客 Istvan ‘Flaki’ Szmozsanszky 创建了一个 工具,它可以在不借助服务器的情况下显示兼容性表格:它读取 BCD 文件,并在浏览器中直接构建表格。这是一段基础代码,它将允许我们轻松地将兼容性表格嵌入到任何地方,从我们自己的 GitHub 拉取请求开始。Flaki 进一步编码了一个功能,可以 在页面中编辑 JSON 并从中生成 PR,以及研究如何以可视化的方式显示当前数据和新数据之间的差异。

An example output of Flaki's tool, generating a local inline BCD table.
Flaki 工具的一个示例输出,生成一个本地的内联 BCD 表格。

John Whitlock(来自 MDN 开发团队)和 Anthony Maton 致力于为 GitHub 请求创建机器人:他们专注于后端基础工作,这将允许轻松地维护代码。他们创建了一个新的 代码库 并将渲染代码 迁移 到纯 JS 中。

Will BambergEduardo BouçasDaniel Beck 致力于一个新的 宏,它在一个表格中显示聚合数据,例如所有 animation-* CSS 属性。

数据迁移

我们以 JSON 格式拥有的数据越多,使用它的 MDN 页面和工具就越准确。在活动开始之前,我们已经迁移了超过 60% 的原始数据,并在周末对剩余的 40% 进行了重大改进。

在来自莫齐拉的 Jérémie Patonnier 的带领下,Maxime Lo ReSebastian Zartner 在周末迁移了大部分 SVG 元素数据及其属性。 Chris MillsDavid RossBruno Bruet 对许多 Web API 进行了同样的操作。迁移的数据量大致相当于一个季度的正常工作量,是我们的迁移工作中的一项重大进步。做得好!

Andreas Tolfsen 是莫齐拉的 WebDriver 专家之一,在 Chris Mills 的帮助下,将 基本 WebDriver 浏览器兼容性信息 带到我们的代码库中,并开始在 MDN 上记录 WebDriver

数据质量

我们的数据并不完美:我们有一些数据错误(通常涉及将功能标记为不支持,而实际上它们已经得到支持),缺少数据(我们有一种方法可以将未知数据标记为不同),当然还有一些真正的代码错误。

为了提高我们数据集的质量,执行了几个项目。

Mark Dittmer 来自 Google,致力于将 Confluence 工具与 MDN 连接起来。他创建了一个工具,mdn-confluence,它允许对两个代码库中的信息进行交叉检查。

Ada Rose CannonPeter O’Shaughnessy 来自三星,创建了一个 工具,它会生成一组用于 Samsung Internet 的初始数据,这将把这个重要的移动浏览器带到我们的代码库中。这个数据集更有趣的一点是,它被设计为可以重新用于任何基于 Chromium 的浏览器,因此我们有一天可能会将 QQ 或 UC 浏览器的信息也纳入我们的代码库中。

Erika DoyleLibby McCormickMatt Wojciakowski 来自微软,他们从西雅图地区远程参与,并处理了一些与 Edge 相关的数据:更新了 EdgeHTML 版本发布日期,并将 Edge 兼容性数据添加到 WebExtensions 中。

抓取工具

多人参与了将 MDN 或其他地方的现有数据用于生成全部或部分 BCD JSON 的工作。这些工具节省了大量时间,并使我们能够更快地迁移数据。

来自 W3C 的 Dominique Hazaël-Massieux 开发了一个 工具,它接收 WebIDL 作为输入并生成 BCD 的框架。这对我们想要记录的所有新 API 都非常有用,因为我们只需要之后修改其值。Dominique 提交的几个 PR 就是使用该工具生成的。

来自 Google 的 Kayce Basques 创建了一个工具,MDN Crawler,它接收 MDN 页面并从中读取浏览器兼容性数据。即使并非所有数据都能被正确读取(手工制作的表格并不总是遵循相同的结构),它也能提取大量信息,这些信息之后可以手动调整。这对迁移来说节省了大量时间。Kayce 还将该工具发布为一个 glitch.me 服务(附带说明)。

重用数据的外部工具

Eduardo Bouças 致力于改进他的附加组件,compat-report,该附加组件在 Firefox Dev Tools 中生成一个可视化兼容性报告。

Screenshot of compat-report fromEduardo Bouças.
Eduardo Bouças 的 compat-report 截图。

Julien Gattelier 修正了他工具 compat-tester 的几个问题,并添加了对全局 HTML 属性的支持。他还添加了一个“贡献模式”,该模式列出了浏览器兼容性数据集中没有的功能,允许用户或潜在贡献者发现缺失的功能!

来自 Mozilla Web Compat 团队的 Dennis Schubert 与 Julien Gattelier 和 Kayce Basques 共同集思广益,探讨了一个新的工具,它重用 Julien 的 compat-tester 工具,通过抓取重要的网站来生成关于 Web 兼容性状态的报告。

其他项目

Kadir Topal 创建了一个仪表板,使我们能够可视化数据的质量,并衡量我们正在取得的改进。

Example of output of the data quality dashboard.
数据质量仪表板输出示例。

下一步是什么?

还有很多后续工作要做:我们需要审核所有 PR,并做一些工作将新的原型和工具集成到我们的代码库或工作流程中。这是一个很好的问题!

总的来说,我们将继续迁移我们的浏览器兼容性数据,并提高其质量:数据越好,使用它的工具(以及 MDN Web 文档本身)就越好。

这次活动的重中之重是人:通过共同努力,我们建立了新的纽带,参与者之间的关系有望继续发展壮大,为 MDN Web 文档和 浏览器兼容性数据项目 的未来带来更多的精彩。

想要参与?不知道从哪里开始?访问 MDN 社区论坛,了解我们做什么,以及你如何通过贡献让 MDN 变得更加出色。

关于 Jean-Yves Perrier

Jean-Yves 是 Mozilla 开发者推广团队的项目经理。之前他是 MDN 技术作家,专门从事 Web 平台技术(HTML、CSS、API),并且担任了几年的 MDN 内容负责人。

更多 Jean-Yves Perrier 的文章...