百度技术沙龙第 57 期 新时代的前端

2014 年 12 月 21 日，在由百度主办、InfoQ 负责策划组织和实施的第 57 期百度技术沙龙活动上，百度移动云事业部资深研发工程师张袁炜分享了如何将原生能力融入到 WebApp 中，独立开发者郭宇分享了 Node.js 的应用场景和存在的问题。本文将对这两个分享做一下简单的回顾，同时提供相关资料的下载。

 

主题一：Blend：融入原生能力到 WebApp（下载讲稿）

 

为什么选择 WebApp 作为开发方案呢？首先，天下武功，唯快不破。WebApp 可以随时更新，而一个原生 App 的更新周期大概在 14 天左右。其次，WebApp 的开发成本低，用原来的网页开发人员写一个移动端跑的网页即可，不用组建新的开发团队。

 

性能是 WebApp 的软肋。另外，WebApp 缺乏端能力，不能适应复杂的应用场景。比如，不能说打开浏览器扫描下二维码。

 

如果有一种解决方案，能够融合 Web 的灵活性（包括迭代速度和开发成本）和原生的能力，再加上一些原生能力，这是非常不错的。这就是 HybridApp 解决方案。

 

业内目前已经有一些方案。比如 Phonegap，它支持的平台很全面。但是全平台支持的代价是，API 数量不足。还有一个缺点是性能低下，没有对交互和用户体验做优化，导致体验很差。

 

再比如 Titanium，可以编译成原生应用运行，但是学习成本高，要学习它的 API 和架构；系统比较复杂，使用人数也很少，大概在整个市场份额里面只有 5% 不到。

 

业内认知度比较高的 HybridApp 方案，由于存在不少问题，所以百度的开发团队希望造一个不一样的轮子——希望提供一个提高性能、有融合能力的 HybridApp 解决方案，这就是 Blend。

 

Blend 的目标有三：

 

性能 

又包括三个方面，一是转场动画，让它实现比较好的效果，跟原生 App 类似；二是离线缓存，避免在没有 WIFI 或没有网络的时候打开缓慢或报错；三是以原生方式提供一些组件，方便用户。

能力 

比如说端能力，把它包装出来在 WebAPP 上面使用。再就是云能力，把百度的云服务封装成 API 开放给 WebApp。第三个是 UI 能力，比如说要做转场动画，在 WebApp 上面很难做到，必须用原生支持。

易用性 

因为这相当于要求开发者完全抛弃掉之前的开发理念，然后重新接受一套全新的东西，这会导致推广很难，而且开发者学习起来成本也很高。所以 Blend 在易用性上有几个目标：一是渐进增强，比如有一个纯 WebApp，现在想把它弄成一个交互性更好的原生 App，只需要加一行配置或者是用某种方式去告诉框架。API 能简化就简化配置，在易用性上做了 Meta 扩展。另外就是推出一整套框架，让大家用的时候，只需要写自己的逻辑代码就可以了。

有了设计目标，回到关键点，性能、转场动画到底怎么实现。

 

张袁炜以百度文库的 WebApp 为例，介绍了转场动画的实现。刚才说了我们要解决的是刚才当 Blend 发现用户点击页面中某个链接，这个页面即将被刷新时，就去初始化 WebView，并且把它放在当前 View 的右边，遮住下面的层。其实里面的内容全都是 Web 的，但是转场的效果和动画是用纯原生方式来实现的。

 

在 Web 交互中，非常卡的东西用原生方式实现，其他所有的交互和开发用纯 Web 语言来降低开发成本。

 

接下来张袁炜介绍了开发 Blend 的过程中遇到的问题，以及相应的解决方案和思路。

 

首先是优雅降级和渐进增强。优雅降级，意思是做一个最强的方案出来，然后针对差一点的手机做一个降级的方案。渐进增强是针对最基础的环境来做，然后再在更高级的浏览器上提高的交互性能。

 

Blend 提供了一整套一站式服务，里面有很多组件，方便开发者使用。设计 API 的一个思路就是“简单就是美”。因为很多现有的框架很重，或者功能很强大，但是要学习可能就得花十天半个月，这样的框架可能叫好不叫座，所以要考虑简化开发者的学习成本。

Blend 的架构如下图所示：

从下往上来看，Blend 会支持三个平台，一个是 iOS，一个是 Android，还有一个就是纯的浏览器。首先说 iOS 或者 Android，可以在上面开发一个 Runtime，把原生的能力通过 js 的封装，把它的接口暴露出来给上面的 js 或者是页面调用。这是 Native 层，是用原生代码开发的。上面是 JsAPI，这一层提供了很多能力和很多交互组件供开发者使用。再上面就是 HTML API。

主题二：Node.js As Infrastructure——谈谈 Node.js

Node.js 的成长速度非常惊人，而且受到广泛的技术市场的认可，同时在国内外的公司也得到了广泛的应用。

郭宇结合自己的经验，介绍了 Node.js 的优势：

• 前后端统一的设计提升代码复用度
• 众多的开源模块降低开发成本
• 支持高 IO Web 服务成本低
• JavaScript 程序员还是蛮多
• 部署简单方便，版本与环境可控
• 处于升温状态的市场，广受支持

但 Node.js 也有一些劣势：

• 编程模型复杂
• 异步流程控制繁琐
• Error Handle 成本高
• 优秀的 JavaScript 程序员很少
• 不适用于计算密集型应用
• 社区规范、API 变动频繁

之后郭宇分享了自己的一些经验：

• 如果你的团队成员小于 3 人，用！
• 如果你的产品在起步阶段（A 轮前），用！
• 如果你有 1 位以上优秀的 JS 程序员，用！
• 如果生产环境主要用其他语言，不要尝试迁移
• 放心的使用 Node.js 编写内部系统
• 在熟悉之前，别让前端工程师触碰业务逻辑