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

本文做者：HelloDeveloper

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 编写内部系统
• 在熟悉以前，别让前端工程师触碰业务逻辑

原文连接地址：https://developer.baidu.com/topic/show/290167