深度分析html5在移动开发方面的发展状况

1、 “我们正在用 HTML5 编写我们下一套移动产品。”“是啊，这些天很多人在玩着Appcelerator，我也在玩着。”“嗯，但这并不是我要说的那种 HTML5 产品。”最近，我有很多类似的交流对话，可能因为我正在开发一套 HTML5 的应用吧。就像2005 年的“AJAX”，“HTML5”这个术语现在还没有被清晰地定义，在未确定这个新技术有什么优势前，它就已经被四处套用，甚至投入运营。如果你在一间被热衷新技术的管理人掌控的公司里任职，如果你走运，那么漫画人物呆伯特先生可能非常愿意坐在你隔壁的小房间。两种看法两种看法当人们讨论移动设备上的 HTML5 技术时，他们通常只会有两种不同的看法。从感性的角度来看，HTML5 技术的渲染过程主要是由浏览器、内嵌 HTML5 解析器的应用程序 (如 PhoneGap)、支持书签打开方式的应用程序又或者是移动手机产品(iPhone 和 iPad)进行的。这种技术的好处就是能重用现有的网页设计，Web 开发人员也更容易上手，同时产品具备更高质量，更适用于多平台产品。也更易于调试和修正错误，并且，版本更新会更快。此消彼长，优势是它的功能，如果你像 Ph

2、oneGap 一样使用内嵌的架构，那么你会少很多麻烦事，劣势就是它的表现，这也是 HTML5 技术面临的最大难题。从理性的角度来看，HTML5 技术就是使用 JavaScript 引擎直接控制本地功能，改变移动设备上的浏览器组件。而 HTML5 应用上的表现问题更多是由 HTML/CSS 渲染技术控制的，而不是由 JavaScript 解析生成的。如果使用正确，HTML5 技术无疑可以给予你大量新增的表现效果。目前使用 HTML5 技术的例子包括 Appcelerator Titanium、Mobage/ngcore、Game Closure 以及 PhobosLabs。Node.js 工具包工具包以 PhobosLabs 的项目为例，当这个项目是使用 WebKit 的 JavaScriptCore 组件完成，在设备端使用 OpenGL 渲染界面，而在开发时使用 HTML5 的 canvas 组件的 API 开发。这就是说，开发人员可以在一个对 canvas 有良好支持的桌面浏览器内开发和测试他的 HTML5 游戏，并且当他将这个游戏放到移动设备的浏览器打开时，也会出现同样优秀(甚至更

3、优秀)的表现效果。这种用 HTML5 开发的效果跟使用 Node.js 工具包开发的效果很相像，使用 Node.js 时，只需启用 JavaScript 引擎，而你仅需把你需要使用的Node.js 组件添加到你的应用即可。Appcelerator 的 Titanium 详述了 HTML5 技术的概念，给我们展现了一个完整的UI 工具的抽象层，这使得它可以被应用到生成其他游戏产品。意即一个 HTML5 应用开发人员可以通过 Appcelerator 的 JavaScript UI 库创建按钮，而 Appcelerator 的内部逻辑会将这个按钮转换为 iOS 的原生界面按钮。我们可以通过 JavaScript 控制界面上的原生按钮。理论上，开发人员可以不需要写一句 Objective-C 代码。HTML5 技术有它的优势，当你依然在使用 JavaScript 编写代码时，你可以跟那些烦人的 HTML/CSS 布局逻辑和样式声明说再见。你还可以跟那些优秀的调试工具说再见。但这个技术也有蹩脚的一面，像 HTML5 的游戏 API Mobage 就存在一些小毛病，canvas 组件可以在屏幕相

4、对小一点的界面顺利显示，但如果屏幕稍微变大一点，就好像Appcelerator 的例子一样，在调试时，你还需要考虑界面层额外的复杂性。在这里有很多 Appcelerator 的负面评论，如果你能把上面的几点记在心里，那么那些负面评论其实都可以被理解。问题还在浏览器问题还在浏览器开发一个完整的 HTML5 手机应用的首要难题就是运行速度过慢。而第二大难题就是非常愚蠢的工具束缚，许多组件或多或少在不同浏览器都存在一些漏洞，如 jQuery Mobile 的导航组件、iOS 的 innerHTML 组件的漏洞，所以你需要减少功能去避免出现漏洞，又或者你愿意花一些时间去修复这些漏洞。你可以自己做个实验，当你在一个 iOS 应用里仅使用一至两个界面库时，再加上你自己写的少量 JavaScript 代码，没有更多的 JavaScript 库，你会发现这个 HTML5 应用运行得流畅而完整，但却没什么功能。PhoneGap 的 iOS 项目仅需要 1 至 2 秒的时间就可以在 iPhone 3GS 上发布运行。这个事实可以告诉你，最基本的 HTML5 应用运行起来真的非常流畅。所以，当你发现你的 H

