【Javascript】移动Native+HTML5混搭应用感受

2012-04-26

说到HTML5在移动领域的开发,最推崇的估计就是跨平台与低门槛。同时又为了有native APP一样的效果,必须兼具原生特性,Titainium与Phonegap是两个比较典型的例子。

下面说的是我最近一段时间的开发感受以及尝试的几种方案:

第一种方案:

我一开始用的是phonegap + jq + jq mobile,从界面到效果都是JS撑起来的,最大的感受就是UI界面延迟无法忍受,不过如果只是发布为本地网站,那么一切都可以忍受, 因为用户对APP和网页的要求从来都不一样,不过这就不干phonegap鸟事了。

phonegap的优点:

  1. 基于JS和HTML5,没有门槛
  2. 跨平台,这个是废话。

phonegap的缺点:

  1. UI延迟厉害
  2. 兼容性,比如WEB SQL database在Android版本的问题,最后采用localstorage来模拟数据库。
  3. webview资源占用问题,以后就看apache基金会的造化了。

一句话总结:专用浏览器

第二种方案:

后来做完一个项目之后,开始采用另一个方案 Titainium。

Titainium 采用 js 来编写应用,而且JS符合部分 commonJs 规范。大致原理是:

android或者IOS API --> Titanium API--> JS组装。

Titanium的优点:

  1. JS作为一个胶水层,入门比较简单,1.8版本之后,引入了V8引擎,因此性能大幅提升。对最新的JS规范支持比较好,一些forEach方法可以调用。
  2. 各种组件都是基于原生的,因此性能和UI表现可以甩phonegap几条街。
  3. 部分跨平台,切换平台还是需要修改部分代码。
  4. 文档全,分类很清晰。

Titanium的缺点:

  1. 大!局限于Titianium的运行机制,这个问题暂时无解。同时也是因为引入了V8的引擎,所以什么代码都不写的话,编译生成的apk文件最少都有5M。
  2. 文档质量需要控制,有些文档根本就是错误的。
  3. 由于是重新封装了两个平台的API,所以Titanium的API也是很多的。但是由于中间添加了新的一层,当你需要去调用某些原生特性时,那就比较麻烦了。虽然说可以自己编写module,可是Titanium没有办法紧跟Android的版本,所以有关module这一块,从搭环境开始,就比较痛苦。我遇到的一个问题:三星某些机型阉割了google map服务,所以我要改用百度的地图,百度有API,所以我决定做一个module。但是从搭建Titanium module开发环境到开始写module,一天都没有成功。官方文档只是纯粹的堆砌,貌似根本就没有考虑实际情况。本来module是非常赞的一个特性【亮点】,但是不知道基于什么考虑,被官方弱化了。难道和他们的收费政策有关?最后地图问题用的JS版本地图+webview解决。每当此时,我就越发发现IOS的好了,而且真心话,Titanium更适合IOS一些。
  4. 用的人少,部分bug基本无解。
  5. 资源占用比较多,我的ME722,打开十几个window就挂掉了(这个做法不明智,我只是测试),换做view,超过20个一样延迟明显,最后使用数据栈勉强可以达到要求。

一句话总结:原型利器。

第三种方案:

原生APP + web内容。自己编写一个外壳,底部tab或者头部固定,外壳定制化。

为了避免庞大的jq,jqmobile或者jqmobi,我只能自己编写一个小型的库来处理,采用了jqmobile的思想,动画用CSS来实现,不过android2.2的CSS动画效果也是无法令人满意啊。 另外,最大的问题,外壳与内容的交互可能会比较复杂。这算是很接近phonegap的一种方案,但是相比phonegap,这种定制化能力更强, 有些头疼的问题(比如动态生成的页面中webview中滚动条的问题)可以采用别的方案(比如webview分割)来解决。

一句话总结:愚公移山。

上面是面向web开发人员的三种方案,总的来说,实现起来都比较简单,phonegap还可以很快的迁移到移动网站上。 但是测试工作量可以说是成倍增长,新版本周期短,升级快,bug产生的速度估计刚好抵消bug消除的速度。

但是,在这个JS和HTML5在移动领域还不够强大,并且缺乏杀手级应用的现在。一句话:“要把web app做得和native app一样,是不明智的”。 web app 就该是 web app 的样子,native app 就该是 native app 的样子,虽然我无法明确的告诉你他们到底应该是什么样子。

那么什么情况下应该用HTML5的方案,什么时候应该用原生的方案呢。

还是一句话:“it depends”,如果产品可以忍受UI和click的延迟以及组件奇怪的显示,多是内容获取而不涉及过多的交互,phonegap完全胜任。 如果需要原生的速度和显示,并且功能比较中庸不计较体积,那么Titanium可以胜任。 如果介于两者之间,那么可以自己做壳。前面的“如果”都是基于一个前提“团队初期或者人手不够”,如果真正要做一个好的应用的话,至少现阶段,还是原生搞起吧。

如有问题,请咨询QQ群 723245925


文档信息 by XiaoPingYuan

版权声明:自由转载-非商用-非衍生-保持署名。发表日期:2012-04-26 by XiaoPingYuan(https://xesam.github.io/)