HTML5移动应用开发的生态环境简介

标签: 编程技术 html5 移动应用 移动开发 | 发表时间:2014-08-07 10:18 | 作者:techug
出处:http://www.vaikan.com

我本人是HTML5的大粉丝,因为它可以给我带来满足我创造力的开发速度。

但自从移动平台崛起以来,这项技术所涉及的开发就开始变得复杂起来。在桌面平台看来,一切都非常清楚。网站开发就是一场不断持续的进化,即便如此还是有人对其了如指掌。但是在移动平台这就是场噩梦。开发者们被各种开发HTML5移动应用的方法搞得晕头转向,所以我希望这个指南可以帮助他们。

正如我在 前一篇文章中提到过,如果想要实现一个移动应用的话,你首先得是一个web开发者。

在开始给大家介绍现有的不同平台和框架之前,我必须声明我并不认为Titanium Mobile是一个HTML5解决方案。如果想要知道为什么请参阅我的前一篇文章。

目前有四个解决方案(其他新的解决方案也在不断出现,但都还处于初期状态)可以用于开发HTML5移动应用。

Web App

这是最直白的方法。简单来说,就是一个通过浏览器访问的网站。Android和iOS都提供将网站链接添加到桌面的功能。这样的应用通过恰当的配置可以以全屏状态运行,并且配合Appcache可以实现离线运行。

更新: Daniel Appelquist提醒大家在Firefox OS,Android上的Firefox以及今后的Chrome都会为用户提供将web app添加到移动设备的功能。前提是你需要为你的web app声明一个配置清单。嗯,挺好。

对我来说,这并不是一个可靠的方案:

利用Phonegap / Cordova 集成开发平台

这个是目前来讲,最有效的妥协方案。现在已经有一整套相关生态系统包括工具,论坛,开发者。你能通过它来利用HTML5的API以及原生API。到最后,你得到的会是一个真正的APP。此平台也遵从HTML5规范以协助web应用的转化。

手工接入本地环境

这个方案针对的是那些规模较大并对设备原生代码颇具了解的团队。很多大公司就采用的这种方式。它可以将高性能的原生UI组件与高灵活性的HTML搭配使用。

如果你感兴趣的话,你可以看看这些链接:

 

使用Intel XDK基础开发环境

说实话我不能给这个方案一个准确的评价。在我第一次安装这个编辑器后,它的复杂程度让我惊呆了,所以我也没有动力再去研究它。就我所了解的,它和Phonegap应该遵从的同样的精神不过他们专门打造了一个完整的IDE。我并不确切地知道具体地差别在哪。如果哪位在Intel工作的老兄读到这篇文章,麻烦你给我提供一下更多相关细节好吧?

原生HTML

这个是完美的解决方案。操作系统直接执行HTML5代码而不是通过桥接的方式链接HTML和原生代码。你能使用所有的API,debug工具也能完美的使用。而实际上,目前只有 Firefox OSTizen拥有这样的系统。

------------------------------

现在你知道了这些不同的方案,我们可以摆一摆移动HTML5应用的八卦。当乔布斯在第一代iPhone发布会上宣布有移动HTML5之后,其相关开发就开始了。Safari和Firefox在当时是最好的HTML5浏览器(Google Chrome那时还没出来)。

但是一年之后,应用商店上线了,但是只能用Objective-C开发应用。该死的乔布斯。

之后没过多久,一帮开发者就创造了Phonegap。我还记得当时他们拿一个wiki当主页。它当时bug无数,虽然的确是个天才的想法。但问题是与此同时开发者们也纷纷开始制作移动HTML5应用。所以许多人被它搞得很恼火然后到处说它坏话。

自那以后,又发生了很多事情:智能手机的CPU越来越强大,CSS渲染可以通过GPU完成,HTML5的规范更加精准,浏览器引擎更加强大。

前端开发也同样有了很大的改进。我们的JS代码不再是一个巨大的 $(document).ready函数。我们开始使用更加标准化的框架(AngularJS, BackboneJS, EmberJS, Polymer, ReactJS)而且我们的debug工具也不再弱于那些原生debug工具。我们也开始使用构建系统,包管理器,以及代码风格。

