我们正在用HTML5编写我们下一套移动产品必威手机

HTML5在移动开发中的现状

2011/07/11 · HTML5 · HTML5

“我们正在用HTML5编写我们下一套移动产品。”“是啊,这些天很多人在玩着Appcelerator,我也在玩着。”“嗯,但这并不是我要说的那种HTML5产品。”

最近,我有很多类似的交流对话,可能因为我正在开发一套HTML5的应用吧。就像2005年的“AJAX”,“HTML5”这个术语现在还没有被清晰地定义,在未确定这个新技术有什么优势前,它就已经被四处套用,甚至投入运营。

如果你在一间被热衷新技术的管理人掌控的公司里任职,如果你走运,那么漫画人物呆伯特先生可能非常愿意坐在你隔壁的小房间。

两种看法

当人们讨论移动设备上的HTML5技术时,他们通常只会有两种不同的看法。

从感性的角度来看,HTML5技术的渲染过程主要是由浏览器、内嵌HTML5解析器的应用程序 (如PhoneGap)、支持书签打开方式的应用程序又或者是移动手机产品(iPhone和iPad)进行的。这种技术的好处就是能重用现有的网页设计,Web开发人员也更容易上手,同时产品具备更高质量,更适用于多平台产品。也更易于调试和修正错误,并且,版本更新会更快。此消彼长,优势是它的功能,如果你像PhoneGap一样使用内嵌的架构,那么你会少很多麻烦事,劣势就是它的表现,这也是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游戏,并且当他将这个游戏放到移动设备的浏览器打开时,也会出现同样优秀(甚至更优秀)的表现效果。这种用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组件可以在屏幕相对小一点的界面顺利显示,但如果屏幕稍微变大一点,就好像Appcelerator的例子一样,在调试时,你还需要考虑界面层额外的复杂性。在这里有很多Appcelerator的负面评论,如果你能把上面的几点记在心里,那么那些负面评论其实都可以被理解。

问题还在浏览器

开发一个完整的HTML5手机应用的首要难题就是运行速度过慢。而第二大难题就是非常愚蠢的工具束缚,许多组件或多或少在不同浏览器都存在一些漏洞,如jQuery Mobile的导航组件、iOS的innerHTML组件的漏洞,所以你需要减少功能去避免出现漏洞,又或者你愿意花一些时间去修复这些漏洞。

你可以自己做个实验,当你在一个iOS应用里仅使用一至两个界面库时,再加上你自己写的少量JavaScript代码,没有更多的JavaScript库,你会发现这个HTML5应用运行得流畅而完整,但却没什么功能。PhoneGap的iOS项目仅需要1至2秒的时间就可以在iPhone 3GS上发布运行。这个事实可以告诉你,最基本的HTML5应用运行起来真的非常流畅。所以,当你发现你的HTML5应用的某些操作花费了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构建的,所以任何一个资深的网页程序员都很容易上手。

据说Sencha Touch比jQuery Mobile更成熟更快。但我一看到高复杂性的东西,我就不会不自觉地厌恶它们。因为潜意识会告诉我,有很多功能我根本不会使用到,但却强制加载这些额外的东西到我应用里,让我应用整体表现差了很多。尽管我可能是错的,PhoneGap应用页中最强大的手机应用是IGN Dominate,它运行得很流畅并且它就是基于Sencha Touch开发的,但我确定他们肯定花了很多时间去优化这个产品。

调试和修改

在上面谈到的开发HTML5应用时,许多人可能都忽略了一点,其实调试或修改一个HTML5应用是很简单的。任何一个曾参与过大型HTML5开发项目的开发人员都可以告诉你,调试和维护几乎占了整个项目生命周期的80%的时间,甚至更多。这就是说,当你听到一个开发工具宣称可以在15分钟内开发一个聊天应用时,那么它可能只是能让你在15分钟内解决20%的工作,剩下的 80%,你可能得耗上3倍以上的精力才能完成。

HTML5手机应用在调试时存在触碰问题,因为无法打印出控制台的日志。所以,如果JavaScript代码存在漏洞或者报错,你需要alert()报错,否则你可能没法发现。PhoneGap修正了这个问题,它可以通过 XCode的控制台打印控制台的调式日志,但功能依然很有限。

目前最有效的解决方案就是weinre。尽管漏洞百出,但它就是能跑起来,有了它,你还能断点调试你的手机应用的UI,weinre是基于WebKit的网页检查器的,它的调式工具后台通过远程服务端获取和替换调试代码。两至三周前,我曾对网页检查器的代码做过一些研究,我发现把它转换为一个远程调试器真的不难。Weinre接下来几个月的开发进度将会更快,某些人可能还会开发出它的替代产品。我们拭目以待。

