用HTML和Javascript開發iPhone/Android原生軟體－Mobile Web App Framework總整理

源自：http://www.lis186.com/?p=2030阿修的部落格

 

近年來smartphone大行其道，iPhone和Android的能見度越來越高，這些裝置內建的瀏覽器功能進展快速，對於HTML5和 CSS3的支援程度有時候更勝於電腦上的瀏覽器。就因為如此，對於熟悉網站開發技術的開發者而言，這是一個跨入Mobile App的絕佳機會。因為我們不一定需要去學習Objective-C或Java這些不熟悉的語言才能開始撰寫行動裝置上的應用程式。就如同在在開發一般網 路應用程式一樣，選擇一套好用的framework，絕對是事半功倍。很幸運的是因為時勢所趨，目前Mobile Web App Framework選擇性其實不少，不過到底有哪些？要怎麼選？就變成一個困難的課題了。

這些不同的Mobile Web App Framework，我認為在功能上應該可分為三大部份。

UI Component：提供適用於觸控螢幕的UI元件

Javascript Library：讓開發更有效率的Javascipt函式庫。

Wrapper：把Mobile Web App包裝成原生軟體 (Native App)，同時提供一些function讓javascript可以存取一些底層的功能(例如：相機、檔案系統、各類sensor)。

如果只是要開發Mobile Web App，就不需要Wrapper。如果想包裝成native app上App Store或Android Market去賣，就得用上Wrapper。而UI Component和Javascript Library則是可以依照自己的喜好選擇用或不用。

下面的表格就是依照上面三大部份和支援的裝置整理出來的清單，轉跳後有各framework的簡要說明。

 

baseJS

官方網站：http://paularmstrongdesigns.com/projects/basejs/
最後穩定版本：1.0rc1 (2009/1/12)
檔案大小：8k

一套為Safari, Firefox和Mobile Safari設計的輕量化javascript framework，目前和以後都不支援IE。

iAd JS

官方網站：http://developer.apple.com/iad/
最後穩定版本：1.1.1 (2010/7/23)
檔案大小:225k

iAd JS是Apple為了iAd廣告而設計的javascript framework，只支援iOS4以上的iPhone和iPod Touch。不過已經有開發者把它用於app的開發。需要和Apple付費申請iOS Developer Program才能使用。

iUI: iPhone User Interface Framework

官方網站：http://code.google.com/p/iui/
最後穩定版本：0.31 (2009/10)
檔案大小：115k

iUI是一套包含Javascript library, CSS和影像的iPhone web app framework，能夠讓web app有和native app相同的外觀，並提供螢幕旋轉偵測。

Jo HTML5 mobile app framework

官方網站：http://joapp.com/
最後穩定版本：0.2.0 (2010/9/25)
檔案大小：41k

另一個為行動裝置設計的輕量javascript framework，對於HTML5的支援較其他framework豐富，包含WebQL, Audio。設計上比較特殊的部份在於UI元件的抽象化，因此能夠在不同的裝置上顯示對應的UI。

jQTouch

官方網站：http://www.jqtouch.com/
最後穩定版本：1.0beta2 (2009/10/6)
檔案大小：12k (別忘了還得加上jQuery的57k)

jQTouch是一個jQuery的外掛，jQuery的開發者能夠用最短的時間開發iPhone web app，支援自訂主題和extension。

jQuery Mobile

官方網站：http://jquerymobile.com/
最後穩定版本：預定於2010年底釋出

jQuery和jQiery UI的行動版本，強調跨裝置(Smartphone和Tablet)跨平台( iOS, Android, BlackBerry, bada, Windows Phone, webOS, symbian和MeeGo )，提供jQuery核心與UI widget。

PhoneGap

官方網站：http://www.phonegap.com/
最後穩定版本：0.9.1 (2010/6/8)

PhoneGap是一套開發原始碼的包裝軟體 (Wrapper)，能夠把Mobile Web App包裝成原生軟體，支援iPhone/iTouch, iPad, Google Android, Palm, Symbian和Blackberry。透過PhoneGap所提供的Javascript library，便可以取得聯絡人、加速計、位置資訊，還能控制震動。

