移動Web應用開發現狀與未來

Web前端的起源

Web應用誕生：随着GMail、Google Map等優秀Web應用出現，Ajax在2004年之後一度成為熱門話題。經過幾年的發展，一批以Prototype、Dojo、Ext為首的Ajax+UI的浏覽器相容架構不斷出現。UI和Web中間新增了一層以Javascript為核心，專門處理資料傳輸、Web互動等内容的開發層，Web前端。Web前端伴随Web應用而誕生，并逐漸走來。

Web宿主之争：随着RESTful Web Service潮流的發展，背景服務也迅速實作了資料雲端化，接口API化。但受IE壟斷和發展緩慢的影響，Web前端始終走不出浏覽器能力不足和相容性問題突出的困局。開發維護浏覽器插件、Flash控件等更是無奈的選擇。Web前端往往因為需要相容IE6、IE7、FF、有無插件、有無Flash等情況付出巨大開發代價。2006年，John Resig的jQuery架構從某個意義上解決了這個問題。我認為最大的突破在于讓老舊浏覽器适配新的Web标準，滿足了開發者開發高效而相容老舊浏覽器的需要。

Web标準化之路：Google在2008年推出了Webkit核心的浏覽器Chrome（後來也釋出了ChromeOS）。随着FireFox，Chrome，Safari，Opera等浏覽器開始對HTML5和CSS3的深入支援以及性能的不斷優化，IE市場占有率的持續下滑。Web标準化終于等到了一個發展機遇。2010年，HTML5和CSS3被Webkit核心的Chrome、Safari絢麗地實作後，IE9也表示全面支援HTML5後。Web标準進入一個高速發展階段。随後，浏覽器GPU加速也浏覽器廠商們所接受。在Web标準化、離線化、硬體化的浪潮中，Web應用逐漸具備了替代桌面應用條件和能力。Web前端開發也在逐漸取代桌面應用用戶端開發。

移動Web應用背景

非智能機時代：Java和WAP是取代短信SP後的第一種移動網際網路實作方式。這個年代雖然荒蠻，但很純真。

前智能機時代：HP把一台WinPPC的PAD增加電話功能，做成第一台智能手機時。Windows Mobile和S60是這個時代的主角。基于手機系統的用戶端應用就是移動網際網路應用的最好形式。但是随着系統版本的不斷更新，裝置的差異不斷增大。手機用戶端應用開發同樣面臨着與Web前端開發一樣的相容性開發效率和維護成本問題。

後智能機時代：随着iPhone和Android(HTC、摩托羅拉、三星等)手機等的熱賣，兩個電子市場生态鍊逐漸形成。再加上最近諾基亞和微軟和合作，電子市場生态鍊之争拉開帷幕。用戶端應用成為了電子市場生态鍊的主角。不過随着三方系統的競争更新，也伴随浏覽器的不斷優化。先不論WP7，iPhone和Android陣營的浏覽器都是webkit核心的，差異隻在于硬體加速能力和裝置資源的差異。這恰好也是移動Web應用的發展機遇。

移動Web應用開發

需求：

網際網路是個産品線豐富的産業，但不可能對所有産品都投入巨大開發成本。WAP能滿足基本使用需求，而用戶端應用滿足主線産品的高端需求。還有一大片中高端需求無法很好滿足。遺憾的是，限于開發成本，使用者沒有與其高端裝置相比對的非主線産品用戶端可用。

開發成本無法避免，但可以擇優。我們可以通過移動Web應用的方式來次優替代非主線産品用戶端。這也是廉價的移動應用實作方式。

現狀：

目前iOS和Android系統的浏覽器都是webkit核心的，我們可以開發移動Web應用來滿足這塊需求。iOS支援硬體加速，Android系統也能滿足基本Webkit的API功能，适宜通過區分iOS來提供差異化服務。iOS的Mobile Safari有足夠能力提供webkitTransForm（圖形變換，3D變換支援硬體加速）、webkitTransition（CSS3動畫）、SQLite、LocalStorage（離線存儲）、 WebSocket（iOS 4.2+）服務。至于Android，因為需要相容參差的低端裝置，還是不建議使用複雜圖形變換和CSS3動畫，其它能力可以通過判斷能否支援來選擇使用。另外多點觸摸、重力感應、地理位置還是根據能否支援和需要來使用，主要用于優化使用者體驗，不影響基本互動方式。

未來：

移動Web應用的起點比PC Web應用的高，但适用範圍較窄。但移動Web應用将成為Web應用的一種延伸，從開發角度來看，應該是殊途同歸的。

小結

Javascript的角色從誕生起的頁面粘合劑轉變成今天的Web應用開發語言，一路走來經過很多波折。有人喜歡他，有人讨厭他，在崇拜和謾罵中成長過來。将來的路還很長，但迷霧已散去，前途是光明的。當中有無數人的付出汗水，也成就了少數應用的輝煌。不過他仍然是一個工具，為開發者服務，需要人們一起來優化他，使用他。

原文連結：

<a href="http://www.cnblogs.com/gzterrytan/archive/2011/02/18/1957398.html" target="_top">http://www.cnblogs.com/gzterrytan/archive/2011/02/18/1957398.html</a>