“我們正在用HTML5編寫我們下一套移動產(chǎn)品?！薄笆前?，這些天很多人在玩著Appcelerator，我也在玩著,?！薄班牛@并不是我要說的那種HTML5產(chǎn)品,?！?/p>

最近，我有很多類似的交流對話,，可能因為我正在開發(fā)一套HTML5的應(yīng)用吧,。就像2005年的“AJAX”，“HTML5”這個術(shù)語現(xiàn)在還沒有被清晰地定義,，在未確定這個新技術(shù)有什么優(yōu)勢前,，它就已經(jīng)被四處套用，甚至投入運營,。

如果你在一間被熱衷新技術(shù)的管理人掌控的公司里任職,，如果你走運，那么漫畫人物呆伯特先生可能非常愿意坐在你隔壁的小房間,。

兩種看法

當(dāng)人們討論移動設(shè)備上的HTML5技術(shù)時,，他們通常只會有兩種不同的看法。

從感性的角度來看,，HTML5技術(shù)的渲染過程主要是由瀏覽器,、內(nèi)嵌HTML5解析器的應(yīng)用程序 (如PhoneGap)、支持書簽打開方式的應(yīng)用程序又或者是移動手機產(chǎn)品(iPhone和iPad)進行的,。這種技術(shù)的好處就是能重用現(xiàn)有的網(wǎng)頁設(shè)計,，Web開發(fā)人員也更容易上手，同時產(chǎn)品具備更高質(zhì)量,，更適用于多平臺產(chǎn)品。也更易于調(diào)試和修正錯誤,，并且,，版本更新會更快。此消彼長,，優(yōu)勢是它的功能,，如果你像PhoneGap一樣使用內(nèi)嵌的架構(gòu)，那么你會少很多麻煩事,，劣勢就是它的表現(xiàn),，這也是HTML5技術(shù)面臨的最大難題,。

從理性的角度來看，HTML5技術(shù)就是使用JavaScript引擎直接控制本地功能,，改變移動設(shè)備上的瀏覽器組件,。而HTML5應(yīng)用上的表現(xiàn)問題更多是由HTML/CSS渲染技術(shù)控制的，而不是由JavaScript解析生成的,。如果使用正確,，HTML5技術(shù)無疑可以給予你大量新增的表現(xiàn)效果。目前使用HTML5技術(shù)的例子包括Appcelerator Titanium,、Mobage/ngcore,、Game Closure以及PhobosLabs。

Node.js工具包

以PhobosLabs的項目為例,，當(dāng)這個項目是使用WebKit的JavaScriptCore組件完成,，在設(shè)備端使用OpenGL渲染界面，而在開發(fā)時使用HTML5的canvas組件的API開發(fā),。這就是說,，開發(fā)人員可以在一個對canvas有良好支持的桌面瀏覽器內(nèi)開發(fā)和測試他的HTML5游戲，并且當(dāng)他將這個游戲放到移動設(shè)備的瀏覽器打開時,，也會出現(xiàn)同樣優(yōu)秀(甚至更優(yōu)秀)的表現(xiàn)效果,。這種用HTML5開發(fā)的效果跟使用Node.js工具包開發(fā)的效果很相像，使用Node.js時,，只需啟用JavaScript引擎,，而你僅需把你需要使用的Node.js組件添加到你的應(yīng)用即可。

Appcelerator的Titanium詳述了HTML5技術(shù)的概念,，給我們展現(xiàn)了一個完整的UI工具的抽象層,，這使得它可以被應(yīng)用到生成其他游戲產(chǎn)品。意即一個HTML5應(yīng)用開發(fā)人員可以通過Appcelerator的JavaScript UI庫創(chuàng)建按鈕,，而Appcelerator的內(nèi)部邏輯會將這個按鈕轉(zhuǎn)換為iOS的原生界面按鈕,。我們可以通過JavaScript控制界面上的原生按鈕。理論上,，開發(fā)人員可以不需要寫一句Objective-C代碼,。