未来几年,移动应用开发中的HTML5技术的调试工具无疑变得更加重要,它可以解决大部分开发人员80%的工作量。你想要用Objective-C改变你的界面设计吗?编辑,再编译,运行。重复这三个步骤直到你满意为止。如果再编译步骤很多,这可能会耗上一天的时间。用HTML5技术去实现?用weinre编辑一些CSS属性并测试,你甚至不用关闭应用,你就可以继续调试。一定程度上,你还可以在桌面浏览器调试你的HTML5手机应用。但相信我,你的应用产品最终可能只会在移动设备上爆发一大堆漏洞而已,所以你必须得使用 weinre。

不幸的是,人们常赞美某个工具包或者某项功能,但你却很少听到有人夸赞某个调试工具非常棒。所以我猜测就算它是HTML5手机程序员最常用到的工具,我们也很少听到它被讨论到。

总结:现在的状况

尽管这篇文章真的有点长,但我还是得总结一下:

  • 1. 在移动设备开发HTML5应用只有两种方法,要不就是全使用HTML5的语法,要不就是仅使用JavaScript引擎。
  • 2. JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂,我已预订了一个UI工具包去使用。
  • 3. 纯HTML5手机应用运行缓慢并错漏百出,但优化后的效果会好转。尽管不是很多人愿意去做这样的优化,但依然可以去尝试。
  • 4. HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原生应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果,不断地重复编码、调试和运行,这是他们首先得解决的一个问题。
  • 5. 是的,HTML5的移植非常简单,但我假设每个人都会让这变成一个自动化操作。

原文:Kou Man Tong
译文:Norris Lin

 

赞 收藏 评论

必威手机官网 1

“我们正在用HTML5编写我们下一套移动产品。”“是啊,这些天很多人在玩着Appcelerator,我也在玩着。”“嗯,但这并不是我要说的那种HTML5产品。”

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

“我们正在用HTML5编写我们下一套移动产品。”“是啊,这些天很多人在玩着Appcelerator,我也在玩着。”“嗯,但这并不是我要说的那种HTML5产品。”

最近,我有很多类似的交流对话,可能因为我正在开发一套HTML5的应用吧。就像2005年的“AJAX”,“HTML5”这个术语现在还没有被清晰地定义,在未确定这个新技术有什么优势前,它就已经被四处套用,甚至投入运营。

如果你在一间被热衷新技术的管理人掌控的公司里任职,如果你走运,那么漫画人物呆伯特先生可能非常愿意坐在你隔壁的小房间。

两种看法

当人们讨论移动设备上的HTML5技术时,他们通常只会有两种不同的看法。

从感性的角度来看,HTML5技术的渲染过程主要是由浏览器、内嵌HTML5解析器的应用程序 (如PhoneGap)、支持书签打开方式的应用程序又或者是移动手机产品(iPhone和iPad)进行的。这种技术的好处就是能重用现有的网页设 计,Web开发人员也更容易上手,同时产品具备更高质量,更适用于多平台产品。也更易于调试和修正错误,并且,版本更新会更快。此消彼长,优势是它的功 能,如果你像PhoneGap一样使用内嵌的架构,那么你会少很多麻烦事,劣势就是它的表现,这也是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 游戏,并且当他将这个游戏放到移动设备的浏览器打开时,也会出现同样优秀(甚至更优秀)的表现效果。这种用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组件可以在屏幕相对小一点的界面顺利显示,但如果屏幕稍微变大一点,就好像Appcelerator的例子一 样,在调试时,你还需要考虑界面层额外的复杂性。在这里有很多Appcelerator的负面评论,如果你能把上面的几点记在心里,那么那些负面评论其实 都可以被理解。

问题还在浏览器

开发一个完整的HTML5手机应用的首要难题就是运行速度过慢。而第二大难题就是非常愚蠢的工具束缚,许多组件或多或少在不同浏览器都存在一些漏 洞,如jQuery Mobile的导航组件、iOS的innerHTML组件的漏洞,所以你需要减少功能去避免出现漏洞,又或者你愿意花一些时间去修复这些漏洞。

你可以自己做个实验,当你在一个iOS应用里仅使用一至两个界面库时,再加上你自己写的少量JavaScript代码,没有更多的 JavaScript库,你会发现这个HTML5应用运行得流畅而完整,但却没什么功能。PhoneGap的iOS项目仅需要1至2秒的时间就可以在 iPhone 3GS上发布运行。这个事实可以告诉你,最基本的HTML5应用运行起来真的非常流畅。所以,当你发现你的HTML5应用的某些操作花费了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构建的,所以任何一个资深的网页程序员都很容易上手。

