作者：Web 上有许多强大的工具和技术，我们可以重复利用它们来开发跨平台的移动和桌面应用程序，特别是在 Firefox OS 等平台上出现了可安装应用程序的情况下。本文将探讨最佳的实现方式，并介绍 Webapplate，这是一个功能强大的新模板，可以帮助您简化开发过程。
为什么要重新发明轮子（为了新的领域）
就像整个 Web 的本质一样，Web 应用很容易编写，但要做好却很难。尽管 Web 没有像其他移动平台那样提供 SDK 或简单的现成模板，但您仍然可以从 Mozilla Open Web Apps、Chrome 应用 或 Apache Cordova 等候选方案中开发出可行的 Web 应用。但希望快速构建 Web 应用的开发者通常比 iOS 开发者花费更长的时间。
以下是这些候选方案对 Web 应用的支持现状
- Firefox（桌面版）、Firefox OS、Firefox for Android 支持托管 Web 应用。这些 Web 应用可以托管在静态或动态 Web 服务器上，就像普通的网站一样。由于安全方面的考虑，托管 Web 应用不允许使用某些经过认证的 Web API，例如 TCP 套接字 API。
- Firefox OS 和 Chrome（桌面版）支持打包的 Web 应用，它们具有针对不同目的的 API，因为它们目前侧重于不同类型的设备。
- Cordova 为许多平台提供设备适配器，包括 Android、iOS 和 Firefox OS。
- Google 有自己的 Cordova 变体，用于将 Chrome 应用的特定 API 移植到 Android 设备上运行。
简而言之，Web 应用的概念尚未完全统一，但已经足够强大，可以与原生应用竞争。目前打包的 Web 应用是主流，因为新的 Web API 存在安全问题。Mozilla 主要侧重于将新的 Web API 暴露给移动设备，Google 则为桌面开发新的 Web API。Apache Cordova 是一个很好的容器，可以将 Web API 暴露给不同的平台。
更糟糕的是，提供的示例通常侧重于教你如何学习新的 Web API，而不是教你如何在开发过程中利用适当的 Web 应用概念。
我有幸参与了一个名为 Gaia 的不断发展的 Web 应用项目的开发，它是 Firefox OS 的用户界面。Gaia 项目包含了 Mozilla 第一个可安装的 Web 应用实现，包括音乐、照片库、电子邮件、日历等应用程序。根据 GitHub 的 Pulse 月度报告，Gaia Web 应用每月大约有 850 次提交。在 Gaia 项目中，Mozilla 开发人员和社区成员投入了大量时间和精力，在两年内将它从原型阶段发展到可发布的产品，并不断迭代，使其成为智能手机消费者的竞争选择。作为一个大型的 Web 应用项目，我们可以从中汲取很多经验教训，并将其应用于通用的 Web 应用开发。
介绍 Webapplate
与其他软件项目一样，除了编写代码之外，开发 Web 应用还需要做很多事情，例如
- 如何组织源代码
- 如何处理库依赖项
- 如何保持代码风格符合约定
- 如何优化 Web 应用的加载性能
- 如何对 Web 应用进行单元测试/集成测试
- 如何本地化 Web 应用
- 如何自动化这些流程
这些都是开发高质量 Web 应用需要解决的问题。在 Gaia 中，我们通过使用一系列 构建脚本（Makefiles） 来解决这些问题。
您可能想知道为什么我们没有使用 Grunt 或 gulp 来构建？答案是：在 Firefox OS 开始开发时，这些工具还不存在。而且模块所有者希望将核心构建过程有一天运行在 Firefox 扩展中。
对于通用的 Web 应用开发，我们不必遵循这些约束。我们可以通过重复使用第三方工具和库来快速进行一些实验。从 2013 年开始，我发起了一个名为 webapplate 的副项目，这是一个开源的 Web 应用模板，它试图使 Gaia 的解决方案与新兴的工具包（如 npm、Grunt 和 Bower）兼容。它还试图将 Gaia 中的最佳实践移植到新的 Web 应用中，使它们更易于维护。
如何设置 Webapplate
Webapplate 利用了许多强大的工具。借助 node.js、Grunt、Bower、Karma、Mocha 和 l20n，我们可以开发出一个可维护的、完整的、自包含的 JavaScript Web 应用模板。因此，您可以从 GitHub 上复制或下载 Webapplate，并进行开发，然后部署到托管服务器或相应的 Web 应用商店。
您首先需要在桌面电脑上安装 node.js。安装 Node.js 后，您将拥有 npm 工具来管理 Node.js 模块。现在运行以下命令
$ npm install -g grunt-cli bower karma
来安装主要工具。
Grunt 是一个 JavaScript 任务运行器工具（类似于 Make），而 grunt-cli 是它的命令界面。Gruntfile.js 文件类似于 Makefile，但是用 Javascript 编写的。
Bower 是一个用于管理前端库的工具。它可以帮助开发者管理不同的库版本。在 Webapplate 中，当您运行以下命令时，Bower 会将客户端库下载到 public/vendor 文件夹中
$ bower install
命令。
Karma 是一个测试运行器，它为每个浏览器运行测试代码。karma.conf.js 定义了详细的设置，用于指定测试运行器的运行方式。
接下来，进入 Webapplate 文件夹并运行
$ npm install
npm 将引用 package.json 来安装所有依赖的 node 模块。该命令将触发 Bower 来安装客户端库依赖项。
然后，您就设置好了！您将获得以下功能：
- 预提交代码风格检查
- 与 Firefox 和 Chrome Web 应用兼容的模板
- 库依赖项管理
- 客户端本地化框架
- 单元测试和模拟框架
- 可部署的 Web 服务器
如果您使用的是 Firefox Nightly，可以在 WebIDE 开发工具 中将 webapplate/public 文件夹作为打包的应用打开。
WebIDE 允许您使用您喜欢的 Firefox 开发工具来编辑、调试或在模拟器或设备上执行您的 Web 应用。
借助 Chrome 应用和扩展开发工具，您可以将 webapplate/public 文件夹导入为 Chrome 应用，并在桌面电脑上检查 UI。
预提交代码风格检查
Gaia 和 Webapplate 提供的第一个最佳实践是 git 预提交代码风格检查。
由于在 Gaia 中，每个提交都需要在代码签入之前由模块所有者进行审查和验证，因此我们遵循了 Google JavaScript 风格 约定。当时我们使用 gjslint 来进行测试。这听起来不错，但实际上，强制人们手动遵循完全相同的规范非常困难；要求审阅者找出这些风格错误是另一种浪费时间的事情。因此，一些天才引入了 git 预提交钩子，在开发人员尝试提交代码时检查几种类型的代码风格错误，并为那些不完全符合代码风格但应该允许的代码提供 白名单。目前，在 Gaia 中，我们对 JavaScript、CSS 和 JSON 进行了预提交检查！这真是一个巨大的解脱。
目前 Webapplate 利用 JSHint、JSCS 和 JSONLint 对 JavaScript 和 JSON 进行代码质量和风格检查。
它与 Gaia 的 JSHint 设置完全相同，并且还包含 白名单。Gaia 也计划迁移到 jscs 来替换 gjslint。如果您使用 git 进行版本控制，请运行以下命令
$ grunt githooks
将 git 预提交代码风格检查绑定到您的开发流程中。
与 Firefox OS 和 Chrome 应用兼容的模板
Webapplate 使用 HTML5 移动模板 作为模板基础，并在其基础上添加了 Web 应用安装助手、图标链接和 usemin 注释，用于优化 Web 应用。
目前，Firefox 网页应用使用 manifest.webapp 作为清单文件，而 Chrome 应用使用 manifest.json。 除了本地化部分（我们将在稍后解决这个问题），这两个语法是相互兼容的。
编辑完其中一个文件后，使用
# firefox to chrome
$ grunt f2c
或
# chrome to firefox
$ grunt c2f
将 manifest.webapp 覆盖到 manifest.json，反之亦然。
要生成 Firefox OS 打包应用或 Chrome 应用，请运行以下命令：
$ grunt pack
将您的网页应用打包到可上传的 zip 文件。使用默认设置，webapplate 生成的打包网页应用可以上传到 Firefox 应用商店 和 Chrome 应用商店。
库依赖项管理
对于 Gaia，我们通过 npm 管理开发工具，通常不使用许多第三方客户端库。我们在应用之间共享一个 shared/ 文件夹，然后在构建时通过构建脚本将它们复制到其中。
webapplate 在 package.json 中定义这些库，使用 npm 来要求构建工具，并且不假设任何应用框架（例如 Backbone 或 Angular.js，或 UI 框架，例如 Bootstrap）。 客户端库可以通过 Bower 在 bower.json 中管理。
客户端本地化框架
由于网页应用可能在没有互联网连接的情况下运行，我们不能指望服务器来检测多种语言。目前 Firefox OS 使用 navigator.mozL10n，而 Chrome 应用使用 chrome.i18n 进行本地化。 这两个都是非标准的。
在 webapplate 中，我们使用 l20n 库来解决客户端本地化问题。l20n 由 Mozilla 制作，开发人员目前也在改进 Firefox OS 本地化框架。
查看 index.html； 本地化语法看起来和我们之前在 Gaia 中使用的完全一样。
Hello WebApplate
但是，语言环境文件采用不同的格式，locales.en.l20n:
另外，请查看 多语言支持框架 部分，了解 l20n 如何与 webapplate 集成。
单元测试和模拟框架
Gaia 使用自己的测试代理来触发 Firefox 上的单元测试。 Gaia 使用 Mocha 测试框架、Chai 断言库和 Sinon 测试辅助库来进行单元测试。
Webapplate 使用上述单元测试库加上 Karma 测试运行器来在所有主流浏览器上运行单元测试。
可部署的 Web 服务器
对于开发 Firefox OS 托管网页应用，我们需要一个正在运行的 Web 服务器，可能还需要一些动态 Web 服务器支持。 这就是我们所说的 21 世纪：现在可以使用 JavaScript 来编写服务器端代码了。
运行以下命令：
$ grunt server
将触发使用 Express 支持的服务器，该服务器使用 类似 Django 的 Swig 模板支持。 它已经针对性能进行了预先配置。 使用 YSlow 进行测量，您的网站将获得不错的分数。
Webapplate 已在一些免费的动态网页托管提供商上进行了测试，例如 openshift、heroku 和 appfog。 查看 部署 部分以了解更多详细信息。
如果您想将您的网页应用托管在静态 Web 服务器上，请运行：
$ grunt static
生成优化后的网页以进行托管。
如果您想将您的网页应用部署到 GitHub 页面（作为免费的静态托管服务器），请运行：
$ grunt github
使用 webapplate 启动您的新的网页应用项目！
Webapplate 是一个网页应用模板，它借鉴了 Gaia 项目中有关网页应用维护的最佳实践。 它提供现成的 Firefox OS 和 Chrome 应用支持，集成的工具箱可以优化您的网页应用并保持质量，并通过客户端/服务器端构建/测试框架使用 JavaScript。 如果您要制作网页应用或想了解如何维护网页应用，webapplate 是一个不错的起点。
参考
关于 Fred Lin
Fred Yu-Min Lin，又名“gasolin”，是一名前端网页开发者，致力于 Firefox OS 的用户界面“Gaia”。 他也是 Android 和 Firefox OS Gaia 开发的书籍作者。 他经常在 http://blog.gasolin.idv.tw 上写博客，并发表演讲来分享开放式网页和移动技术。
关于 Robert Nyman [荣誉编辑]
Mozilla Hacks 的技术布道者和编辑。 发表有关 HTML5、JavaScript 和开放式 Web 的演讲和博客文章。 Robert 是 HTML5 和开放式 Web 的坚定支持者，自 1999 年以来一直在瑞典和纽约市从事 Web 前端开发工作。 他还经常在 http://robertnyman.com 上写博客，喜欢旅行和结识新朋友。
14 条评论