本周，Mozilla 正在伦敦参加 2012 年 Mozilla 节。一年前的上一届节日上，我们发布了 Popcorn.js 1.0，并为电影制作人、记者、艺术家和博主提供了一种将音频和视频集成到 Web 体验中的方法。此后，Popcorn 成为构建基于时间的 Web 多媒体体验最流行的方式之一。它被证明对定制的 Web 演示、电影、可视化等具有独特的功能。今年，我们带着一个更大的 1.0 版本来到 Mozilla 节：Popcorn Maker 1.0。

Popcorn.js 和 Popcorn Maker

借助 Popcorn.js 及其插件生态系统，我们为开发者创建了一个工具。Popcorn 允许开发者使用 Web 媒体的时间信息进行动态操作，使用 简单的 API 和插件系统。使用 Popcorn Maker，我们希望更进一步，将这种能力赋予博主、教育工作者、混音师和艺术家——Web 制作者。

Popcorn Maker 的核心是一个 HTML5 Web 应用，用于将 Web 媒体与图像、文本、地图和其他动态 Web 内容结合起来。它的外观独特但不陌生，为 Web 提供了基于时间轴的视频编辑体验。创建完成后，Popcorn Maker 将混音作品作为简单的 HTML 页面托管在云端，可以分享或嵌入到博客或其他网站中。此外，每个混音都提供了一个“混音”按钮，允许任何观看者通过使用当前混音作为其自己创作的基础项目来成为创作者。这种 Web 媒体的“查看源代码”体验是 Popcorn Maker 作为更大 Mozilla Webmaker 项目的一部分目标的关键方面。

在技术层面上，Popcorn Maker 是多个独立项目的组合，每个项目都深受 “12 要素”理念的影响：一个名为 Cornfield 的基于 node.js 的 Web 服务；一个用于创建高度交互式 Web 应用的 JavaScript 框架；以及 Popcorn.js，带有一组自定义的 Popcorn.js 插件。

源自 Butter

最初，我们认为可以创建一个名为 Butter 的简单库，并且 Popcorn Maker 可以注入其中——类似于工具栏一样添加到现有的网页中。Popcorn Maker 的许多最初想法来自 Rick Waldron、Boaz Sender 和 Al MacDonald（来自 Bocoup）创建的早期原型。随着时间的推移，这些想法不断发展，Seneca 学院和 CDOT 也参与进来——他们带来了丰富的 Web 媒体和 Popcorn.js 经验——并产生了更多原型。很快，很明显，真正需要的是一个完整的 Web 应用：包含客户端、服务器和社区的基础设施。

随着 Popcorn Maker 团队的不断壮大，我们意识到了这一点。更多开发者加入了我们的团队，其中一些人带来了急需的设计经验。Ocupop 被咨询以增强项目的 设计，并为我们提供了用于制作 HTML5 品牌的相同专业知识。

使用 LESS 进行 CSS

感谢像 Kate Hudson 这样才华横溢的设计师-黑客混合人才，Popcorn Maker 的设计变得现代化且响应迅速。我们与她合作集成了 LESS——一种编译为 CSS 的动态样式表语言。LESS 使跨浏览器兼容性（对 Popcorn Maker 的目标至关重要）等挑战变得不那么痛苦。它还为我们 UI 的快速原型方法提供了更大的灵活性。因此，我们的大量 CSS 都是用函数构建并存储在变量中，这两者都包含在我们样式实现的各个文件中。我们可以进行更改以快速尝试新的方法，尽可能减少样板 CSS 的接触和创建。

Popcorn 媒体包装器

当然，为了完成我们期望的功能，我们需要使用新功能扩展 Popcorn.js。其中一项功能是 Popcorn 媒体包装器，它使用接口和行为集包装非 HTML5 媒体，使它们能够像 HTML5 视频和音频元素一样使用。通过为 YouTube、Vimeo 和 SoundCloud 构建包装器，我们能够将所有媒体代码标准化到 HTML5 媒体接口上。更多包装器正在开发中，允许在未来的版本中包含更多类型的媒体，并且当前的包装器将在今年晚些时候作为 Popcorn.js 1.4 的一部分发布。

发展成为现代工具

