移动Web开发13个重要的开发工具

移动开发
移动web的开发常常给开发者提出一些艰难的选择。开发的应用究竟是针对iPhone市场还是针对Android用户?到底是写一个native app还是开发一个移动Web应用?开发一个能够在所有设备上兼容的应用是所有程序员的梦想,但是各种设备的差异性打破了大家的这个梦。

随着这种需求的日益增长,越来越多的开发者开始关注移动开发工具和开发库的开发了,他们试图帮助移动开发者扫平实现梦想的障碍。

虽然这套工具的开发目前尚不成熟,但是HTML5的出现让大家看到了移动Web开发的光明前景,它让用户摆脱了对native软件的依赖。

首先,web是完全开放的,它不用受到App Store的协议限制。

其次,程序开发人员能够获得100%的收益。当然,这也意味着必须找到一种新的获得收益的方式,这一点并不简单。但是,一旦找到了合适的方法,程序员就不用再将自己30%的收益拱手让给Apple了。

第三,HTML5变得越来越强大了,功能也变得更加丰富了。最新的HTML5版本已经能够支持客户端在本地保存数据了,目前基本能够替代native app的功能。换句话说,浏览器已经基本能够取代native apps的地位了。

第四点,HTML5 apps不与具体设备绑定。虽然目前大部分的宣传还是围绕着Apple的iPhone,但是HTML5 apps是比较容易迁移到其他平台上的。虽然可能还没简单到按下一个按钮就完成平台的迁移,但是起码和Objective C转换为Java的工作比起来,还是简单许多的。

当然,HTML5也不是万能的。Web apps最大的缺陷就是对网络连接的依赖。它确实不如native apps响应及时,而native app的开发者常常在讨论微秒级的延迟是否会影响用户的体验。游戏开发者在使用JavaScript编程前需要再三权衡一下。

目前最大的限制可能就是工具本身的开发。Apple的开发工具能够看到native apps的结构,而移动浏览器却很难深入了解上面运行的应用程序的代码结构。现在已经有一些开发工具和开发库来帮助程序员简化web开发的难度。下面介绍一些移动web开发中著名的相关项目。

