hybird app

误区一：为了HTML 5而Hybrid App。

HTML 5在Hybrid App模式中是一个最常被提起的概念。HTML 5作为一个HTML 4.0.1和XHTML 1.0的升级版，基于旧版本有更强大的表现功能，并加入了Local Storage等技术，确实为Web页面提供了更大的想象空间和更多的可能性。但HTML 5处在目前的发展阶段，受到浏览器兼容性和手机硬件性能水平的影响，它所能提供的功能与Native仍然有很大差距。

所以，我认为作为工程师要明确一款App采用Hybrid App模式的根本原因是什么。作为一款App其最根本的功能是满足使用者的需求，而并不是服务某项新技术。因此当决定采用Hybrid App去构建一款应用时，应该从应用本身功能特点和整个团队的开发资源配比统一考虑，是否有必要同时又有能力去驾驭一款“Native搭台，HTML唱戏”的Hybrid App。类似“HTML 5的时代已经到来，如果我们不这么做就变土鳖了，错过这场技术革新的大潮，终将被这个时代所淘汰”的话真不是一个有责任心的工程师应该发出的声音。

误区二：忽略关键因素

在谈到Hybrid App的场合我们更多提及的是它有诸多优点，如何架构一个Hybrid App，怎么让Web和Native和谐共处，然而Web开发中会被忽略的一些因素少被提起，这些因素又恰恰经常是一个Web页面能否正常运行在App中的决定性因素。

Web开发是基于PC的一种开发模式，开发者使用PC浏览器模拟App中的Web View进行调试。PC浏览器与手机Web View的区别是巨大的，能支配的CPU资源，最大占有的内存，运行的网络环境，鼠标操作与触控操作的区别，浏览器对CSS/JS的解析和对事件处理，等等。

App工程师，无论是iOS还是Android，最敏感的一个问题莫过于内存管理，而在Web开发则对这个问题没有过多注意。这就经常导致同一个功能界面Native实现中会通过一些技术手段，把内存容量控制在操作系统允许的范围内保证App正常运行。如果以Web方式接入App的页面没有一个明确的标准和严格的验收机制，相应的Web实现则不会过多考虑这方面的问题，而且浏览器也没有给前端工程师提供足够的Api支持处理内存问题，导致在某些条件下造成App无法正常运行，甚至Crash。

同样的问题会出现在网络环境方面，虽然现在wifi覆盖越来越广，3G网络也日益普及，但App运行的网络环境与PC相比仍然有着巨大差距，wifi和蜂窝网络的切换，基站变化等诸多因素都会导致网络间歇性断开。Web开发总是默认有一个稳定的网络环境，因此在对于不稳定网络环境问题的处理上也有所欠缺。没有明确的对于低速网络或不稳定网络访问的处理，在很多情况下这些页面也会非常不给面子。

误区三：富交互导致体验差

这里所谓的体验问题一分为二：一是与手机平台默认交互习惯不一致的体验，二是与同样功能Native界面存在的体验差距。

无论在Android还是iOS平台上，都有各自的一套交互习惯，包括视觉风格，界面切换，操作习惯等，与Web习惯完全不同。如果使用Web方式开发富交互的页面，或多页面功能就会出现这样的问题。

以iOS界面切换为例，系统风格是新界面自右向左推入，后退时界面自左向右推出，而旧界面保持状态。Web开发的默认习惯则是刷新页面，无论新载入页面或是后退，都会对页面进行刷新。因此使用Web模式开发多界面功能就面临这样的交互习惯差异，造成体验上的损失。当然Web方式也可模拟Native的交互方式，但这样的模拟首先提高了开发成本，有悖于最初的高效原则，从效果上看，也很难达到Native的流畅性。