最终，Butter 及其组成部分使我们能够仅使用 HTML、CSS 和 JavaScript 提供一个功能齐全、响应迅速的最终用户工具。目前，Butter 使用 require.js 提供的模块化开发环境，并提供了一个带有用于构建时间轴、擦洗器、编辑器、对话框等的部件的 UI 工具包。与 require.js 的文本插件合作，文档片段用于允许我们在静态 HTML 中构建所有 UI，并在运行时动态加载和渲染它。这种方法使我们能够按照 HTML 的预期方式对待它（即作为布局），但也可以将其包含在我们的源代码树中，以便像其他任何内容一样被引用和检查。

虽然构建 Butter 是我们应用执行的重要组成部分，但它仅占 Popcorn Maker 的一部分。Popcorn Maker 的服务器 Cornfield 允许用户保存和发布其内容，从而完善了 Popcorn 宇宙。它使用 node.js、Express、Jade 模板和 Amazon S3 为 Butter 提供 RESTful API 和托管环境。为了避免用户身份验证和凭据管理的棘手问题，Cornfield 利用了 Mozilla Persona。在开发过程中，尝试使用 Persona 暴露出需要构建 express-persona 节点模块以帮助 Persona 在 Express 中更轻松地工作的需求。

基于社区反馈

Popcorn Maker 团队非常感谢其社区和用户。他们的反馈极大地影响了 Popcorn Maker 的方向。我们看到的成功且引人注目的 Popcorn.js 演示使用视频作为画布，在其中动态放置 Web 片段。此外，我们发现用户希望嵌入他们的项目——而不仅仅是托管它们。这些见解对于将我们的重点转移到创建可嵌入内容而不是全页内容至关重要。

收集用户的反馈也影响了我们的开发。在 Popcorn Maker 中，我们尝试了用户反馈收集和 JavaScript 崩溃报告，这两者都直接构建到 Web 应用中。应用的“反馈”按钮允许用户提交常规反馈，然后将其作为 JSON 存储在 S3 中。通过这种反馈，我们能够获得有关用户遇到的问题和新功能想法的有价值信息。

JavaScript 崩溃报告

更重要的是我们对 JavaScript 崩溃报告的实验。这种技术在 Mozilla 的原生开发中得到了很好的应用，例如 Firefox 及其崩溃统计。但是，这种技术很少应用于 JavaScript Web 应用。我们使用 window.onerror 检测代码中抛出的顶级异常，并向用户显示一个对话框，允许他们提交匿名报告，并可以选择包含他们遇到的详细信息。我们记录各种类型的边缘情况（例如，通过包装 DOM 方法在 DOM 中访问 null 节点），并将这些数据与报告一起发送。这对我们的团队来说是一个不可思议的数据来源。自从我们 为 TED 演讲发布的 0.9 版本 以来，我们已经修复了十几个崩溃错误，几乎所有这些错误我们的开发人员都无法在本地遇到。

受其他 Mozilla 项目的影响

Popcorn Maker 的开发也深受其他 Mozilla 项目中使用流程的影响。特别是对自动化、工具和开源最佳实践的重视。我们通过在所有代码中使用代码检查来加速开发，从 JavaScript (jshint) 到 CSS (csslint)，再到 HTML，我们在其中创建了 基于 HTML5 解析器的客户端-服务器解决方案。我们使用许多自动化系统，从 botio 到 TravisCI，再到 Jenkins，以运行我们的测试并帮助我们相信快速代码更改的速度。最重要的是，我们还采用了与 Firefox 的同行评审和超级评审类似的两阶段代码评审流程。通过对每个补丁进行两次审查，我们不仅减少了回归，而且通过确保多人理解每个更改来帮助培养我们的开发团队。

Popcorn Maker 已经触及了庞大的社区，并且是不断壮大的敬业开发人员、思想家和日益活跃的社区成员辛勤工作和集体影响的结果。我们非常自豪地今天发布了 1.0 版本，这是我们一年工作的成果。剩下的唯一问题是您将用它做什么——https://popcorn.webmaker.org！

有关代码和开发流程的更多信息

有关代码和开发团队/流程的更多信息

代码库

• https://github.com/mozilla/butter
• https://github.com/mozilla/popcorn-js

错误追踪器

https://webmademovies.lighthouseapp.com/projects/65733-butter/overview

IRC

irc://irc.mozilla.org/popcorn

Twitter

@popcornjs

实例

• 生产环境
• 开发环境