随着 Firefox OS、开放应用商店 的推出以及推动实施强大的 Web API 以实现更紧密的硬件集成，Mozilla 对 Web 应用非常重视。我们相信 Web 能够提供类似原生应用的体验，即使在移动设备上也是如此。

但是，我们不能忘记最重要的一环：良好的开发者生态系统。我们需要提供各种工具，以便初学者和专家都能轻松编写 Web 应用并进行部署。

这就是我们创建 mortar 的原因，它是一组应用模板，为不同类型的应用提供了起点，以及用于管理和部署它们的工具。

几周前，Pierre Richard 发表了一篇文章，介绍了他开始为 Firefox OS 编写应用的经验。他的文章中有一些很棒的内容，包括他对 mortar 的批评。他认为 mortar 太复杂了，并引入了一个不同的 起点 来为 Firefox OS 编写 Web 应用。

本文将大致回应他的一些观点，介绍 mortar，并解释为什么我认为它是初学者和专家编写 Web 应用的宝贵起点。最后，在屏幕录制中提供了 mortar 的详细演练。

为什么模板有用？

mortar 不仅仅是一堆 HTML、CSS 和 JavaScript。如本文后面所述，它还附带各种其他工具来自动执行任务，例如部署以及压缩和连接 JavaScript 和 CSS。当您想要发布和维护应用时，这些工具是必不可少的。

如果您是真正喜欢简单的人，最初可能会发现 mortar 太复杂了。我绝对是那种想要将事物简化到最简单形式的人，拒绝不必要的复杂性。我们努力确保只在 mortar 中包含在构建和部署 Web 应用时非常有用的内容。

因此，我鼓励您了解 mortar 附带的工具，尤其是在您认为不需要它们的情况下。mortar 是我们对良好 Web 开发实践的表达，因此它也是学习现代工具和构建 Web 应用的良好方法的机会。就像 Django 或 Ruby on Rails 最初可能看起来很复杂一样，您以后会得到回报。

Mortar 中的技术

mortar 模板是预先构建的，可以帮助您快速编写 Web 应用。这些不是专门的 Firefox OS 应用。我们希望您构建可以在 Web 可用的任何地方运行的 Web 应用。Firefox OS 是 Web 应用的理想场所，但 mortar 模板并非专门针对 Firefox OS（即使一些更高级的模板借鉴了它的一些样式）。

所有 mortar 模板都包含以下内容

• 项目结构（css、js 等文件夹）
• 一些初始的格式良好的 HTML、JavaScript 和文件，如 manifest.webapp
• 用于管理 JavaScript 的 require.js
• 用于开发服务器、css/js 优化、部署和其他任务的 volo
• 一些初始的 js 库：zepto、mozilla 的 收据验证库 和一个用于 安装 Web 应用 的跨平台库

此外，如果要将应用作为已安装应用进行测试（或让用户在应用商店之外安装应用），则会提供一个安装按钮（但默认情况下已注释掉）。您只需取消注释一行 HTML 即可。这与预构建的 manifest.webapp 文件相结合，可以轻松构建应用。

以下是您从模板启动应用时的样子

所有静态文件（如 HTML、CSS 和 JavaScript）都位于 www 目录下。我们位于此目录的上一个级别，以便可以使用 volo 和 grunt 等工具，并且如果需要添加服务器端组件，则会更容易。node_modules 和 tools 目录仅供 volo 使用，您可以忽略它们。

我们选择使用 require.js（一种 JavaScript 模块系统），因为编写模块化的 JavaScript 是一个好习惯。它不是一个晦涩的库；它实现了用于编写模块的 异步模块定义 标准，该标准在 JavaScript 社区中非常知名。您应该在 www/js/app.js 中开始编写 JavaScript 模块。

除了管理您的 Javascript 依赖项之外，模块还可以让我们轻松地将所有 JavaScript 压缩并连接到一个压缩文件中，而无需您额外操作。实际上，它非常简单，以至于已为您包装在 volo 命令中。只需在项目中键入 volo build，所有 JavaScript 就会连接到一个文件中并进行压缩（它也会对 CSS 执行此操作）。

Volo 是一款类似于 grunt 的工具，它只是在命令行中自动执行任务。我们使用 volo 是因为它与 require.js 集成得很好。例如，命令 volo serve 会为您的应用启动一个开发服务器。查看此文档 以获取更多可用的 volo 命令。

Volo 允许您轻松地将站点部署到 github。自定义应用的 www/manifest.webapp 后，只需执行以下操作：

1. volo build
2. volo ghdeploy

您优化的应用现在正在 github 上实时运行，并且已准备好提交到市场！

游戏和布局

上面描述的所有内容都适用于所有应用，但我们还想帮助想要编写特定类型应用的人。这就是我们创建多个模板的原因，每个模板都针对特定的需求。

• mortar-app-stub：一个最小化的模板，只包含少量预构建的 HTML（任何类型应用的空白画布）
• mortar-game-stub：一个最小化的模板，包含一些基本的游戏组件
• mortar-list-detail：类似于 app-stub 的模板，但也包含布局库和基本列表-详情类型界面
• mortar-tab-view：类似于 list-detail 的模板，但默认界面是选项卡视图

我们有一个空白画布（app-stub）、一个游戏模板（game-stub）以及其他两个带有预构建布局的模板。

游戏模板如下所示。它看起来很无聊，但它是使用 requestAnimationFrame 渲染的，您可以使用方向键或 WASD 控制方块。将来，我们可能会包含图像加载和基本碰撞检测。

列表-详情模板如下所示。它带有预构建的布局，实现了列表-详情交互，您可以在其中触摸列表项并深入了解详细信息。您还可以添加新项目。此数据驱动的功能由 backbone.js 提供支持。我们仍在改进设计。（选项卡视图模板看起来类似于此处显示的列表视图。）

布局库是 mortar-layouts，它是我们想出的一个方法，可以非常轻松地构建应用 UI。对我来说，这可能是 mortar 最令人兴奋的部分。我不会在这里详细介绍，但它使用 x-tags 和其他新的 HTML5/CSS3 功能将原生风格的应用 UI 带到 Web 上。查看 文档 和 实时演示（以及 演示的源代码）。

布局库和附带布局的两个模板处于测试阶段，因此请记住存在一些小错误。最大的问题是缺乏设计，我们将致力于集成反映 Firefox OS 的更好样式（但可以通过 CSS 轻松自定义！）。

Mortar 的未来工作

mortar 比较新，需要时间才能完全记录和完善。我们正在积极开展这项工作。

我们还在微调我们的模板，以确定每个模板的最佳起点。诚然，将大型蓝色安装按钮作为 app-stub 的默认屏幕是一个错误，此问题已得到修复。现在，您会收到一条 简短的有用消息，其中包含有关您可以执行的其他操作的链接。

我们剩下的工作大部分是与列表-详情和选项卡视图模板相关的，以及如何向开发者提供有用的布局。我们不想强迫他们使用大型框架，但强烈认为我们需要帮助他们开发应用 UI。

我们欢迎反馈，因此请随时 提交问题 以开始讨论！

屏幕录制

我制作了一个屏幕录制，详细介绍了 mortar，并向您展示了如何使用 require.js、volo 及其附带的其他内容。如果您有兴趣了解更多详细信息，请观看此视频！