Hybrid移动应用：用网页技术提供N、ative体验

 　　根据最近的一篇报告显示，HTML是移动应用开发人员使用最多的语言，开发人员对于选择哪种网页技术考虑的最主要因素，是代码的跨平台便携性和开发的低成本性。我们常常听说，hybrid app使用起来非常慢，而且设计也很糟糕，让我们看看是否有可能又有原生应用的形，又有我们习惯使用的感。

　　这篇文章会提供很多关于如何构建良好的hybrid移动应用的线索、代码片段和经验。我将会大致介绍一下hybrid移动应用的开发，包括它的优点和缺点。然后，我会分享一下过去两年我在开发Hojoki和CatchApp时积累的经验，这两个项目都运行在主流的移动平台，并且是由HTML、CSS和Javascript建成的。最后，我们会介绍一下打包代码到原生app的一些比较好的工具。

　　什么是混合模式移动应用

　　移动app可以大致被分为三种，native、hybrid和web app。如果使用native app，你可以使用设备和操作系统的所有能力，同时，平台的性能负荷最小。然而，构建web app可以让你的代码跨平台，使得开发时间和成本大大减少。而hybrid app把这两者的优点都结合起来，使用一套共同代码，在许多不同的平台上部署类似原生的app。

　　有两种构建hybrid app的方法：

　　Webview app：HTML,CSS和Javascript基础代码在一个内部的浏览器(叫做WebView)中运行，这个浏览器打包在一个原生的app中，一些原生的API可以通过这个包被Javascript获得，比如Adobe PhoneGap和Trigger.io。

　　被编译的hybrid app：用一种语言编写代码(如C#或者Javascript)，对于每一种支持的平台都把代码编译进原生代码中，这样做的结果是，每一个平台都有一个原生的app，但是在开发过程中少了一些自由空间。可以看一下这些例子，Xamarin，Appcelerator Titanium，Embarcadero FireMonkey。

　　这两种方法都被广泛使用，存在即合理，不过今天我们只关注WebView app ，因为WebView app可以让开发人员平衡他们现有的网页技术。我们来看一下hybrid app相对于native app和web app的各种优点和缺点。

　　优点

　　开发人员可以使用现有的网页技术

　　对于多种平台使用一套基础代码

　　减少开发时间和成本

　　使用响应式网页设计可以非常简便的设计出多样的元素(包括平板)

　　一些设备和操作系统特征的访问

　　高级的离线特性

　　可见度上升，因为app可以原生发布(通过app store)，也可以发布给移动端浏览器(通过搜索引擎)

　　缺点

　　某些特定app的性能问题(那些依赖于复杂的原生功能或者繁重的过渡动画的app，如3D游戏)

　　为了模拟native app的UI和感官所增加的时间和精力

　　并不完全支持所有的设备和操作系统

　　如果app的体验并不够原生化，有被Apple拒绝的风险(比如说一个简单的网站)

　　这些缺点比较显著，不能忽略，它们告诉我们，并不是所有的app都适合混合模式，你需要小心的预计你的目标用户、他们对平台的选择和对app的需求。对于许多app来说，好处都是大于坏处的，比如内容驱动的app。

　　Hojoki和CatchApp都是内容驱动的app，所以我们一开始觉得它们非常适合混合模式的开发方式。我们之前提到的好处中的前三点对于我们构建Hojoki的移动app帮助很大，不过也仅仅是4周的时间而已。显而易见，Hojoki的第一个版本缺失了很多重要的东西，接下来的时间里，我们都把精力扑在提升性能、对每一个平台制作自定义的UI和利用不同设备的高级特性上。那个时候积累的那些经验对于让app形似并神似native app很重要，下面我会尽可能多的分享一下我的经验。