十一個基本的移動Web編程工具和框架
但有挑戰就有機遇,部分軟件開發商已經將注意力轉向構建移動工具和庫,旨在建立一個充滿活力的生態系統,以幫助移動開發,特別是移動Web開發。隨著HTML 5的成熟,也讓許多開發商看好移動Web的發展前景。
首先,網站是開放的,產品發布或升級不需要App Store那樣的審核團隊批準。
其次,開發人員可以獲得他們移動應用程序100%的收入,當然,你必須找到一種收錢的方法,實施起來可不是那么簡單,蘋果收取的30%收入可以說是一個嚴重的關稅。
第三,HTML 5變得越來越強大,功能越來越豐富,最新版本允許你在客戶端保存數據,可以做本地應用程序可以做的大部分事情,可以說,瀏覽器沙盒和本地代碼沙盒的功能幾乎完全一樣。
第四,HTML 5應用程序與設備無關,雖然很多炒作都是圍繞蘋果的iPhone展開的,但HTML 5應用程序可以很容易地移植到其它平臺,雖然沒有簡單到按一下按鈕就解決問題的地步,但比從Objective C轉換到Java要簡單得多了。
當然,限制也是有的,Web應用程序可能會陷入連接問題,它們比本地應用程序可能要慢一點,許多本地應用程序開發人員喜歡用毫秒數來表示延遲,喜歡談論多少毫秒是可以接受的,游戲開發人員需要加倍思考JavaScript中的代碼響應問題。
最大的限制可能是開發本身,蘋果的工具對開發本地應用程序來說的確很好,但它卻很難深入挖掘運行在移動瀏覽器上的代碼結構。隨著人們對移動開發和移 動Web的興趣與日俱增,催生了大量的庫和工具,借助它們大大簡化了移動應用程序的構建過程,下面這些優秀的項目都很有潛力,未來的移動Web開發在它們 的幫助下將會更加簡單。
#p#
1、ChocolateChip-UI
移動設備的屏幕通常較小,這是UI設計師的一大考驗,美國北加州一名Web開發人員Enter Robert Biggs開發了ChocolateChip-UI,一個使用HTML生成整個程序界面的框架。
從技術上來講,開發人員創建的底層代碼是WAML(Web應用程序標記語言),一個構建在HTML 5之上的標記語言,大多數簡單的工作都是用WAML標記(如或)實現的,該框架的JavaScript遍歷WAML,并將其轉換成純HTML 5代碼。
你可以將HTML、CSS和JavaScript代碼混入WAML,它指導ChocolateChip-UI順序執行轉換過程。
雖然這個方法不是完美的,我也能理解為什么Biggs會選擇這條路。
ChocolateChip-UI收集的WAML Widget是相當全面的,它們的外觀也和標準的iPhone UI類似,甚至包括刪除列表,讓用戶輕點幾下就可以從列表中消除元素。
下載ChocolateChip-UI:http://www.chocolatechip-ui.com/downloads.html
2、Mobl
Web開發人員對JavaScript有許多不滿,Moble團隊決定做點什么消除這些不滿情緒,于是便誕生了創建可在WebKit瀏覽器中運行的 移動應用程序框架,不使用HTML、JavaScript和CSS轉換你的代碼,相反,你在Moble中編寫代碼,由Moble編譯器將它們轉換成移動瀏 覽器支持的HTML、JavaScript和CSS代碼。
這個方法讓Moble團隊一舉解決了JavaScript中一些比較棘手的問題,例如,如何將一個函數傳遞給其它函數以便延遲執行,跟蹤JavaScript所有必要的嵌套括號,如果靠人工檢查,可能很快就會犯暈,出錯的幾率極具上升。
Moble通過采用更多的聲明性語法擺脫了復雜性,如果你想暫停1000毫秒,可以這么寫:
- sleep(1000); doNext();
Moble使用一個setTimeout函數和一個執行doNext()的回調函數將其編譯成JavaScript,作為一名開發人員,你不用思考回調語法,也不用思考如何封裝到另一個函數中,你需要做的是寫一個你想看到的事件發生列表。
Mobl團隊有很多種方法幫你編寫這些代碼,而不必注意JavaScript中的標點符號,最終的結果是一套移動應用程序標準語法的集合,想要一個滾動列表?只需要使用group關鍵字將你的項目清單打包起來即可。
不喜歡這個方法的開發人員可能是已經習慣了Objective-C或JavaScript,在他們看來,既然最終還是要轉換成已經明白的語言,何必要去學習另一種語言呢?
下載Mobl:http://www.mobl-lang.org/get/#p#
3、jQuery Mobile
當jQuery框架背后的開發團隊決定進入移動平臺,為智能手機構建一個簡單的UI工具箱時,注定會引起廣泛的關注,結果不出大家意料,jQuery Mobile項目得到了廣大硬件制造商的支持,和許多移動設備成了捆綁關系。
jQuery Mobile最簡單的部分是它以HTML為中心的布局,頁面(Page)置于DIV和其它標準HTML組件,因此jQuery Mobile很容易和動態網站以及CMS集成,因為它往往只是增加了一個新主題或皮膚,如很多Drupal主題和模塊就是圍繞jQuery Mobile創建的。
與jQuery緊密集成意味著許多但不是所有桌面插件也可以在移動網站上運行,也有一部分移動插件擴展了移動框架,圍繞jQuery Mobile建立的生態系統將會迅速擴大。
下載jQuery Mobile:http://jquerymobile.com/download/#p#
4、The-M-Project
如果jQuery Mobile的方法和風格集還不夠復雜,The-M-Project提供了一套可以編譯成jQuery Mobile對象的Widget,它處于許多設計細節問題,如將某個圖標放在正確的位置,以便你可以將注意力放在大局觀上。
代碼使用視圖-模型-控制器模式結構化,大部分工作是構建一個大型JSON結構,定義不同的頁面和位于這些頁面內的Widget,布局通過The-M-Project處理。
應用程序的行為是通過為每個頁面創建連接到各種事件鉤子的函數定義的,The-M-Project確保事件抵達它們的位置。
構建和部署過程和Node.js集成,構建代碼也運行在Node.js中,測試使用相同的服務器完成,當它工作時,你可以攜帶代碼和庫的混合物到任何Web服務器,你也可以將它和Node.js進一步集成。
下載The-M-Project:http://the-m-project.net/#p#
5、Touchqode
當你坐在巴黎的咖啡館里慢慢品味咖啡的香味,當你登上珠穆朗瑪之巔,或任何未帶筆記本電腦或沒有桌面電腦的情況下,如果突然冒出一個想法,這時你是 用一張廢紙記錄下來,等回到電腦前再錄入,還是拿出你的Android手機,打開Touchqode將這個想法記下來(iPhone版本很快就會到來)?
這個微開發環境在一個小小的屏幕上打包了數量驚人的功能,代碼高亮,腳本可本地運行,你可以通過FTP同步你新增或修改的代碼,當你在旅途中,上司 打電話要你協助解決一個問題,這時你只需點擊幾次按鍵可能就會解決問題。我不能想象使用Android手機編寫很長的代碼會怎么樣,但我知道有寫手在手機 上完成了他們的長篇小說,因此,使用Touchqode在手機上修改少量的代碼還是可行的,在緊要關頭,它的作用就是顯得淋漓盡致。
下載Touchqode:http://www.touchqode.com/download.htm#p#
6、LimeJS
Flash游戲變得如此引人注目的一個原因是,整個生態系統已經非常成熟和完善,DigitalFruit創建LimeJS旨在為開發人員提供更好的支持,幫助他們更好地使用HTML 5中的WebGL對象。
早期的LimeJS在WebKit瀏覽器中是有效的,它的代碼全部是用JavaScript寫成的,但結構看起來和曾經風光無限的C類似,只不過它調用的是OpenGL庫,它應該可以自動交叉編譯一些OpenGL到這個庫中,雖然這需要一些手工調整。
LimeJS為簡化游戲開發提供了一些有價值的功能,有使用層填充的場景,根據靈活的調度觸發事件的指示器,有跨頁面移動精靈的動畫和過渡,所有這些功能對此前開發過休閑游戲的人來說是無比熟悉的。
開發環境包括多個現代觸摸,基本建筑是用Python處理的,最終包可能會和Google的閉包編譯器綁定在一起,以便提高下載速度。
LimeJS將會吸引那些在其它環境中使用OpenGL框架開發游戲的人,雖然最終語法是JavaScript,但它不依賴于讓JavaScript感到討厭的更復雜的想法,至少要等到閉包編譯器完成它的工作。
下載LimeJS:https://github.com/digitalfruit/limejs#p#
7、Jdrop
從表面上看,Jdrop似乎是大量JSON的堆積,可能被誤認為是一個開放的NoSQL數據庫,實際上,這個Web資源是幫助移動開發人員管理小屏幕和桌面之間的性能數據,以便可以得到更好的分析。
為了緩解從移動設備提取性能數據的困難,Jdrop提供了Mobile Perf,一個聚合了一套性能書簽的書簽,包括Firebug Lite,Page Resources,DOM Monster,SpriteMe,CSSess和Zoompf,借助Mobile Perf,你可以在手機上調試你的應用程序,結果自動保存到Jdrop云,以便以后從桌面進行分析,提供一個有趣的方法調試真正的移動性能,以及分析你喜 愛的移動網站的HTML源代碼。
下載Jdrop:http://jdrop.org/#p#
8、XUI和Zepto
本文介紹的大多數框架都有自己的一套語言,而XUI和Zepto不同,它們從一開始就認為HTML和CSS在展示頁面內容時已經夠好,唯一需要提供幫助的是創建和修改DOM。
這些庫不會布置你的Widget,也不會創建任何類型的Widget,你獲得的是HTML能提供的,因此外觀是借助CSS來控制的,這里的庫通過提供查找元素,連接類和篡改事件幫助你操作DOM。
Zepto的最新版本大約2300字節,約jQuery的1/10,XUI稍微大一點,和jQuery更易于比較,因為兩者的語法都差不多,例如,XUI產生的代碼可能需要保持兼容BlackBerry或IE Mobile,如果你想要它們,你的庫將會變得更大。
下載XUI:http://xuijs.com/downloads
下載Zepto:http://zeptojs.com/#p#
9、Jo和Sencha Touch
Jo 和Sencha Touch是兩套使用JavaScript創建面向卡片式移動應用程序的Widget,其結構是由一套創建Widget的JavaScript函數定義 的,這些Widget按庫排列,因此在屏幕上看起來效果很好,它們的代碼通常包括大量嵌套的組裝部件的函數調用,然后調用其它將小部件組裝成大部件的函 數。
Sencha Touch是一家名叫Sencha的新興公司創建的,它也為普通Web頁面提供了一個框架,公司靠銷售支持計劃為生,使用Sencha Touch并不需要為商業許可付費,公司的開發團隊親自回答用戶的問題,維護一個開放的支持社區。
Jo是一個開源項目,以OpenBSD許可形式發布,可以免費使用,Jo的開發者Dave Balmer為那些需要的人提供幫助和支持。
我曾用Sencha Touch創建了幾個Web應用程序,發現整個開發過程相對容易,因為框架處理了許多布局問題,在最好的情況下,我只需要創建一個新的Widget對 象,Touch框架自動將它放入頁面合適的位置,看起來還不錯,盡管屏幕大小不一樣,但有些應用程序在iPad和iPhone上可以很好地運行。
目前,Jo和Sencha Touch的文檔相對較少,在這方面應該盡快做好彌補,暫時只有Sencha的商業支持提供深入的文檔。
下載Jo:https://github.com/davebalmer/jo/downloads
下載Sensa Touch:http://www.sencha.com/products/touch/download/#p#
10、jQTouch
jQTouch是移動Web應用程序最偉大的框架之一,它的創造者,David Kaneda已經離開項目,現在為Sencha工作,但Jonathan Stark接過了大旗,繼續對代碼做值得做的調整。
jQTouch應用程序是在DIV中插入HTML生成的,jQTouch解析這些DIV,尋找合適的類,然后插入它自己的代碼處理事件。
我用jQTouch創建了幾個Web應用程序,發現它和創建一個Web頁面一樣簡單,它也和動態Web工具,如JSP,PHP和其它基于服務器的框架更容易集成。
在正確的情況下,代碼看起來和本地應用程序的代碼一樣,但有時我發現一些奇怪的故障和沒有意義的轉換,有些觸摸事件在某些平臺上反應也有點慢。
下載jQTouch:http://jqtouch.com/#p#
11、PhoneGap
另一個最大,最成功的開源移動框架是PhoneGap,一套非常簡單的例行程序集,它允許你使用HTML,JavaScript和CSS代碼為智能 手機構建本地應用程序。本文介紹的許多JavaScript框架在發給App Store之前,都意欲和PhoneGap捆綁在一起。
原理非常簡單:這個框架打開一個解析HTML的視圖。在iOS上被稱為UIWebView,但在所有主流智能手機開發堆棧中都有類似的組件,其目標 是讓相同的HTML,JavaScript和CSS代碼在所有主流平臺,如Android、iOS、BlackBerry和WebOS上都能工作。
從我使用PhoneGap的經驗來看,它的方法通常可以在不同平臺上正常工作,我只花了一個小時,就將一個Web應用程序轉換成iPhone和Android本地應用程序,PhoneGap幫我完成了大部分工作。
但它仍然不是完美的,我曾發現,盡管Android和iOS都使用WebKit核心,但相同HTML和CSS在Android和iPhone上的顯 示效果不一樣,雖然我后來沒有創建完整的BlackBerry和WebOS應用程序,但出現任何小問題我認為都是正常的,不管怎樣,PhoneGap可以 將你的Web應用程序從相對簡單變得相對通用,相對快速。
下載PhoneGap:http://www.phonegap.com/