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