另一个方面，也是上述提到的与Native相比，同样的功能在性能上存在巨大差距。Web界面上JS对HTML Node的操作需要消耗大量的CPU资源，手机CPU的性能还不能与PC相提并论，就算在智能手机之间，硬件水准也参差不齐，一个可以在iPhone 5上流畅运行的界面，跑到三星S III上很可能就卡住不动了。所以我们经常可以发现一些富交互页面上的操作无法达到令人满意的流畅度，而流畅度也正是用户评价一款App优劣的最直观因素。

误区四：跨平台

一次开发，跨平台运行是Web的优势，这也是很多App采用Hybrid模式的重要原因之一。兼容性问题在Web开发过程中往往不被关注，但当下智能手机的软硬件版本众多，兼容性绝对是一个不容忽视的问题。

以Android手机为例，诸多主流品牌都有各自定制过的操作系统，浏览器内核对JS和CSS的解析，事件处理等方面都存在区别。以HTC One为例重叠在一起的层在某些情况下会对点击事件透传，而其他多数平台则不存在这个问题。并且目前移动平台的开发框架还没有完全成熟，可以很好的解决兼容性问题。所以就要求开发者在开发过程中要对兼容性做充分测试，对于某些特殊版本进行特殊处理。

即使在相对统一的iOS平台，不同版本之间也存在较大差异。例如：在iOS 4.x版本中CSS甚至不支持position fix的属性，4英寸屏幕的设备无法很好的支持apple-mobile-web-app-capable属性，等等。

误区五：交互一致性。

交互一致性是一个非常容易被误读的概念，“一致性”经常被理解为同一个应用在各种平台和场景下要有一致性的体验。我认为在移动平台开发过程中，“一致性”应该是App视觉和交互习惯与其运行平台的习惯保持一致。而Web开发“一次开发，跨平台运行”的特性与此存在一定程度上的冲突。

以“返回上一页面”的操作为例，在iOS平台上在页面顶部始终存在一个44像素高的导航栏，左侧有一个返回按钮用于返回操作，而Android平台则习惯使用设备提供的返回键操作。这个返回按钮在iOS平台可以通过绝对地址的方式连接到任何其他页面，而在Android平台返回按钮和设备的返回键则可能指向不同的位置。

例如这样的一个流程：首页->列表->筛选->刷新过的列表，此时的返回操作被期望是导向首页，则页面上的返回按钮可以通过绝对链接的方式实现，而Android设备的返回键则只能返回上一个筛选页面，再次返回是筛选前的列表页。

Hybrid App方案是一把双刃剑，一方面它平衡了Native App和Web页面的优缺点，一定程度上解决了Native App开发过程中迭代慢，版本依赖，Native开发资源不足的问题，但另一个方面过度依赖Hybrid方案会造成Web前端开发成本快速上升，甚至造成App整体体验下降，甚至造成功能缺失。

不要为了Hybrid而Hybrid，控制好方案中Native与Web的边界。

扩展阅读

较早Mobtest针对Facebook的iOS App专门做的一片评测文章，阐述了使用大量HTML页面的App出现的问题：http://blog.mobtest.com/2012/05/heres-why-the-Facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/

资深开发者@李秉骏在InfoQ发表的《Hybrid App实战》，阐述了Hybrid模式的优势与劣势，并简单介绍了开发Hybrid App所需的技术储备，供读者参考。：http://www.infoq.com/cn/articles/hybrid-app-development-combat

Hybrid App在开发当中的优点和缺点

在Hybrid App的开发过程中，几种不同的方案笔者都有经历过。当然也经历到了Native App的开发阶段。在如此纠结复杂的过程中给了笔者不少的经验，下面笔者也会就自身的经验和大家分享这些方案当中的优缺点。对于初入行的朋友，笔者是从Web前端入行的，毕竟门槛较低，而且能够快速地培养自己的信心以及对代码的感觉。深入后就开始接触到移动开发这块了。所以会先从Hybrid App的第一种方案说起吧。

方案一（Web架构为重）

优点：

全Web开发，一定程度上有利于Web前端技术人员快速地构建页面样式；
有利于在不同的平台上面展示同一个交互层；
便于调试，开发的时候可以通过浏览器的方式进行调试，工具丰富。