5、TML5 应用的某些操作花费了 10-15 秒时间时，又或者花了 15 秒时间才加载完整个程序时，这都是一些 JavaScript 界面库给拖累的。两套有代表性的两套有代表性的 UI 库库一个 HTML5 手机应用程序员需要的通常只有那么两样东西：第一样就是原生平台和网页界面的嫁接层；第二样就是手机 UI 库。PhoneGap 近年已逐渐成为默认的嫁接层选择，它允许 HTML5 应用通过JavaScript 调用移动设备的照相机、访问手机通讯录和读写文件。而最受欢迎的手机 UI库就包括由 jQuery Mobile 和 Sencha Touch。jQuery Mobile 是去年才创建的一个项目，所以它是非常新的，很显然，它也不够成熟。jQuery Mobile 的导航栏组件就非常糟糕，翻页时明显比原生的翻页功能要慢，如果你不刷新浏览器，你就没有办法递增列表内容。而在 PC 桌面平台测试时，它的 CPU 耗用率也是非常高(版本是 jQuery Mobile 的 alpha 4)。我的项目使用它，主要是考虑到相对简单(比较容易破解)，因为这个库是基于 jQuery 构建的，所以任何一个资

6、深的网页程序员都很容易上手。据说 Sencha Touch 比 jQuery Mobile 更成熟更快。但一看到高复杂性的东西，我就不会不自觉地厌恶它们。因为潜意识会告诉我，有很多功能我根本不会使用到，但却强制加载这些额外的东西到我应用里，让我应用整体表现差了很多。尽管我可能是错的，PhoneGap 应用页中最强大的手机应用是 IGN Dominate，它运行得很流畅并且它就是基于 Sencha Touch 开发的，但我确定他们肯定花了很多时间去优化这个产品。调试和修改调试和修改在上面谈到的开发 HTML5 应用时，许多人可能都忽略了一点，其实调试或修改一个HTML5 应用是很简单的。任何一个曾参与过大型 HTML5 开发项目的开发人员都可以告诉你，调试和维护几乎占了整个项目生命周期的 80%的时间，甚至更多。这就是说，当你听到一个开发工具宣称可以在 15 分钟内开发一个聊天应用时，那么它可能只是能让你在 15 分钟内解决 20%的工作，剩下的 80%，你可能得耗上 3 倍以上的精力才能完成。HTML5 手机应用在调试时存在触碰问题，因为无法打印出控制台的日志。所以，如果 JavaSc

7、ript 代码存在漏洞或者报错，你需要 alert()报错，否则你可能没法发现。PhoneGap 修正了这个问题，它可以通过 XCode 的控制台打印控制台的调式日志，但功能依然很有限。目前最有效的解决方案就是 weinre。尽管漏洞百出，但它就是能跑起来，有了它，你还能断点调试你的手机应用的 UI，weinre 是基于 WebKit 的网页检查器的，它的调式工具后台通过远程服务端获取和替换调试代码。两至三周前，我曾对网页检查器的代码做过一些研究，我发现把它转换为一个远程调试器真的不难。Weinre 接下来几个月的开发进度将会更快，某些人可能还会开发出它的替代产品。我们拭目以待。未来几年，移动应用开发中的 HTML5 技术的调试工具无疑变得更加重要，它可以解决大部分开发人员 80%的工作量。你想要用 Objective-C 改变你的界面设计吗？编辑，再编译，运行。重复这三个步骤直到你满意为止。如果再编译步骤很多，这可能会耗上一天的时间。用 HTML5 技术去实现？用 weinre 编辑一些 CSS 属性并测试，你甚至不用关闭应用，你就可以继续调试。一定程度上，你还可以在桌面浏览器调试你

8、的 HTML5 手机应用。但相信我，你的应用产品最终可能只会在移动设备上爆发一大堆漏洞而已，所以你必须得使用 weinre。不幸的是，人们常赞美某个工具包或者某项功能，但你却很少听到有人夸赞某个调试工具非常棒。所以我猜测就算它是 HTML5 手机程序员最常用到的工具，我们也很少听到它被讨论到。总结：现在的状况总结：现在的状况尽管这篇文章真的有点长，但我还是得总结一下：1. 在移动设备开发 HTML5 应用只有两种方法，要不就是全使用 HTML5 的语法，要不就是仅使用 JavaScript 引擎。2. JavaScript 引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，我已预订了一个 UI 工具包去使用。3. 纯 HTML5 手机应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多人愿意去做这样的优化，但依然可以去尝试。4. HTML5 手机应用的最大优势就是可以在网页上直接调试和修改。原生应用的开发人员可能需要花费非常大的力气才能达到 HTML5 的效果，不断地重复编码、调试和运行，这是他们首先得解决的一个问题。5. 是的，HTML5 的移植非常简单，但我假设每个人都会让这变成一个自动化操作。

《深度分析html5在移动开发方面的发展状况》由会员m****分享，可在线阅读，更多相关《深度分析html5在移动开发方面的发展状况》请在金锄头文库上搜索。