百度技术沙龙第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的目标有三：

\\

• 性能\\t
  • 又包括三个方面，一是转场动画，让它实现比较好的效果，跟原生App类似；二是离线缓存，避免在没有WIFI或没有网络的时候打开缓慢或报错；三是以原生方式提供一些组件，方便用户。\\t
  \\t
• 能力\\t
  • 比如说端能力，把它包装出来在WebAPP上面使用。再就是云能力，把百度的云服务封装成API开放给WebApp。第三个是UI能力，比如说要做转场动画，在WebApp上面很难做到，必须用原生支持。\\t
  \\t
• 易用性\\t
  • 因为这相当于要求开发者完全抛弃掉之前的开发理念，然后重新接受一套全新的东西，这会导致推广很难，而且开发者学习起来成本也很高。所以Blend在易用性上有几个目标：一是渐进增强，比如有一个纯WebApp，现在想把它弄成一个交互性更好的原生App，只需要加一行配置或者是用某种方式去告诉框架。API能简化就简化配置，在易用性上做了Meta扩展。另外就是推出一整套框架，让大家用的时候，只需要写自己的逻辑代码就可以了。\\t
  \

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

\\

张袁炜以百度文库的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的优势：

\\

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

但Node.js也有一些劣势：

\\

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

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

\\

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

演讲之后的圆桌讨论环节，参会者可以和讲师近距离交流，气氛非常热烈。演讲的详细内容，可以关注我们在网站上发布的演讲视频。