缺点:

虽然说你可以专注在界面以及交互开发上了，但是这页会成为一个缺点，比如说要仿造一个iOS的默认设置界面，就需要大量的html以及css代码了，而且效果不一定和iPhone上面的界面一样好；
正因为这是跨平台的开发，所以还是这句话：兼容是前端的痛。了解过在Android机器上面的Web开发就知道这个痛了。比如前些年在Android设备上面写圆角，border-radius:10px，在Android的设备上面会出现毛边。
便于调试其实是在Web界面层的。但是实际上做Hybrid App开发的时候，你会遇到需求，进入手机的底层请求，做某些处理。比如说如果该应用有Push Notification服务的话，你就需要到底层，获取Push Notification发生时的数据，以及做相应的交互处理。当然类似PhoneGap这类框架，已经有很好的插件机制去帮助你解决类似的问题，当然还有Game Center之类的插件，具体的话可以到Github去关注PhoneGap官方的账户，资源非常丰富；

方案二（编译转换方式）

优点：

利用自己熟悉的语言，进行应用开发，比如RubyMotion，就是使用Ruby语言去做iOS开发，开发起来的话，代码量是数量级地下降啊。
部分开发工具提供跨平台的功能，让你的应用能够快速地发布到不同的平台上面。比如Mono社区的Xamarin，就是典型的例子了。使用C#语言，能够把你的应用发布到iOS，Android以及WinPhone市场上面；
开发出来的程序运行高效。大部分这种架构的应用，其实还是非常依赖底层的东西的，而且包括界面的东西，都是使用原生的API，效率就当然要比类似于PhoneGap这种架构要好了；

缺点：

严重依赖于其工具厂商提供的工具包，调试的时候就要有全套的工具。当然一般来说这些厂商都会以收费的形式发布他们的工具，相应的也有客服提供技术支持。遇到系统升级，第三方sdk升级，开发工具出现bug等，那么就要等待工具厂商解决了。相当于把风险压在对方身上了，自己却要承担责任。

方案三（Native架构为重）

优点：

这无疑是最稳定的Hybrid App开发方式了，交互层的效率上由Native的东西解决了，而且架构上基本就是在App内写网页，连App Store都是采用了该种方案；
开发时分工非常明确，底层的由iOS开发人员处理，上层的由Web前端开发人员处理；
有效的在线参数配置方式，以便于及时在线替换界面；

缺点：

团队至少需要两个工程师，一个是Web的，一个是iOS的。当然如果开发人员会两种技术也可独立承担；
还是运行效率，要权衡好多少界面采用Web来渲染，毕竟WebView的效率会相对降低，以前Facebook就是因为Web的渲染效率低下，把整个应用改为原生的解决方案。当然这里面可以通过优化来解决。但是优化也是有限度的，如Ruby创始人Matz所说优化要恰当（包括花的时间，技巧等），而且有时候的优化达到的回报率不一定达到你自己的期望。

Hybrid App和Native App开发对比

因为方案三中的思想基本上就是原生应用的开发思想了。这里要做的对比应该不算大，因此笔者不会做太多的阐述介绍两者的不同。但是如果是偏重Web架构的，或者是以方案二这种透过特殊工具开发的，就和原生开发有对比了。这次笔者暂时会以方案一拿来讨论。讨论中主要会以架构，代码管理上来讨论，当然也会说到部分细节。

架构讨论：

因为这是偏重于Web开发的应用，这里面就需要开发人员有很强烈的大型Web前端架构思想在里面。提到这里可能马上浮现在你脑海中的词语就是：angular.js，require.js，sea.js，backbone.js等。没错，这些工具都能够帮助你快速地梳理好思路，管理好你的Web应用。对开发者最友好的，发挥空间最大的非PhoneGap莫属了。所以笔者就会以PhoneGap应用展开讨论。（因为类似Sencha也有提供方案，但是Sencha本身是一个重量级的框架，而且有自己的思想在里头，加上他本身也提供开发工具，在这里就不适合讨论了。对于开发者来说可以根据自己的需求选择好工具）