HTML5技術(shù)有它的優(yōu)勢，當(dāng)你依然在使用JavaScript編寫代碼時,，你可以跟那些煩人的HTML/CSS布局邏輯和樣式聲明說再見,。你還可以跟那些優(yōu)秀的調(diào)試工具說再見。但這個技術(shù)也有蹩腳的一面,，像HTML5的游戲API Mobage就存在一些小毛病,，canvas組件可以在屏幕相對小一點的界面順利顯示，但如果屏幕稍微變大一點,，就好像Appcelerator的例子一樣,，在調(diào)試時,，你還需要考慮界面層額外的復(fù)雜性。在這里有很多Appcelerator的負面評論,，如果你能把上面的幾點記在心里,，那么那些負面評論其實都可以被理解。

問題還在瀏覽器

開發(fā)一個完整的HTML5手機應(yīng)用的首要難題就是運行速度過慢,。而第二大難題就是非常愚蠢的工具束縛,，許多組件或多或少在不同瀏覽器都存在一些漏洞，如jQuery Mobile的導(dǎo)航組件,、iOS的innerHTML組件的漏洞,，所以你需要減少功能去避免出現(xiàn)漏洞，又或者你愿意花一些時間去修復(fù)這些漏洞,。

你可以自己做個實驗,，當(dāng)你在一個iOS應(yīng)用里僅使用一至兩個界面庫時，再加上你自己寫的少量JavaScript代碼,，沒有更多的JavaScript庫,，你會發(fā)現(xiàn)這個HTML5應(yīng)用運行得流暢而完整，但卻沒什么功能,。PhoneGap的iOS項目僅需要1至2秒的時間就可以在iPhone 3GS上發(fā)布運行,。這個事實可以告訴你，最基本的HTML5應(yīng)用運行起來真的非常流暢,。所以,，當(dāng)你發(fā)現(xiàn)你的HTML5應(yīng)用的某些操作花費了10-15秒時間時，又或者花了15秒時間才加載完整個程序時,，這都是一些JavaScript界面庫給拖累的,。

兩套有代表性的UI庫

一個HTML5手機應(yīng)用程序員需要的通常只有那么兩樣?xùn)|西：第一樣就是原生平臺和網(wǎng)頁界面的嫁接層；第二樣就是手機UI庫,。

PhoneGap近年已逐漸成為默認的嫁接層選擇,，它允許HTML5應(yīng)用通過JavaScript調(diào)用移動設(shè)備的照相機、訪問手機通訊錄和讀寫文件,。而最受歡迎的手機UI庫就包括由jQuery Mobile和Sencha Touch,。

jQuery Mobile是去年才創(chuàng)建的一個項目，所以它是非常新的,，很顯然,，它也不夠成熟。jQuery Mobile的導(dǎo)航欄組件就非常糟糕,，翻頁時明顯比原生的翻頁功能要慢,，如果你不刷新瀏覽器,，你就沒有辦法遞增列表內(nèi)容,。而在PC桌面平臺測試時,，它的CPU耗用率也是非常高(版本是jQuery Mobile的alpha 4)。我的項目使用它,，主要是考慮到相對簡單(比較容易破解),，因為這個庫是基于jQuery構(gòu)建的，所以任何一個資深的網(wǎng)頁程序員都很容易上手,。

據(jù)說Sencha Touch比jQuery Mobile更成熟更快,。但我一看到高復(fù)雜性的東西，我就不會不自覺地厭惡它們,。因為潛意識會告訴我,，有很多功能我根本不會使用到，但卻強制加載這些額外的東西到我應(yīng)用里,，讓我應(yīng)用整體表現(xiàn)差了很多,。盡管我可能是錯的，PhoneGap應(yīng)用頁中最強大的手機應(yīng)用是IGN Dominate,，它運行得很流暢并且它就是基于Sencha Touch開發(fā)的,，但我確定他們肯定花了很多時間去優(yōu)化這個產(chǎn)品。

調(diào)試和修改