HTML5移动开发自2009年以后就完全变样了。

所以到最后,HTML5的问题是什么?就是 UI

有些读者已经知道, 我真的很讨厌jQuery Mobile,然而很不幸的是,大多数开发者都用它来做移动开发。Bootstrap也没法解决这个问题。它确实是响应式的但是并不是针对的移动平台。原生应用开发者用他们的原生组件来和HTML/CSS相比较,这明显是很不公平的。

原生平台提供很多“拖来就用”的组件,而且是经过全面的测试,优化,并已经包含了性能优势。iOS提供的原生长列表组件会自动隐藏那些看不到的元素,但是在HTML/CSS里面并非如此。

Web UI是开发者心中永远的痛因为Apple或Google从未提供过Web UI的框架。想像一下如果有种“Bootstrap”可以拥有所有原生组件的特性(性能,渐变,个性化等等)。他们本来可以做到,但这并不是他们优先考虑的。然而现在情况不同了。

Windows Metro

微软是这方面第一让我有深刻印象的。他们的Metro UI无论是在C++,C# 还是 HTML里都有同样的特性:

HTML5中的ListView的一个例子:

  • http://msdn.microsoft.com/en-US/library/windows/apps/br211837.aspx
  • http://code.msdn.microsoft.com/windowsapps/Universal-Windows-app-cb3248c3

Firefox OS

Firefox OS更加有意思。Mozilla自己同第三方开发者使用同一套CSS。说实话这真是最棒的想法了。你可以直接 去GitHub进行贡献

  • https://github.com/mozilla-b2g/gaia
  • http://buildingfirefoxos.com/index.html

那么Google呢?

Google是最后一个但也很不错。他们采用了另一种方式。他们给我们带来了AngularJS以及最新的Polymer。Polymer是是一个让你可以轻易创建web组件的框架。

在他们完成开发web应用底层结构之后,他们开始专注于UI。现在的成果就是Material Design(译注 这里是相关介绍),他们的想法是创造完全响应式的设计,而并不是简单的缩放元素大小,这样可以使得应用在每个屏幕尺寸上看起来都很性感。他们使用Polymer来提供这些组件。

  • http://www.polymer-project.org/components/paper-elements/demo.html#core-toolbar
  • http://www.polymer-project.org/docs/start/tutorial/intro.html

同时现在还有其他的UI框架!

Ionic Framework

这个是个人最爱。其设计与iOS很相近,但不像某些人,它在Android上看起来也很棒(看什么看我说的就是你jQuery Mobile)。他们带有AngularJS的指令集,现装现用,性能优化,自带动画,等等。简而言之,这货就是春哥附体。下拉刷新,侧边菜单,无限滑滚,支持超长列表(没错,超过1000条元素),选项夹,等等。

这个截图是我正在开发的一个应用

Drifty,这个开发了Ionic Framework的公司,正在同其他开发者一起研发Angular Material,一个类似于Polymer中Material Design的东西不过是基于AngularJS。

还有其他更多不错选择,不过目前还达不到Ionic那么好。不过大家还是可以关注一下,我相信很快他们都会改进:

那么Apple呢?我觉得他们还是更倾向于迫使人们用Swift或者Obj-C进行原生开发。万幸的是,我之前提到的大多数框架都支持iOS。SB了吧,Tim!

我希望现在你对HTML5移动开发能够有了更多的了解。这个指南还没有完成,我只是想到哪写到哪。如果你发现我有什么地方写的不对,请尽管给我留言或者通过你方便的方式联系我: http://www.yrezgui.com

相关 [html5 移动应用 开发] 推荐:

jQuery Mobile开发HTML5移动应用

- - HTML5研究小组
随着移动互联世界的到来,目前已发展到多种移动 操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的 手机操作平台上,比如Android,iOS,黑莓等. 而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过 手机的浏览器即可浏览.

PhoneGap:免费开源的 HTML5 移动应用开发平台