移动web开发工具:ChocolateChip-UI(下载

由于移动设备上的屏幕通常都比较小,因此为移动设备设计一个有效的UI显得尤为重要。Enter Robert Biggs是一个来自Northern California的Web程序员,他开发的ChocolateChip-UI成为使用HTML开发移动界面的优秀示例。

开发中使用的WAML(Web Application Markup Language)是基于HTML5封装的编程语言。使用WAML提供的标签(如<slider>或是<stack>)能够极大地简化开发者的工作。可以在JavaScript中使用WAML并在支持HTML5的智能手机上运行。

程序员可以将HTML、CSS、JavaScript和WAML组合起来,只需指定好ChocolateChip-UI的翻译进程即可。

虽然这种做法并不完美,但这已经足够好用了。我之前曾用过其他的移动开发工具,他们都不能很好地封装在JavaScript中。

ChocolateChip-UI已经基本将所有的WAML提供的组件都封装好了,效果几乎与标准的iPhone UI相当。它甚至还包括了一个额外的删除列表,用户通过点击鼠标就能将组件从UI上删除。

移动Web开发工具:Mobl(下载

JavaScript使用起来不算太简单,而Mobl就是用来简化JavaScript的开发的。Mobl是专门用于Webkit浏览器上应用开发的框架。它不使用HTML、JavaScript或是CSS编写程序,而是直接使用Mobl编程,然后通过Mobl编译器将它转换为适合在移动浏览器上运行的HTML、JavaScript和CSS语言。

Mobl开发者使用这种方法弥补了JavaScript的不足。例如,它解决了延迟执行的函数传递问题;跟踪括号的配对问题(程序员对JavaScript的这一缺陷常常感到头痛,并且容易导致错误产生)。

Mobl通过使用大量的申明降低了程序的复杂度。如果你想传递1,000毫秒,你可以写:

sleep(1000); doNext();

Mobl将这条语句翻译成JavaScript,通过setTime函数执行时间传递,通过回调函数执行doNext()语句。程序员无需考虑回调函数的语法以及函数的封装方法,只要将希望发生的事情列举出来就可以了。

Mobl提供了几十种方法帮助程序员编写指令,并且不需要考虑这些指令是如何转换成JavaScript的。如果你想要编写一个下拉菜单,这很简单,只需要将菜单中的选项用关键字表示出即可。

对于已经熟悉了Objective-C或是JavaScript的程序员来说,可能觉得Mobl没有太大意义。毕竟,他们能够用自己熟悉的语言编写很好的程序,又何必去学习一种新的语言来完成同样的工作呢?但是,对于编程语言的热爱者来说,他们能在Mobl上发现许多好的、有意思的想法,而Mobl确实可以简化他们的开发工作。

 

移动开发工具:jQuery mobile(下载

51CTO专题报道:jQuery Mobile基础入门教程

基于jQuery框架开发一个移动平台并为智能手机开发一个简单的UI工具显然是迎合大众需要的。这个项目得到许多主流硬件厂商的支持,也一定能够在移动设备上取得成功。

jQuery Mobile中最简单的部件是HTML-center布局部件。它使用DIVs和其他标准的HTML部件(如<LI>标签)来构建页面。jQuery Mobile通常只需要开发者添加几个新的主题或是皮肤,它就能够非常方便地处理动态网页和CMSes了。

使用jQuery意味着,大部分桌面网站上可用的插件在移动网站上也是可用的。也有一些专门为移动网站开发的插件。jQuery Mobile拥有轻量级架构和丰富的资源组件,不难看出它将在未来的移动开发中占据重要地位。

移动开发工具:The-M-Project(下载

如果说jQuery Mobile无法精确地处理网页中的方法和风格的话,那么The-M-Project则为开发者提供了一组经jQuery Mobile对象封装的部件。使用它能够更好地控制网页的设计细节,例如可以在某个合适的地方添加一个图标,而不仅仅是添加一张大的图片。

代码采用Model-View-Controller模式。开发者创建一个大的JSON结构,在上面定义各个不同的页面以及页面上用到的各种组件。使用The-M-Project处理页面的布局信息。

在每个页面的事件钩子上定义一组功能函数,用来实现应用程序的功能。The-M-Project维护事件与页面相应位置的对应关系。

工具可以直接使用Node.js,代码可以在Node.js中运行,甚至可以在相同的服务器上完成测试。开发出来的应用可以在任何Web服务器上运行,也可以进一步将它整合到Node.js中。

移动开发工具:Touchqode(下载

假设你正坐在巴黎的一家咖啡馆,或是在珠穆朗玛峰的峰顶,你手头上没有台式电脑或是笔记本,如果此时你的脑海中浮现出一个很妙的想法,你是不是只能找张纸粗略地描述一下你的想法,然后等到合适的时候再实现这个想法呢?如果此时你的Android手机上正好安装了Touchqode,那么你大可不必这么麻烦了。

这个小小的开发工具包含的功能丰富得惊人:代码可以高亮显示,可以在本地运行脚本,甚至可以通过FTP同步新加的代码。如果你的老板在你旅行的途中让你修改一下代码,有了Touchqode,这并不会给你带来多大的麻烦。我无法想象怎样使用我的Android手机编写很长的代码程序,但是已经有作者使用手机完成整部小说的创作了,所以,不要低估Touchqode在手机编程领域的作用。

不管怎么说,Touchqode在紧要关头还是非常派得上用场的。

移动开发工具:LimeJS(下载

Flash游戏之所以如此引人关注,一个重要的原因就是它有非常丰富的flash库。Flash库的开发者将他们的工作出售给Flash开发者,从而获取收益。同样的,DigitalFruit开发出了LimeJS,并将它出售给想使用WebGL对象的开发人员。

LimeJS的早期版本在Webkit浏览器上还是非常好用的。代码使用的是JavaScript,但结构看起来更像是C语言,它调用了OpenGL的库。一些OpenGL库和LimeJS可以自动完成交叉编译,但通常还是需要手动调整部分内容。

LimeJS提供了一些简化游戏开发的功能。它提供了一些场景和一个灵活的事件管理机制。它还附带有一些动画和效果转换机制。所有这些功能都是游戏开发人员经常使用的功能。

开发环境的基本架构使用的是Python,最后的开发包与Google的Closure Compiler绑定,下载速度相当不错。

对于那些使用OpenGL开发游戏应用的程序员来说,LimeJS还是非常有吸引力的。虽然它使用的是JavaScript,但是它并没有用到JavaScript中复杂的编程思想。

移动开发工具:Jdrop(下载

表明上看,Jdrop似乎是由一堆JSON组成的,它常被误解为一个开源的NoSQL数据库。事实上,Jdrop是用来帮助程序员处理台式机和移动设备上屏幕显示差异的开发工具。

为了简化从移动设备上提取性能反馈的复杂性,Jdrop为开发者提供了Mobile Perf组件,它是一个累积性能的标签,其中包括Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess, 和Zoompf。程序员可以使用Jdrop直接在手机上调试程序,并能够自动将结果上传到Jdrop云上,方便开发者在台式机上对运行的数据结果进行进一步的分析。它还能用来调试真实移动设备上的性能并检查移动网站的源码。

 

移动Web开发工具:XUI(下载),Zepto(下载

大部分框架所做的主要工作就是将一个应用程序转换成一个很炫的网页,通常它们需要使用自己特定的编程语言。而XUI和Zepto则与这些框架不同。它直接使用HTML和CSS,这已经使得它能够显示开发者想要呈现的各种效果了,而它只是为开发者提供了创建和修改DOM的方法。

这些库并不会重新组合各种部件或是创建任何新的部件。它只提供HTML里面有的部件,开发者可用使用CSS来控制这些部件。这些库为开发者提供了处理DOM的各种方法,如寻找组件、添加类或是丰富事件等等。

这两个库最大的优势就是节省空间。Zepto目前的版本只占2,300个字节,仅是jQuery的十分之一。而XUI则稍微大一点。与jQuery对比是合适的,因为它们提供的功能是相当的。例如,XUI不能在BlackBerry或是IE mobile上兼容。如果你想让它在这些设备上兼容,那么你需要一个更加大的库。

移动Web开发工具:Jo(下载)和Sencha Touch(下载

51CTO专题报道: Sencha Touch基础入门教程

Jo和Sencha是两组部件集合,适用于使用JavaScript开发的移动设备。通过JavaScript定义的结构可以调用这两个库的函数,使得屏幕上显示的页面更加美观。这些代码中通常包含比较复杂的功能调用和函数嵌套。

Sencha Touch是由Sencha公司开发的,Sencha公司专门为通用Web页面开发提供设计框架。它也出售支撑方案,但是并不对Sencha Touch收取版权费。该公司的研发团队会解决开发者的疑问,并且还提供了一个开放的技术支持论坛。

Jo是一个取得了OpenBSD授权的开源项目。开发者可以免费使用它,而它的开发者Dave Balmer还为用户提供各种帮助。

我已经使用Sencha Touch开发了几个Web Apps了,我发现这个工具使用起来相当方便,因为它很好地处理了许多常见的布局问题。我曾经自己创建了一个新的组件,而Touch框架很好地将这个新组件放置到了页面中合适的位置上。这些apps能够很好地在iPad和iPhone上运行,尽管二者的屏幕尺寸相差较大。

Jo和Sencha Touch目前的介绍文档还不完善。目前这方面的工作也正在逐步跟进。Sencha的商业版本有更加全面的介绍文档。

移动Web开发工具:jQTouch(下载

jQTouch是移动Web开发的最好框架之一。虽然他的开发者David Kaneda已经离开了这个项目转而投入Sencha,但Jonathan Stark接手了jQTouch的相关工作,并且对代码进行了优化和补充。

jQTouch开发的Apps是在DIVs中加入HTML。jQuery为DIVs选择合适的类,并加入事件处理代码。

我尝试用jQTouch开发了几个Web Apps,整体感觉jQTouch使用起来还是非常方便的。它可以很方便地与其他Web工具以及服务器端的框架整合在一起。

有些时候,使用jQTouch的代码可以达到native apps的效果。但是它还存在一些奇怪的问题,并且会处理一些没有意义的转换工作,在某些设备上的触摸事件响应速度也不够理想。

移动Web开发工具:PhoneGap(下载

51CTO专题报道: 跨平台移动web中间件PhoneGap开发入门

另一个使用广泛的开源移动框架就是PhoneGap,PhoneGap可以让开发者在智能手机上使用HTML、JavaScript和CSS编写各种native app。许多使用JavaScript编写的apps最后都要与PhoneGap绑定,然后通过App Store推向用户。

这个框架让开发者对HTML有了新的了解。在iOS上,它被称为UIWebView,而在其他的主流智能手机上也有类似的部件。它的目标就是使得HTML、JavaScript和CSS能够在所有的主流平台(如Android、iOS、BlackBerry和WebOS)上运行。

通过使用PhoneGap的几次编程经历看来,PhoneGap的使用方法通常是比较类似的。将一个Web App转变为一个能够在iPhone和Android上运行的native app,只需花费不到一个小时的时间。PhoneGap能够帮助开发者完成窗口的建立工作。

但是PhoneGap的解决方案不算完美。用户还是能够发现使用同一套HTML和CSS代码构建的应用,在Android和iPhone上的显示仍存在许多细微的差别,尽管Android和iPhone都支持同一套Webkit内核。虽然没有在BlackBerry和WebOS做类似的测试,但是不难想象,这两个设备显示的内容应该也有不少的差异。话虽如此,但是PhoneGap确实能够帮助开发者开发出更加通用,性能更好地Web App。

责任编辑:佚名 来源: webapptrend
相关推荐

2012-04-09 17:32:44

移动web

2012-02-09 16:45:41

2011-02-22 09:40:05

iOS开发工具

2015-07-03 11:36:00

AngularJS 开发工具

2020-06-24 08:24:09

Web开发工具

2012-03-07 16:15:22

GWTPhoneGap

2017-09-13 16:54:38

web

2010-09-29 14:06:09

Visual Basi

2015-07-27 10:55:13

JavaScriptWeb开发工具

2014-03-06 11:25:12

开发工具移动开发

2010-05-28 13:38:29

Linux开发工具

2011-08-05 14:34:13

2011-03-15 09:43:27

OperaWeb

2022-11-05 08:14:25

开发工具浏览器

2012-12-24 09:42:11

大数据应用开发辅助开发工具大数据

2009-07-10 18:14:58

Web开发工具Mozilla

2013-11-22 11:03:45

GoogleWeb开发工具

2011-11-23 09:59:56

Web

2018-05-05 15:09:19

移动APP开发APP

2013-12-06 09:51:56

Web apps开发工具Android
点赞
收藏

51CTO技术栈公众号