剖析HTML5如何構(gòu)建移動App
我很擔(dān)心有些人還沒有弄清楚HTML5到底是什么，就盲目地開始在自己的移動設(shè)備開發(fā)中使用HTML5了。
在過去的一年中，我在努力地改變大家對HTML5的理解，讓他們認識到HTML5是一個移動開發(fā)平臺。
大家都知道HTML5能夠做哪些事，但是你又是否知道HTML5是如何做這些事的呢？
從我使用web技術(shù)開發(fā)的第一個移動產(chǎn)品到今天，已經(jīng)有超過十年的時間了。我見證了移動web發(fā)展的整個歷史，我曾寫過一本關(guān)于怎樣設(shè)計和開發(fā)移動web apps的暢銷書。
到底應(yīng)該怎樣使用和看待HTML5呢？通過采訪許多相關(guān)的公司，我們找到了關(guān)于這個問題的答案。
可以將這篇文章看做是了解開發(fā)跨平臺的移動web apps的引導(dǎo)手冊。為什么開發(fā)一個HTML5移動Apps是一件困難的事情呢？因為通常，開發(fā)者需要實現(xiàn)圖表中展示的所有部分。即使你不親自開發(fā)它，你也需要借用其他人的設(shè)計，并且你還是得對各個部分進行測試和調(diào)試。
設(shè)置服務(wù)器
客戶端發(fā)送請求在移動web設(shè)備上查看某個內(nèi)容。這個請求通常是一個發(fā)送到某臺服務(wù)器上的HTTP請求。通常，會自動生成用戶需要的內(nèi)容。為了將內(nèi)容加入到app中通常需要至少兩件事情：數(shù)據(jù)以及怎樣使數(shù)據(jù)變得有意義，或者是我們的HTML5 app。
你是否有一個設(shè)備檢測方案？
由于各種設(shè)備存在很大的差異性，所有在服務(wù)器端最好能夠有一個設(shè)備檢測機制。實現(xiàn)這種檢測機制的方法是很多的，甚至可以提供設(shè)備更多更加詳細的信息以及容量性能方面的信息。
程序員可以對所有的設(shè)備統(tǒng)一進行處理，這對于簡單的應(yīng)用是可行的。但是對于大多數(shù)長久運行的項目來說，這顯然是不夠的。
針對移動設(shè)備處理方法，Scott Gledhill 給出了一些簡短的介紹文檔——Mobile Bits
你打算如何處理離線數(shù)據(jù)
15% 的移動apps啟動時設(shè)備是脫機。所以你的應(yīng)用程序需要處理脫機的情況。最初的程序設(shè)計時頁面的訪問當(dāng)然是需要通過Internet的，但是如果連接端掉了，你的程序應(yīng)該也能夠繼續(xù)正常運行。當(dāng)設(shè)備連接到網(wǎng)絡(luò)時，應(yīng)用程序如何處理用戶的數(shù)據(jù)？為了處理脫機訪問的情況，是否可以考慮將所有的數(shù)據(jù)打包返回？
本文稍后會介紹cache manifest，但是不要指望cache manifest能夠解決所有的問題。你還需要調(diào)用RESTful API，用來處理數(shù)據(jù)同步刷回的問題。
HTML5 App
現(xiàn)在已經(jīng)有了處理數(shù)據(jù)和設(shè)備的方法了，接下來就可以開發(fā)一個HTML5 App了——這是其中最簡單的一部分。HTML5是由HTML演化來的，如果你已經(jīng)知道HTML了，那么你能很快地了解怎樣使用HTML5。
為了迅速了解HTML5中引入的新功能，你可以查看下面兩個鏈接。
HTML5加入了許多好用的新功能，但是它并沒有從根本上改變大家的編程方式。你可以在HTML5中使用Javascript和CSS3，但是它仍然還是使用標(biāo)簽定義內(nèi)容的方式編寫應(yīng)用。
cache manifest
HTML5最好的功能之一就是提供了cache manifest，可以將它看作是app的一個緩存。cache manifest實際上是一個文本文件，上面羅列了需要在本地緩存的內(nèi)容。使用該功能，可以方便地將常用的Javascript、CSS和圖片文件緩存在設(shè)備的內(nèi)存中。這樣，即使設(shè)備處于脫機狀態(tài)，用戶還是能夠正常訪問應(yīng)用的界面。
除此以外，使用cache manifest功能還能減少網(wǎng)絡(luò)連接的請求次數(shù)。對于動態(tài)數(shù)據(jù)的緩存處理則需要使用Javascript刷回緩存的數(shù)據(jù)，而不是cache manifest。
需要指出的是，大多數(shù)的apps都需要處理脫機訪問的問題。
Mark’s chapter on offline applications介紹了更多緩存的相關(guān)問題
你的降級策略是怎樣的？
最后一點，需要指出的是各種設(shè)備存在著或多或少的差異。即使你只打算支持某一種平臺，在這種平臺上的各個設(shè)備也不是完全相同的。當(dāng)應(yīng)用無法按照預(yù)想的方式呈現(xiàn)時，能夠提供一組隔離代碼是最好的撤回策略。換句話說，就是要使代碼盡量簡潔且不依賴某些特殊的邊緣技術(shù)——我們稱之為優(yōu)雅的降級。
HTML5開發(fā)的代碼最好嚴格地遵循語法規(guī)定。首先不要在代碼中加入任何的CSS或Javascript，通常這種形式最簡單的代碼具有最好的通用性。
Javascript
現(xiàn)在可以介紹其中一個很重要的部分了，Javascript。在幾年以前，跨平臺的Javascript還沒有受到廣泛的關(guān)注（那時HTML5也沒有引起大家的注意）。但就在這幾年，Javascript的地位發(fā)生了明顯的變化。在短短兩年的時間里，Javascript已經(jīng)成為為用戶提供數(shù)據(jù)、邏輯和交互的主要方法了。
而Javascript上的這些轉(zhuǎn)變都是伴隨著HTML5的推進而發(fā)生的，難怪人們總是將Javascript和HTML5視為一體。換言之，HTML5上有許多新的功能，但是如果沒有Javascript，這些功能也無法應(yīng)用。你能否找到用戶的物理位置？如果有Javascript就可以。能否離線保存用戶數(shù)據(jù)？有了Javascript就可以。
想想Javascript之前的開發(fā)框架： Scriptaculous, Prototype, MooTools和jQuery。我不認為有人是因為喜歡Javascript才采用它的——Javascript使用起來并不方便。所有的這些開發(fā)框架確實使得我們的生活變得更加方便，并且改變了Web的面貌，許多開發(fā)者如果沒有其他這些框架的幫助，根本無法開發(fā)出Javascript程序。
移動web apps開發(fā)中最困難也是最耗時的工作就是測試。你使用的所有技術(shù)必須都是可以被檢測的。如果你不了解一個技術(shù)的原理，那么你需要耗費大量的時間和精力來解決一個小小的bug。
如果你的應(yīng)用只是針對某個特定的平臺，也許這還可以容忍。但如果應(yīng)用平臺變得復(fù)雜起來，開發(fā)和測試的工作量將會呈現(xiàn)指數(shù)級的增長。
Murphy定律——“一個事情只要有可能出錯，那么它不久將會出錯”——是移動web apps開發(fā)中唯一的準則。如果你使用了某個技術(shù)，那么你需要確保這個技術(shù)在你的應(yīng)用中不會出錯。
下面將Javascript分成三個部分分別進行介紹。
混合腳本
混合腳本可以將開發(fā)人員編寫的核心腳本與設(shè)備SDK連接起來。如果你想使用本地封裝器（如 UIWebView和PhoneGap.）將HTML5 app封裝起來，那么你需要使用混合腳本。需要針對不同的平臺編寫不同的混合腳本（phonegap.js是唯一一個支持多個平臺的腳本）。
核心腳本
核心腳本是app在所有平臺上的通用部分。如果app是通過瀏覽器訪問的，核心腳本也應(yīng)該使得app看起來像是一個native SDK。你的app需要負責(zé)收集和渲染HTML5頁面。這個時候使用jQuery這類完整的框架是非常有用的，但是我們建議還是盡量使用微框架。
設(shè)備腳本
最后，你需要使用設(shè)備腳本模擬本地的行為。 jQTouch是一個很好的例子，它使用jQuery模擬iPhone的本地行為和動作。但是jQTouch無法區(qū)分不同設(shè)備間的差異，在Android以及其他的移動平臺上，它都仍然使用在iOS上采用的方法。這一點受到用戶的詬病。因此，需要為不同的設(shè)備編寫單獨的設(shè)備腳本。
CSS
CSS是app的展示層。CSS的開發(fā)更像是設(shè)計工作，而不是單純的技術(shù)工作。頁面的顯示其實是HTML5移動App上最重要的一個部分。
Apple，Nokia，Microsoft等公司都花費了大量的人力物力開發(fā)出非常豐富的用戶界面，從而省去了程序員的很多工作。但是如果你想要開發(fā)一個HTML5移動App，那么你需要自己開發(fā)一個用戶界面，盡管這是一件很令人頭疼的事情。
現(xiàn)在讓應(yīng)用擁有一個良好的用戶體驗變得越來越重要了。CSS就是用來幫助程序員提升應(yīng)用的用戶體驗的。
如果說HTML5 App是一部小轎車的話，那么CSS就是這輛車的外觀，顏色，甚至是內(nèi)部的詳細設(shè)計裝飾。當(dāng)你坐在車內(nèi)，你看的的不僅僅是一些布料和皮革。我們更看重的是設(shè)計的細節(jié)。方向盤的手感如何，儀表盤的設(shè)計是否清晰，音響的立體聲效果怎樣，所有的這些因素都能影響我們的駕車體驗。
Javascript也能影響我們的用戶體驗，但是它沒有那么直接。我們當(dāng)然需要Javascript，但正如 Top Gear（汽車雜志）所說的——好的引擎并不等于好的駕車體驗。
只有讓性能和外觀和諧統(tǒng)一起來，才能給用戶最好的體驗。
我曾和jQTouch、Sencha Touch和jQuery Mobile的愛好者交流過，我向他們詢問了他們設(shè)計應(yīng)用界面的方法，回答無非是使用 “Device Theme”這類網(wǎng)頁風(fēng)格，他們用 “Device Theme”模擬iOS的界面風(fēng)格，再加上幾行Javascript代碼。很少有人考慮使用CSS模擬其他設(shè)備的界面風(fēng)格(Android上的CSS模板)。
有時候，開發(fā)者需要設(shè)計一個不同于其他app的應(yīng)用，想要擺脫傳統(tǒng)的設(shè)計風(fēng)格，使用自己的頁面風(fēng)格。那么你可以考慮使用CSS為你的app設(shè)計一個全新的界面風(fēng)格：
設(shè)備主題
這是開發(fā)者用來模擬設(shè)備風(fēng)格的CSS代碼。它是用戶慣用的語言，普通用戶看到這些語言后，能夠直接開始執(zhí)行想要處理的任務(wù)，而不用花費時間去學(xué)習(xí)你的界面。據(jù)不完全統(tǒng)計，每個平臺上有將近100個獨立的界面組件。我不推薦開發(fā)者自己設(shè)計一種新的組件，除非你清楚的知道自己在做什么。
Sencha Touch，jQuery Mobile和其他的工具都是用來幫你完成這項工作的，但是這也難免使得你的app看起來和這些平臺很像，而沒有了自己的風(fēng)格。但是，使用這些工具可以幫助你開發(fā)自己的風(fēng)格。
核心主題
核心主題是應(yīng)用程序中可以重復(fù)利用的部分——那些你需要使用，但不一定會顯示在界面的上的內(nèi)容。我習(xí)慣將各種部件單獨表示（如復(fù)位按鈕，布局，排版，顏色，圖像），這樣就能將這些部件作為我的核心主題。這些主題在不同的平臺上都是一樣的。比如，你的logo在所有的平臺上都是一樣的。你的工具欄的顏色總是保持一樣的風(fēng)格。這些組件都可以定義為你的核心主題。當(dāng)你在不同的設(shè)備上使用這些核心主題時，只需要修改相應(yīng)的設(shè)備主題即可。
App主題
App主題是專屬于某個App的風(fēng)格組件。許多項目詣在將這些組件整合到一個樣式表中。但是我建議，還是將你的核心主題和App主題區(qū)分開來。這對于debug有很大的幫助。
總結(jié)
HTML5能否滿足你的要求？回答是肯定的。HTML5能夠完成你的要求嗎？答案也是肯定的，不過…
- 可能需要耐心等待。這個項目可能比以往你碰到的其他項目需要更久的時間
- 合理的預(yù)算。這不是一個網(wǎng)站，可能會花費你較多的預(yù)算
- 確保你有合適的人才。如果你認識到世界上最有經(jīng)驗的專家都在對此苦苦探索，那就不難想象，你的開發(fā)過程也不會太輕松
- 現(xiàn)在還沒有所謂的合適工具，更多的時候，你得自己開發(fā)需要的工具
- 仔細考慮你的每一個選擇,在移動開發(fā)領(lǐng)域沒有絕對的對與錯,要保持開放性，關(guān)注客戶的需求
本文作者：暢銷移動Web圖書作者Brian Fling
