首页 > 代码库 > 移动应用的分类

移动应用的分类

  随着智能手机的普及,移动端应用几乎成为每个互联网产品的标配。在快速迭代的互联网战场中高效开发、低成本上线产品,是每个应用开发团队追求的目标。此时,选择合适的应用类型和开发模式便至关重要。移动应用可以粗分为三种:原生应用(native app), 网页应用(web app,或HTML5 app),以及它们的混血儿——混合模式移动应用(hybrid app)。当然,还有最近新出的微信小程序,允许你使用它的API通过前端技术来实现原生应用,我觉得它更像react native,将网页技术转换成原生UI,不同的是它是运行在微信App中的,我觉得它比RN更有优势的是,开发者开发门槛更低了,甚至不用担心跨平台(RN依然要写两套代码),而且还有微信这个入口,将来可能是一个趋势。

  什么是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得到越来越多公司的青睐。

技术分享

按照网页语言和程序语言的混合,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通常使用设备提供的返回键,返回上一个界面,如果自行配置平台返回按钮,那么它会和设备提供的返回键指向不同的位置。

结语:不同公司不同业务应该选择适合自己的App开发方式。原生的体验好,但是开发成本高,不能跨平台,需要下载,入口太深,用户粘性低,迭代慢。Hybird成本低,跨平台,迭代快,但体验相对要差一些,大多还是靠UIWebView嵌入页面。Webapp更容易传播和转化,但是不是真正的App,只是网页,应付不了富交互的需求,也无法调用设备API。React Native学习曲线陡峭,不能完全做到跨平台,还有一些遗留Bug,但是体验接近原生并且可快速迭代。刚出的微信小程序,学习成本低,类似RN,入口是微信,有优势,接近原生应用,真正的跨平台,缺点是新技术,生态环境差,封闭,需要微信审核,也无法做到超快速迭代。

移动应用的分类