NPR 华裔女工程师分享 web 应用前端高效开发

NPR 是美国国家公共广播电台的简称，英文全称为 National Public Radio，是一家以美国本土民众为广播对象的综合性广播电台，与超过 860 家独立非营利性公共广播电台合作，每周制作和播放超过 130 小时的原创节目，听众数目达到 2600 万，是练习英语听力的好素材。目前听众可以通过 AM/FM 收音机、数字和卫星无线电广播、播客、互联网等途径在线收听 NPR 广播。

NPR 的应用开发团队也为 NPR 开发出一系列优秀的 web 应用，包括：

• 最高法院法官索托马约尔的家庭相册
• 2013 总统就职典礼
• 国情咨文
• 总统大选应用

Katie Zhu 是一名服务于 NPR APP 团队的 web 开发工程师。前不久，她在团队官方博客上撰写了一篇文章：《如何开发从不崩溃、成本极低的新应用》。

文章开头，她指出：

我们所用的应用都是开源的。

不过他们仅仅使用了两台服务器，

Katie 点明：

在新闻编辑室开发的节奏很快，在优先级设定上，与为技术产品团队开发完全不同。

她总结出 3 个特点：

• 笨蛋才用那么多服务器。新闻编辑室可不是摇钱树。钱要花到刀刃上，这才是关键。服务器很昂贵，维护服务器就意味着不能用那么多时间开发。……我们现在只有一台生产环境服务器，一个 EC2 小型实例，用来运行周期后台作业，不作为 web 服务器使用。
• 如果 App 不能在移动设备上使用，那就等于不能用。我们开发的大部分应用有 10% 到 20% 的流量来自移动设备。但是对于总统大选应用，有 50% 的用户都在手机上访问“选情公告”，这个页面甚至还不能根据设备自适应。总结：出色的移动体验绝对有必要。
• 为使用开发，为重用重构。这是我最大的转变。当我们面对截止日期开发时，为了保证准时发布，必须要做出一些牺牲，新闻不等人。可是作为一个程序员，要忽略我那些恶心人的 JavaScript 代码中的味道，这让我压力山大，而且焦虑不已，因为我知道，那些技术债务以后总是要还的。

接下来，Katie 介绍了团队使用的 web 应用模板。该模板为启动型项目提供了一个骨架，其中使用的开源项目包括：

• Flask ，完成本地项目呈现
• Jinja ，HTML 模板
• LESS ，处理 CSS
• JST ，使用 Underscore.js JavaScript 模板

对于选择这些工具的原因，Katie 也做了进一步介绍：

Flask 提供无缝开发流程。

我们运行 Flask 应用，以简化本地开发，而且这对我们的模板至关重要。我们调整了 app.py，形成开发工作流，将本地开发和部署之间的麻烦降到最低，它可以帮我们：

• 按需渲染 Jinja HTML 模板
• 编译 LESS 为 CSS
• 编译不同的 JST 模板成为一个单独的 templates.js 文件
• 编译 app_config.py 成为 app_config.js，这样我们的应用配置就有了 JavaScript 版本。

我们的应用配置存在 app_config.py 中，使用环境变量设置部署目标。app_config.py 可以检测我们运行在部署环境还是生产环境，并改变相应配置。对于本地开发项目和部署项目，我们以自动化方式编译 app_config.js，以便于同样的应用配置可以在客户侧使用。保持配置一致，而且不重复——这也符合 DRY 原则！

他们的应用模板中还使用了资源管道（asset pipeline）。进行本地开发时，他们用 LESS 编写样式，并在不同文件中编写 JavaScript。部署时，他们把所有的 CSS 放在一个文件中，所有的 JavaScript 放在另一个文件中，然后使用 gzip 将它们打包部署到生产环境。

这种方式，让他们的应用对移动设备更友好，减少浏览器请求数量，同时页面加载变得更快。

Bootstrap 被他们用来作为前端 CSS 的基础，原因在于：

• Bootstrap 使用网格系统
• 原生响应，有个基本的响应处理机制还是挺牛的
• Bootstrap 模块实现相对容易
• 没有那么丑（他们几乎重新编写了所有的样式）
• 跨浏览器测试简单得多

Katie 详细介绍了最后一点。

Bootstrap 在样式重置方面做得很好。我们的浏览器测试变得简单多了，麻烦少多了，几乎没啥痛苦。

我作为应用团队的新人，有 Bootstrap 打底子，我可以随意编写 JavaScript 事件绑定和功能，还不用担心跨浏览器出问题。

团队使用 Fabric 管理设置和配置，包括本地和部署时都会用。而且 Fabric 的链式命令也很有帮助。

NPR 在 Github 的主页上，列出了他们开发过的 web 应用项目。其中还包括一个他们自己总结的最佳实践，里面记录了他们对于 HTML&CSS、JavaScript 还有 Python 的一些最佳实践和编码习惯，感兴趣的同学可以前往观摩。