在上面談到的開發(fā)HTML5應(yīng)用時,，許多人可能都忽略了一點,，其實調(diào)試或修改一個HTML5應(yīng)用是很簡單的。任何一個曾參與過大型HTML5開發(fā)項目的開發(fā)人員都可以告訴你,，調(diào)試和維護幾乎占了整個項目生命周期的80%的時間,，甚至更多。這就是說,，當(dāng)你聽到一個開發(fā)工具宣稱可以在15分鐘內(nèi)開發(fā)一個聊天應(yīng)用時,，那么它可能只是能讓你在15分鐘內(nèi)解決20%的工作，剩下的80%,，你可能得耗上3倍以上的精力才能完成,。

HTML5手機應(yīng)用在調(diào)試時存在觸碰問題，因為無法打印出控制臺的日志,。所以,，如果JavaScript代碼存在漏洞或者報錯，你需要alert()報錯,，否則你可能沒法發(fā)現(xiàn),。PhoneGap修正了這個問題，它可以通過XCode的控制臺打印控制臺的調(diào)式日志,，但功能依然很有限,。

目前最有效的解決方案就是weinre。盡管漏洞百出，但它就是能跑起來,，有了它,，你還能斷點調(diào)試你的手機應(yīng)用的UI，weinre是基于WebKit的網(wǎng)頁檢查器的,，它的調(diào)式工具后臺通過遠程服務(wù)端獲取和替換調(diào)試代碼,。兩至三周前，我曾對網(wǎng)頁檢查器的代碼做過一些研究,，我發(fā)現(xiàn)把它轉(zhuǎn)換為一個遠程調(diào)試器真的不難,。Weinre接下來幾個月的開發(fā)進度將會更快，某些人可能還會開發(fā)出它的替代產(chǎn)品,。我們拭目以待,。

未來幾年，移動應(yīng)用開發(fā)中的HTML5技術(shù)的調(diào)試工具無疑變得更加重要,，它可以解決大部分開發(fā)人員80%的工作量,。你想要用Objective-C改變你的界面設(shè)計嗎？編輯,，再編譯,，運行。重復(fù)這三個步驟直到你滿意為止,。如果再編譯步驟很多,，這可能會耗上一天的時間。用HTML5技術(shù)去實現(xiàn),？用weinre編輯一些CSS屬性并測試,，你甚至不用關(guān)閉應(yīng)用，你就可以繼續(xù)調(diào)試,。一定程度上,，你還可以在桌面瀏覽器調(diào)試你的HTML5手機應(yīng)用。但相信我,，你的應(yīng)用產(chǎn)品最終可能只會在移動設(shè)備上爆發(fā)一大堆漏洞而已,，所以你必須得使用weinre。

不幸的是,，人們常贊美某個工具包或者某項功能,，但你卻很少聽到有人夸贊某個調(diào)試工具非常棒。所以我猜測就算它是HTML5手機程序員最常用到的工具,，我們也很少聽到它被討論到,。

總結(jié)：現(xiàn)在的狀況

盡管這篇文章真的有點長，但我還是得總結(jié)一下：

在移動設(shè)備開發(fā)HTML5應(yīng)用只有兩種方法,，要不就是全使用HTML5的語法,，要不就是僅使用JavaScript引擎。JavaScript引擎的構(gòu)建方法讓制作手機網(wǎng)頁游戲成為可能。由于界面層很復(fù)雜,，我已預(yù)訂了一個UI工具包去使用,。純HTML5手機應(yīng)用運行緩慢并錯漏百出，但優(yōu)化后的效果會好轉(zhuǎn),。盡管不是很多人愿意去做這樣的優(yōu)化，但依然可以去嘗試,。HTML5手機應(yīng)用的最大優(yōu)勢就是可以在網(wǎng)頁上直接調(diào)試和修改,。原生應(yīng)用的開發(fā)人員可能需要花費非常大的力氣才能達到HTML5的效果，不斷地重復(fù)編碼,、調(diào)試和運行,，這是他們首先得解決的一個問題。是的,，HTML5的移植非常簡單,，但我假設(shè)每個人都會讓這變成一個自動化操作。（原文鏈接：leiphone.com/html5-mobile-app-state.html）