“AI 技术+人才”如何成为企业增长新引擎?戳此了解>>> 了解详情
写点什么

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

  • 2013-03-05
  • 本文字数:1698 字

    阅读完需:约 6 分钟

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 的一些最佳实践和编码习惯,感兴趣的同学可以前往观摩。

2013-03-05 06:464734
用户头像

发布了 479 篇内容, 共 151.7 次阅读, 收获喜欢 47 次。

关注

评论

发布
暂无评论
发现更多内容

架构师训练营 1 期 - 第 十二周作业(vaik)

行之

极客大学架构师训练营

架构师训练营 12 周笔记

郎哲158

与前端训练营的日子 --Week07

SamGo

学习

架构师训练营第十二周学习笔记

一马行千里

架构师训练营 1 期 - 第 十二周总结(vaik)

行之

极客大学架构师训练营

架构师训练营 2 期 Week08 作业

week8-作业二-根据当周学习情况,完成一篇学习总结

未来已来

第十二周 作业

熊桂平

极客大学架构师训练营

SpringBoot系列(6)- 测试

引花眠

spring springboot

第十二周 学习总结

熊桂平

极客大学架构师训练营

第十二周 架构方法学习总结 —— 数据应用

兵长

减肥为什么会失败,有可能是因为你仍然在摄入容易消化的食用糖。

叶小鍵

科普 减肥、廋身 盖里·陶比斯 加工食用糖

架构1期 第十二周作业

haha

第十二周 作业2

Yangjing

极客大学架构师训练营

架构师训练营 2 期 Week08 总结

ARTS打卡 第27周

引花眠

微服务 ARTS 打卡计划 springboot

Week_12 总结

golangboy

极客大学架构师训练营

Week 12 作業

Judyyy

第12周作业

paul

数据应用(一)

wing

极客大学架构师训练营

ARTS打卡 第26周

引花眠

微服务 ARTS 打卡计划 springboot

第十二周 数据应用(一)总结

蓝黑

极客大学架构师训练营

Week 12 學習總結

Judyyy

「奇淫技巧」如何写最少的代码

Kerwin

Java 代码设计 代码技巧

架构第12周作业

Geek_Gu

极客大学架构师训练营

第十二周 作业1

Yangjing

极客大学架构师训练营

第三周总结

胡益

ARTS打卡 第25周

引花眠

微服务 ARTS 打卡计划 springboot

week8-作业一

未来已来

架构第12周总结

Geek_Gu

极客大学架构师训练营

架构师训练营 - 第12周

袭望

NPR华裔女工程师分享web应用前端高效开发_JavaScript_郑柯_InfoQ精选文章