“我們正在用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