Hybrid App开发

现在移动应用开发主流都采用Hybrid App模式，例如淘宝、微信、手机QQ、携程、去哪儿、手机百度等都使用了Hybrid APP开发模式。

一、   hybrid App的三种解决方案

方案一：使用PhoneGap、AppCan之类的中间件，以WebView作为用户界面层，以Javascript作为基本逻辑，以及和中间件通讯，再由中间件访问底层API的方式，进行应用开发。这种架构一般会非常依赖WebView层的性能。

方案二：使用AdobeAir、RubyMotion、Appcelerator或者是Xamarin这种非官方语言的工具，打包成原生应用的方式开发。为什么笔者会将它们定义 为HybridApp，主要是它们并没有很单纯地使用原生提供的语言进行开发，而是通过对开发者提供友好的开发工具，并折中地把这种开发语言转换成原生语言，最终打包出整个应用，所以也属于混合应用范畴。

方案三：在开发原生应用的基础上，嵌入WebView但是整体的架构使用原生应用提供，一般这样的开发由Native开发人员和Web前端开发人员 组成。Native开发人员会写好基本的架构以及API让Web开发人员开发界面以及大部分的渲染。保证到交互设计，以及开发都有一个比较折中的效果出来，优化得好也会有很棒的效果。（当年Facebook Three20就使用该方案）

目前主流的hybrid app都是使用移动平台自带的webview来实现hybrid开发。

 

二、   hybrid App中native和web的分配

native和web具体的分配方式大致是：

Native：用户体验要求高、业务变动很小（如首页）、性能要求高等；

Web：业务变化频繁（如广告）、性能要求低、展示性内容（如用户个人中心）等。

在一个hybridApp中，native和web一般是细化到每个页面上的，在一个页面中可能一部分是web实现，一部分是native实现。

以首页为例，首页的功能性内容都是由native实现完成，而广告这种内容变化频繁的内容由web完成。

 

在开发一个hybridApp时，需要考虑离线、安全、性能、与Native互调、扩展等因素。

离线：需要考虑到哪些内容是离线资源，哪些必须请求服务器H5；

安全：需要考虑信息安全，哪些可以在h5上完成，哪些必须由native实现。

三、   Hybrid App的一些具体应用

1. 携程网网络架构：

由于携程业务众多，开发资源导致无法全部使用Native来实现业务逻辑，因此有相当一部分频道基于Hybrid实现。网络通讯属于基础&业务框架层中基础设施的一部分，为App提供统一的网络服务：

• Native端的网络服务

Native模块是携程的核心业务模块（酒店、机票、火车票、攻略等），Native模块的网络服务主要通过TCP连接实现，而非常见的Restful HTTP API那种HTTP连接，只有少数轻量级服务使用HTTP接口作为补充。
    
TCP连接网络服务模块使用了长连接+短连接机制，即有一个长连接池保持一定数目长连接，用于减少每次服务额外的连接，服务完成后会将该连接Socket放回长连接池，继续保持连接状态（一段时间空闲后会被回收）；短连接作为补充，每次服务完成后便会主动关闭连接。
    
TCP网络服务的Payload使用的是自定义的数据及序列化协议；HTTP服务的Payload比较简单，即常见的JSON数据格式。

• Hybrid端的网络服务

Hybrid模块由于是在WebView中展示本地或者直连的H5页面，页面逻辑发起的网络服务都是通过系统WebView的HTTP请求实现的。少量业务场景（需要加密和支付等）以Hybrid桥接接口形式的Native TCP通道来完成网络服务。

2.去哪儿网：

去哪儿APP通过拦截器区分本地资源还是网络资源，如果是本地资源已经包含则请求本地资源，接口级则去请求网络资。当本地资源需要更新时则先更新本地资源，然后在访问。

通过桥去链接插件的方式访问native，插件的实现是通过配置方式实现不同的native的控制。

3.淘宝APP：

淘宝天猫这样的超大型App，完全用Native是很难的，也是不现实的，业务逻辑太复杂，目前天猫是20% native +70 H5，search，detail，交易链路（购物车+下单）是完全native化的，其他的都是Webview。

1）H5的优势在于随时发布，无需修改native代码，满足了业务灵活配置的需求。webview作为移动端H5容器，在手机客户端显得尤为重要

淘宝天猫的webview已经高度模块化，各个业务模块之间高度解耦，为此也做了很多的优化，比如：

1）剥离webview逻辑，拆分webview为单独模块。

2）去掉phoneGap，改用自定义简化框架。

3）统一提供对外调用接口，接口粒度细分多个维度，提供activity，webview等层级接口，满足各种业务方需求。

4）融合手淘windvane，既支持天猫特有的H5逻辑，又提供跨BU前端H5统一方案。

参考资料：

Hybrid APP开发模式和比较：http://mobile.51cto.com/web-460529.htm

开发模式的架构比较：http://tech.163.com/12/0619/20/84CUGCEA00094L5O.html

去哪儿网X1移动前端一体化解决方案：http://ued.qunar.com/mobile/page/  

携程网络架构优化；http://www.infoq.com/cn/articles/how-ctrip-improves-app-networking-performance