Sencha Touch

官方網站：http://www.sencha.com/products/touch/
最後穩定版本：beta 0.96 (2010/10/1)
檔案大小：80k

由ExtJS、jQTouch和Raphael(一個SVG library)整合而成的HTML5 mobile web app framework，支援iPhone, iPad與Android觸控裝置。具有完整的touch event (tap, double tap, swipe, tap and hold, pinch和rotate)、data integration (Ajax, JSONp及YQL)和完善的UI元件。

iWebKit

官方網站：http://iwebkit.net/
最後穩定版本：5.04 (2010/3)
檔案大小：4k

一個輕量的iPhone mobile web app freamework，主要功能在於利用CSS3模擬navitve app的外觀。

MooTouch

http://dailyjs.com/2010/03/24/mootouch/

官方網站：http://gist.github.com/341230
最後穩定版本：(2010/3/31)
檔案大小：37k

MooTools javascript framework的外掛，目的在於模擬iPhone native UI。

Titanium Mobile

官方網站：http://www.appcelerator.com/products/titanium-mobile-application-development/
最後穩定版本：1.2.1 (2010/4/7)

Titanium Mobile讓你使用javascript、HTML5和CSS3就能打造iPhone和Android native app。因為它與OS深度整合，因此它能夠使用Camera、存取檔案系統、本地資料庫，在通訊方面則支援SOAP和YQL。如果功能還不 夠，Titanium Mobile也允許使用Objective-C和Java擴充，再運用javascript呼叫。

PastryKit

官方網站：無
原始檔：
http://help.apple.com/iphone/3/mobile/dist/PastryKit-ug-compact.js
http://help.apple.com/iphone/3/mobile/dist/PastryKit-ug-compact.css
Apple官方自己使用的javascript library，在iPhone上Safari預設書籤裡的iPhone使用手冊(用 iPhone打開才看得到效果)就是使用PastryKit打造而成的。PastryKit能夠讓Mobile Safari有著和native app有相同的外觀（隱藏網址列、固定位置的工具列、重新定義頁面捲動）。因為不是公開的framework，因此目前沒有正式的文件，目前僅有零星幾篇介紹和功能說明。

UiUIKit

官方網站：http://code.google.com/p/iphone-universal/
最後穩定版本：2.1 (2008/9)

UiUIKit是一個模擬iPhone native UI的HTML/CSS3 framework，並提供原始的PSD影像檔。

Unify

官方網站：http://unify.github.com/unify
最後穩定版本：1.0 (2010 Q3)
檔案大小：41k

在destop, smartphone和tablet上模擬native app的web app framework，能夠與Adobe AIR和Phone Gap整合，算是支援平台最廣的framework，不過在2011 Q3才會提供tablet的UI元件。

WebAPP.Net

官方網站：http://webapp-net.com/
最後穩定版本：0.5.2 (2010/2/6)
檔案大小：25k (javascript部份)

一個輕量化的javascript iPhone web app javascript framework，提供基本的UI元件與AJAX功能(附php proxy供跨網域存取)。

XUI

官方網站：http://xuijs.com/
最後穩定版本：1.0.0 (2010/5/28)
檔案大小：7.8k

PhoneGap的開發團隊認為現代javascript framework (例如：jQuery, Ext, MooTools等)在行動裝置上載入過於緩慢。因為這些framework都有很強大的跨瀏覽器相容性，而在手持裝置上這些並沒有必要。於是他們打造了 為行動裝置瀏覽器最佳化的XUI。XUI目前支援WebKit, Fennec和Opera，未來也有計畫IE Mobile和BlackBerry。
語法與jQuery相近，實作了方便的選取器, DOM操作, Event handeling, Style, Fx與XHR。

zeptojs

官方網站：http://github.com/madrobby/zepto
最後穩定版本：(2010/10/8)
檔案大小：1.6k

為行動裝置最佳化的javascript framework，相容於iOS 4+, Android 2.2+和webOS 1.4.5+，語法與jQuery相近。