Hybrid App

Hybrid App

2017年05月11日 16:07:51 阅读数：599更多

个人分类： Android

随着智能手机的普及，移动端应用几乎成为每个互联网产品的标配。在快速迭代的互联网战场中高效开发、低成本上线产品，是每个应用开发团队追求的目标。此时，选择合适的应用类型和开发模式便至关重要。移动应用可以粗分为三种：原生应用(native app)， 网页应用(web app，或HTML5 app)，以及它们的混血儿——混合模式移动应用(hybrid app)。今天的博文就来和大家简单聊聊近年来蓬勃发展的hybrid app。

Source: http://s3.rainmaker-labs.com/wp-content/uploads/Mobile-hybrid-app1.jpg

一、什么是Hybrid Mobile App

Hybrid app从外观上来看是一个native app，实则只有一个UIWebView，里面访问的是一个web app，如新闻类和视频类的应用普遍采取该策略：native的框架加上web的内容。不同于native app需要针对不同的平台使用不同的开发语言（如使用Objective-C、Swift开发iOS应用，使用Java等开发Android应用，使用C#开发Windows Phone应用），hybrid app允许开发者仅使用一套网页语言代码（HTML5+CSS+JavaScript），即可开发能够在不同平台上部署的类原生应用 。由于hybrid app结合了native app良好用户交互体验和web app跨平台开发的优势，能够显著节省移动应用开发的时间和成本，hybrid app得到越来越多公司的青睐。

Source: Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options

按照网页语言和程序语言的混合，hybrid app通常可以分为三种类型：

1. 多View混合型：native view和web view独立展示，交替出现。 其应用主体通常是native app，web技术作为补充。即在需要的时候，将web view作为独立的view运行，在web view内完成相关的展示操作。开发难度与native app相当。举个栗子：Instagram的timeline使用的是web view。
2. 单View混合型：在同一个view内，native view和web view为层叠关系，同时出现。开发成本较高，难度较大，但是体验较好。举个栗子：百度搜索同时实现充分的灵活性和较好的用户体验。
3. Web主体型：应用主体是web view，穿插native功能，主要以网页语言编写。整体开发难度低，基本可以实现跨平台；而用户体验好坏，主要取决于底层中间件的交互与跨平台能力。举个栗子：项目管理工具 Basecamp使用web view呈现内容，调用系统原生API实现界面导航等功能来提高用户体验。

Hybrid app也并非是完美的解决方案。由于其使用HTML5，某些依赖于复杂的原生功能或者繁重的过渡动画的应用会出现卡顿；同时，为了模拟native app的UI和感官，需要投入额外的时间和精力；尽管可以跨平台，但是并不能完全支持所有的设备和操作系统；最后，如果应用的体验不够原生化，如一个简单的网站，则还有被Apple App Store拒绝的风险。

二、 什么时候选择Hybrid App

在hybrid app备受追捧的今天，我们也许会随大流优先考虑开发hybrid app。但是，每个产品各具特色，还没有哪一种解决方案可以完美地应万变。hybrid app的中庸让它大放异彩，也限制了它的应用场景 。在决定采用一种开发模式之前，有许多因素需要考虑，诸如：

• 你希望针对哪个平台做开发？
• 你希望通过应用商店发布应用么？
• 你希望利用手机特有的性能么？
• 你的团队技术能力如何？
• 你的项目周期和预算是多少？

如果要设计Angry Birds一类对图形要求很高的游戏，那么在暂不考虑技术团队能力的情况下，native app是最优选择；如果要设计如Yelp一类内容导向的应用，那么hybrid app会是很好的选择；如果项目时间紧张，没有足够的人手和资金，对图形和系统原生特性没有要求，那么web app将是性价比最高的解决方案。
表一对比了native app, hybrid app和web app在不同方面的表现，可以帮助你根据实际情况选择最佳的解决方案。
InfoQ上高嘉峻的一篇文章分享了几个hybrid app开发的误区，也是开发过程中应该尽量避免的：