据说Sencha Touch比jQuery Mobile更成熟更快。但我一看到高复杂性的东西,我就不会不自觉地厌恶它们。因为潜意识会告诉我,有很多功能我根本不会使用到,但却强制加载这些额外 的东西到我应用里,让我应用整体表现差了很多。尽管我可能是错的,PhoneGap应用页中最强大的手机应用是IGN Dominate,它运行得很流畅并且它就是基于Sencha Touch开发的,但我确定他们肯定花了很多时间去优化这个产品。

调试和修改

在上面谈到的开发HTML5应用时,许多人可能都忽略了一点,其实调试或修改一个HTML5应用是很简单的。任何一个曾参与过大型HTML5开发项 目的开发人员都可以告诉你,调试和维护几乎占了整个项目生命周期的80%的时间,甚至更多。这就是说,当你听到一个开发工具宣称可以在15分钟内开发一个 聊天应用时,那么它可能只是能让你在15分钟内解决20%的工作,剩下的80%,你可能得耗上3倍以上的精力才能完成。

HTML5手机应用在调试时存在触碰问题,因为无法打印出控制台的日志。所以,如果JavaScript代码存在漏洞或者报错,你需要 alert()报错,否则你可能没法发现。PhoneGap修正了这个问题,它可以通过XCode的控制台打印控制台的调式日志,但功能依然很有限。

目前最有效的解决方案就是weinre。尽管漏洞百出,但它就是能跑起来,有了它,你还能断点调试你的手机应用的UI,weinre是基于 WebKit的网页检查器的,它的调式工具后台通过远程服务端获取和替换调试代码。两至三周前,我曾对网页检查器的代码做过一些研究,我发现把它转换为一 个远程调试器真的不难。Weinre接下来几个月的开发进度将会更快,某些人可能还会开发出它的替代产品。我们拭目以待。

未来几年,移动应用开发中的HTML5技术的调试工具无疑变得更加重要,它可以解决大部分开发人员80%的工作量。你想要用Objective-C 改变你的界面设计吗?编辑,再编译,运行。重复这三个步骤直到你满意为止。如果再编译步骤很多,这可能会耗上一天的时间。用HTML5技术去实现?用 weinre编辑一些CSS属性并测试,你甚至不用关闭应用,你就可以继续调试。一定程度上,你还可以在桌面浏览器调试你的HTML5手机应用。但相信 我,你的应用产品最终可能只会在移动设备上爆发一大堆漏洞而已,所以你必须得使用weinre。

不幸的是,人们常赞美某个工具包或者某项功能,但你却很少听到有人夸赞某个调试工具非常棒。所以我猜测就算它是HTML5手机程序员最常用到的工具,我们也很少听到它被讨论到。

总结:现在的状况

尽管这篇文章真的有点长,但我还是得总结一下:

  1. 在移动设备开发HTML5应用只有两种方法,要不就是全使用HTML5的语法,要不就是仅使用JavaScript引擎。
  2. JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂,我已预订了一个UI工具包去使用。
  3. 纯HTML5手机应用运行缓慢并错漏百出,但优化后的效果会好转。尽管不是很多人愿意去做这样的优化,但依然可以去尝试。
  4. HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原生应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果,不断地重复编码、调试和运行,这是他们首先得解决的一个问题。
  5. 是的,HTML5的移植非常简单,但我假设每个人都会让这变成一个自动化操作。

我们正在用HTML5编写我们下一套移动产品。是啊,这些天很多人在玩着Appcelerator,我...

原生应用通常跑起来会更快、更平稳,带给用户的体验也更出色,然而 Web 设计者/开发者也一直在寻找着一种工具,将原生应用的体验带到 Web 技术中,而 Ionic 就是众多开发者的选择之一

ABOUT

必威手机官网 2

  • Ionic

JavaScript开发框架

最近,我有很多类似的交流对话,可能因为我正在开发一套HTML5的应用吧。就像2005年的“AJAX”,“HTML5”这个术语现在还没有被清晰地定义,在未确定这个新技术有什么优势前,它就已经被四处套用,甚至投入运营。

Ionic 是一个强大的 HTML5 应用程序开发框架,具有速度快,界面现代化、美观等特点。为了解决其他一些 UI 库在手机上运行缓慢的问题。
Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

智能手机革命给开发人员带来了许多挑战。面对不同的移动平台,如IOS,Android和Windows Phone,每个应用程序都使用不同的编程语言。

