Hybrid App开发

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ioiol/article/details/48252059

现在移动应用开发主流都采用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

 

 

展开阅读全文

没有更多推荐了,返回首页