1. 为了HTML5而hybrid app：HTML5是HTML4.0.1和XHTML1.0的升级版，有更强大的表现功能，并加入了local storage等技术，为web页面提供了更大的想象空间和更多的可能性。但是，作为发展中的技术，HTML5收到浏览器兼容性和手机硬件水平的影响，能提供的功能和native app扔有一定的差距。开发应用时，首先是要满足用户需求，而不是追赶技术革新的大潮。所以开发应用时，应从应用本身功能和团队开发资源综合考量，决定是否采用hybrid app开发模式。
2. 忽略关键因素：Web是基于PC的一种开发模式，而mobile app运行于移动端。通常，web开发者使用PC浏览器模拟app中的web view进行调试，而不是直接使用手机上的web view。 二者能支配的CPU资源，最大占有内存，运行网络环境，和鼠标/触控操作，浏览器对CSS/JS的解析和对事件的处理有着巨大的差别。而这些差别常常是web页面能否正常运行于app中的关键因素。
3. 富交互导致体验差：这主要体现在两个方面：（1）web与手机平台默认交互习惯不一致：iOS和Android各有一套交互习惯，包括视觉风格，界面切换，操作习惯等。比如手机端系统风格是左右滑屏来进入或者退出界面，而旧界面保持状态；web则是默认无论加载还是后退，都会刷新旧界面，造成体验上的损失。如果模拟native的交互方式，那么会提高开发成本，却也难以达到native的流畅性。（2）与native相比同样的功能在性能上存在差距：Web界面上JS对HTML Node的操作需要消耗大量的CPU资源。首先，手机的CPU性能普遍低于PC端；其次，不同手机之间的硬件水平也参差不齐，比如在iPhone6s上可以流畅运行的界面，在iPhone5、MX5上可能就无法达到同样的流畅度。
4. 跨平台：Hybrid app的优势之一是继承web跨平台的特性。然而，在智能手机软硬件版本众多的今天，兼容性是个不容忽视的问题。不同的安卓操作系统其浏览器内核对JS和CSS的解析、事件处理会有不同；iOS不同版本之间也存在较大差异。所以，在跨平台开发时，兼容性也是需要重点考虑的问题。
5. 交互一致性：这里的一致性并非指同一应用在不同平台上的一致性体验，而是指在同一平台上，hybrid app和native平台的一致性。比如“返回”操作，在iOS平台上页面顶部留有一个44像素高的导航栏，左侧的返回按钮用于返回操作，可以通过绝对地址的方式链接到任何其它界面；而Android通常使用设备提供的返回键，返回上一个界面，如果自行配置平台返回按钮，那么它会和设备提供的返回键指向不同的位置。

三、Hybrid App案例

那么在实际应用场景中，有哪些选择了hybrid app呢？实际上，我们很可能使用过很多hybrid app，却并没有意识到它们是借了native台子唱戏的web app。根据Appcelerator的官网，目前单是运行基于它的平台搭建的hybrid app的设备就有近2.86亿台。此外，LinkedIn、Yelp、Netflix、Wunderlist 等也采用了hybrid模式。值得注意的是，有些博文说Google Inbox也属于hybrid app，但是根据Gmail团队自己的博文，他们考虑效率问题，并没有采取hybrid，而是提出了一个新的解决方案：后端使用Android SDK写Java库，实现对话，提醒，联系人等功能；然后针对不同的平台设计UI。在不同平台部署应用时，Google使用开源工具GWT和J2ObjC将Java转为JavaScript和Objective-C，这使得Google可以使用同一套Java代码在web和iOS平台上实现同样的功能。在不同的平台之间，Inbox可以复用70%的代码。

Source: http://www.appcelerator.com/customers/app-showcase/

四、结语

这篇博文粗浅介绍了什么是hybrid mobile app，以及什么时候可以选择这种开发模式。关于具体如何开发，则可以另起一文，此不详述，仅列举一些资料，以供感兴趣的朋友深入了解。

开发工具：
8个hybrid app开发工具
Hybrid App开发实战
Hybrid Mobile Apps: Providing a Native Experience With Web Technologies
Mobile Frameworks Comparison Chart
40+ Cross Platform Development Tools for Mobile App And Games

参考资料：
一、什么是Hybrid Mobile App：
Hybrid APP是什么
What is a Hybrid Mobile App?
Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options
Hybrid Mobile Apps: Providing A Native Experience With Web Technologies
Hybrid sweet spot: Native navigation, web content
Understanding HTML5 Hybrid Apps

二、什么时候选择Hybrid App：
Web App Hybrid App和 Native App的区别
5 Points to Consider Before Making a Hybrid Mobile App
别闯进Hybrid App的误区

三、Hybrid App案例：
Your favourite app isn’t native
LinkedIn for iPad: The Native/Web Messaging Bridge and WebSockets
Whoa! That Embedded Web View Looks Hot in Your iOS App!
Going under the hood of Inbox