如果你在一间被热衷新技术的管理人掌控的公司里任职,如果你走运,那么漫画人物呆伯特先生可能非常愿意坐在你隔壁的小房间。

  • PhoneGap/Cordova

使用JavaScript框架,可以构建能在所有移动操作系统上运行的跨平台移动应用程序。任何熟悉编程语言(如HTML,CSS和JavaScript)的人都可以轻松构建跨平台移动应用程序。今天小卓分享的文章将介绍2017年八大热门JavaScript开发框架,希望可以帮到大家。

两种看法

PhoneGap是一个软件开发框架,它允许你利用现有的 Web 开发技术快速开发混合手机应用程序,如,HTML、CSS 和 JavaScript。PhoneGap 是在 Web 应用程序代码和移动系统 API 之间进行对接的中介。下图能帮助你理解它:

必威手机官网 3

当人们讨论移动设备上的HTML5技术时,他们通常只会有两种不同的看法。

必威手机官网 4

**框架01PhoneGap**

从感性的角度来看,HTML5技术的渲染过程主要是由浏览器、内嵌HTML5解析器的应用程序(如PhoneGap)、支持书签打开方式的应用程序又或者是移动手机产品(iPhone和iPad)进行的。这种技术的好处就是能重用现有的网页设计,Web开发人员也更容易上手,同时产品具备更高质量,更适用于多平台产品。也更易于调试和修正错误,并且,版本更新会更快。此消彼长,优势是它的功能,如果你像PhoneGap一样使用内嵌的架构,那么你会少很多麻烦事,劣势就是它的表现,这也是HTML5技术面临的最大难题。

image

PhoneGap是由Adobe System开发的基于Cordova的开源框架。

从理性的角度来看,HTML5技术就是使用JavaScript引擎直接控制本地功能,改变移动设备上的浏览器组件。而HTML5应用上的表现问题更多是由HTML/CSS渲染技术控制的,而不是由JavaScript解析生成的。如果使用正确,HTML5技术无疑可以给予你大量新增的表现效果。目前使用HTML5技术的例子包括Appcelerator Titanium、Mobage/ngcore、Game Closure以及PhobosLabs。

在PhoneGap的帮助下,你可以使用和普通JavaScript,HTML和CSS一样的代码,还可以为Android和iOS等移动操作系统生成API

它是开发移动应用程序的常用JavaScript框架。它可用于为所有移动操作系统平台(如iOS,Android,Windows等)生成应用程序。

Node.js工具包

  • Titanium
    Appcelerator的 Titanium 框架是一个允许你用像HTML,CSS,JavaScript这样的web技术来开发原生应用(移动和桌面应用)的开源应用开发平台。Titanium移动SDK是时下最流行的跨平台移动开发解决方案,目前为止已经有超过916109个移动开发者和460,587,474个设备使用了Appcelerator提供的驱动程序。

必威手机官网 5

以PhobosLabs的项目为例,当这个项目是使用WebKit的JavaScriptCore组件完成,在设备端使用OpenGL渲染界面,而在开发时使用HTML5的canvas组件的API开发。这就是说,开发人员可以在一个对canvas有良好支持的桌面浏览器内开发和测试他的HTML5游戏,并且当他将这个游戏放到移动设备的浏览器打开时,也会出现同样优秀(甚至更优秀)的表现效果。这种用HTML5开发的效果跟使用Node.js工具包开发的效果很相像,使用Node.js时,只需启用JavaScript引擎,而你仅需把你需要使用的Node.js组件添加到你的应用即可。

这里是Titanium框架的工作体系图:

PhoneGap允许创建离线或在线可用的应用程序。开发人员必须使用标准API,使其应用程序在所有移动操作系统上都能正常运行。PhoneGap还可以将网站转换为应用程序,只需上传网站上的数据内容,PhoneGap会自动将其转换为各种应用程序文件。

Appcelerator的Titanium详述了HTML5技术的概念,给我们展现了一个完整的UI工具的抽象层,这使得它可以被应用到生成其他游戏产品。意即一个HTML5应用开发人员可以通过Appcelerator的JavaScript UI库创建按钮,而Appcelerator的内部逻辑会将这个按钮转换为iOS的原生界面按钮。我们可以通过JavaScript控制界面上的原生按钮。理论上,开发人员可以不需要写一句Objective-C代码。

必威手机官网 6

**框架02Titanium**

本文由必威发布于必威-前端,转载请注明出处:我们正在用HTML5编写我们下一套移动产品必威手机

相关阅读