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

阅读数:4058 2013 年 3 月 5 日

话题:JavaScriptPython语言 & 开发

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

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

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

文章开头,她指出:

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

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

Katie 点明:

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

她总结出 3 个特点:

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

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

对于选择这些工具的原因,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 的一些最佳实践和编码习惯,感兴趣的同学可以前往观摩。