从工具上看：

Angular.js

用于双向绑定，网络请求，视图管理等工作。

Require.js

javascript模块化工具，在使用较多的交互对象，PhoneGap插件的时候，你就会发现一个强大的模块化工具会在开发的时候提供极好的帮助。能够帮助你把整体的代码，管理得井井有条。

Jade Template Engine

模板引擎。笔者个人比较推荐使用Jade，而且笔者本人也在博客中多次写到Jade在不同场景下使用的技巧的有关文章。主要是jade的语法太简洁了，而且面向JS开发人员非常友好。如果你还没有开始使用模板引擎，赶紧加入这个队列吧，你已经落后了。

Jquery Mobile

如果你暂时还没有一个设计师，但是又急于构造一个应用出来。jquery mobile就提供了多套不同风格的模板，供你使用，而且还含有不同的交互动画等。而且也是跨平台的。当然实际场景中，笔者觉得你会花很多时间在写css上面，因为设计总是天马行空的。当然你还有很多工具啦，例如sass，以及less.js等。

PhoneGap.js或者Cordova.js

做Phonegap开发必须使用的代码库，用于和PhoneGap框架通讯。现在这个库已经改名了，是Cordova。具体为什么改名，得问Adobe咯。

PhoneGap Plugins

PhoneGap的插件能够帮助你快速地抵达手机的其他API上面，直接使用Javascript来操控这些底层的API。例如调用Push Notification的相应发生的事件。

hybird app相关推荐

通过chrome inspect 来调试手机hybird APP
hybird APP 虽然显示效果和编译前的前端页面大致相同,但是其中操作可能会调用一些浏览器中没有的接口,从而产生一些意料之外的问题,因此了解和掌握如何调试就变得尤为重要. 本文简要介绍了如何利用c ...
何为Web App，何为Hybird App
这些概念听起来很火,当下也很流行,真正理解起来却并非易事.如果让我来全面的解释Web App和Hybird App,我觉得还有些困难. 这篇文章只是我深入了解移动领域开发过程中的不断整理和总结,其中涉 ...
用ionic快速开发hybird App（已附源码,在下面+总结见解）
用ionic快速开发hybird App(已附源码,在下面+总结见解) 1.ionic简介 ionic 是用于敏捷开发APP的解决方案.核心思路是:利用成熟的前端开发技术,来写UI和业务逻辑.也就是说 ...
Hybird App混合移动应用开发技术整体解决方案，速来围观！
摘要由于H5的逐步普及,混合移动应用开发变的炙手可热,其主要的开发语言就是JavaScript,这在很多人看来无论是在性能和安全上来讲,并不被大家所看好,所今天就来谈一下如何对混合应用做优化以及加密 ...
hybird app(混合式app开发)cordova ionic 创建相应平台的app
hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...
开发框架-APP：Hybird App
ylbtech-开发框架-APP:Hybird App Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具"Native App良好 ...
Android Hybird App开发
合开发的App(Hybrid App)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或iO ...
Hybird APP混合开发升级方法
hybrid app开发的优势优点不用说了,但在这里,我们将重点关注混合系统中模块包的升级过程. 服务器维护压缩包的版本列表 Apppid 表示每个模块的唯一 ID 版本表示相应模块的版本号,递增 U ...
Hybird APP （混合开发）简介
写了几个 APP,最初是打算用纯 Native 的,可是我自身的 Android.IOS 知识并不能支撑我用纯 Native 构建项目,可项目又迫在眉睫.还好有前辈指点了一下,可以采用 Hybrid ...
使用Hbuilder和MUI开发Hybird app笔记
1.前两天写了个dome,但是长列表滚动起来特别卡.同样是在我的手机上跑官方dome里的滚动很流畅. 搜了一下午也没搜出来什么结果. 最后终于发现了问题出在css上,因为我的列表里面每一项都有box- ...