Design News

網頁設計新知

深度分析HTML5網頁設計在移動開發方面的發展狀況

Jul 14, 2011

最近,我有很多類似的交流對話,可能因為我正在開發一套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手機程序員最常用到的工具,我們也很少聽到它被討論到。

總結:現在的狀況

儘管這篇文章真的有點長,但我還是得總結一下:

在移動設備開發HTML5應用只有兩種方法,要不就是全使用HTML5的語法,要不就是僅使用JavaScript引擎。JavaScript引擎的構建方法讓製作手機網頁遊戲成為可能。由於界面層很複雜,我已預訂了一個UI工具包去使用。純HTML5手機應用運行緩慢並錯漏百出,但優化後的效果會好轉。儘管不是很多人願意去做這樣的優化,但依然可以去嘗試。HTML5手機應用的最大優勢就是可以在網頁上直接調試和修改。原生應用的開發人員可能需要花費非常大的力氣才能達到HTML5的效果,不斷地重複編碼、調試和運行,這是他們首先得解決的一個問題。是的,HTML5的移植非常簡單,但我假設每個人都會讓這變成一個自動化操作。