- - HTML5研究小组
PhoneGap 是一个免费开源的开发框架,让 Web 开发人员能够使用熟悉的 HTML,. JavaScript 构建跨平台的移动本地应用. 通过 PhoneGap 框架提供的 JavaScript API 能够以非常简单的方式调用移动设备的核心功能,包括地理位置,摄像头,加速器,通讯录,多媒体,文件和网络等功能.

HTML5移动应用开发平台AppCan公测

- - 行业资讯
  编者按:HTML5专属时代正悄然来临,在这块角逐者众的竞技场,抢跑者无疑将更受瞩目. 3月6日,国内首个HTML5移动应用在线开发平台AppCan.cn正式公测,大家可以使用AppCan简单、快速、高效地开发HTML5移动应用. 之前在AppCan内测期间,小编初次体验EASY功能就大呼过瘾. 特意撰文一篇《如何在Android手机上开发出Android应用》,有许多开发者对此强烈关注,并且表示区区内测的1000个邀请码没有抢到.

HTML5移动应用开发的12大特性

- - 极客521 | 极客521
1.离线缓存为HTML5开发移动应用提供了基础. HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少网络流量. 同时,这个功能算得上是另一个方向的后台“操作记录”,而不占用任何后台资源,减轻设备硬件压力,增加运行流畅性.

HTML5移动应用开发的生态环境简介

- - 外刊IT评论
我本人是HTML5的大粉丝,因为它可以给我带来满足我创造力的开发速度. 但自从移动平台崛起以来,这项技术所涉及的开发就开始变得复杂起来. 在桌面平台看来,一切都非常清楚. 网站开发就是一场不断持续的进化,即便如此还是有人对其了如指掌. 开发者们被各种开发HTML5移动应用的方法搞得晕头转向,所以我希望这个指南可以帮助他们.

浅析HTML5在移动应用开发中的使用(转)

- - 移动开发 - ITeye博客
HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE、Chrome、FireFox、Safari,亦或是新出现的浏览器,谁能达到在移动端对HTML5更好的支持,谁就能在以后的移动应用领域占据更多的市场. 有了HTML5以后怎么装APP. 更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一.

HBuilder :免费html5移动应用开发平台

- - 动点科技
HBuilder是一个工作环境(IDE),可以加速html5新应用的开发,这是在中国的首个同类产品,在该产品背后的开发团队Dcloud,相信这是全球同类产品当中表现最好的一个. 公司已经找出某种方式来促进html5移动应用在中国的表现. 它们跟原生应用已经差不多好了,同样在低端的安卓设备上也可以表现很好,而低端安卓机占领中国智能手机市场的一大部分,也将会是不远的将来市场的主要驱动力量.

HTML5 杀不死移动应用

- clowwindy - 月光博客
  苹果在其对抗 FLASH 的过程中,是否让自己也限了进去. 通过明文禁止 Flash 应用到 iPad 和 iPhone 上,苹果迫使 Web 开发人员不得不放弃采用 Flash 技术. 可以说,苹果和乔布斯为 Adobe 公司的放弃移动 Flash 业务的最终决定“提供了很有价值的参考意见”.

开辟新战场:Adobe收购HTML5移动应用框架开发者PhoneGap Nitobi,11月份将推云存储以及6大新平板应用

- Huadong Wang - 36氪
在Flash与HTML5的对垒中,Flash不断的败下阵来并逐渐被许多科技巨头抛弃,Adobe也坐不住了开始敞开怀抱迎接HTML5. 近日,其就宣布收购HTML5移动应用框架PhoneGap和Phone Build的开发者Nitobi Software,收购条款不详. 据悉,PhoneGap的开源平台允许开发者使用HTML5和JavaScript创建并发布跨平台的移动应用.

HTML5和本地化的对比:移动应用之辩

- Sai - 译言-电脑/网络/数码科技
来源HTML5 vs Native: The Mobile App Debate. 移动应用和HTML5是目前最热门的两种技术,其彼此间存在着大量的重叠之处. Web应用运行在移动浏览器上,而且它们也可被重新包装成运行在各种移动平台上的本地化(native)应用. 有着对范围广泛的各种平台的支持,结合了移动浏览器威力十足的强大功能,开发者正转向HTML5这一被称作“一次编写,多处运行”的解决方案.