Mobile Web App發展現狀及展望

文/劉鐵鋒

在計算機的發展過程中，目前移動裝置的時代可謂是潛力最大，發展最為迅猛，也是競争最為激烈的一個時代。硬體的發展速度令所有的消費者驚歎，如果2008年給你一部主頻528MHz，記憶體192M，螢幕3.2寸，分辨率320*480的手機，你可能會覺得非常前衛，因為CPU和分辨率足夠高。而放到三年之後的今天，這部機器已經淪落到無人問津，成為古董機型的地步。不錯，這就是G1的配置。而現在雙核1.5G的CPU，4寸，甚至5寸的超大屏手機已開始成為使用者心中的主流手機。毫無疑問，這種手機的處理能力已經開始能夠趕上PC的處理能力。而傳說中的子產品四核的Pad，更有趕超PC發展速度的勢頭。

在硬體處理能力不斷強大的同時，移動裝置的作業系統的競争也開始越來越激烈，不僅僅是iOS, Android還有不知道市場反響如何的Windows Phone。而僅僅是這三種平台，就已經開始讓傳統PC轉向移動的開發者以及企業開始頭疼。與此同時，HTML 5能力的不斷強大，使得Web App和Native App之争不斷升溫，在移動裝置上的讨論尤為突出。但無論如何，當硬體能力的進一步強大，性能問題得到改善之後，快速開發程式的能力以及建構程式的成本會成為影響和推動技術選擇的一個重要原因。

Mobile Web App的現在

作為一個堅定的Web App的支援者，筆者認為，開發難度和跨平台的需求會在技術和商業兩個方面都會推動Web App得到越來越廣泛的應用。市場對Web App的接受程度也在不斷地得到印證，大家所熟知的Mobile Web App先行者Finance Time ，在短短的三個月的時間内已經獲得超過100萬的下載下傳量。相比起很多原生的程式，這個下載下傳量不算太高，但其幾乎匹敵原生應用的體驗，已經讓很多人留下了深刻的印象。

不僅僅如此，還有很多其他的資料可以用來分析Web的趨勢。如大家所熟知，Facebook也一直在推進Web的發展。Facebook不僅收購了HTML 5的移動應用開發商Strobe，同時 Facebook也正式推出了名為Spartan的HTML 5移動開發平台，其目标就在于更好地幫助開發者開發Web App。不僅如此，最近有消息傳出，作為在Web App開發的最火的工具/架構之一Sencha的技術推廣經理跳巢去了Facebook。足以見得Facebook在這個方面在不斷積蓄力量以求更大的突破以及發展。而另一則Adobe放棄在移動裝置上支援Flash的消息，更讓人看到了HTML 5在同一技術标準以及能力上的突破。

與此同時，國内對Web App的技術的關注也非常活躍。一個緻力于探讨和分析業界對Web App的最新進展和發展趨勢的部落格Web App Trend的已經出現，并且品質相當之高。不僅僅如此，PhoneGap中文站也已經浮出水面，為國内的開發者帶來了全中文的教程以及學習資料。

這一切都在說明業界對Web App不僅僅停留在口号，而是有更多的實質性的推動。

Web App開發現狀

回到一個實質性的問題，什麼才是Web App?  引用Web App Trend部落格裡面的一篇博文的内容，有着如下的定義：

“要給出完整的Web App的定義是一件很複雜的事情，是以我們在此隻給出一個簡單的定義： Web Application是指通過使用Web和Web浏覽器技術，跨越網絡完成一個或多個任務的應用程式，通常需要使用Web浏覽器。 “

簡單來說，就是利用Web技術，能夠做出超越傳統了解網站的功能，讓它更具有互動體驗，讓這個App看起來和用起來更像Native App。這樣就非常清楚Web App和Native App的差别具體在哪裡了。之前的文章筆者探讨過，在目前的技術儲備上Web App同樣也開始使用者Cache, Drag&Drop等等Native App所必備的功能。

那麼從開發層面來看，Web App的開發和Native App的開發又有怎樣的差距和距離呢？

讓我們回想一下一個Native App的開發過程：

界面開發。一般來說，Native App的界面開發擁有非常強大的控件庫。不管是對使用者互動的Button、 Checkbox , 還是使用者輸入的textbox、RichTextbox，或是使用者展示的ListView或者GridView之類的控件（不同的開發平台下控件的名稱未必一緻），控件庫裡面已經為這些控件的展現方式。為屬性設定、事件響應等基本的開發需求做好的充分了準備。絕大部分的開發者隻需要拖拽控件，然後就可以實作自己的邏輯代碼，而無需做太多的準備工作。

事件響應/資料綁定。在絕大部份的場合下，對于資料的處理成為了Native App開發中間的重要工作。這部分的工作的本質就是把從網絡上傳輸的一組資料（不管是從資料庫，還是從Web Services）轉換成為業務邏輯中所定義的對象，然後綁定到相應的資料控件中。而事件響應的過程則是相反的過程，根據使用者的響應，修改相應資料控件裡面的值或者狀态，然後通過資料處理邏輯回傳到資料庫或者Web Services中。在這個過程中一般來說Native App的開發過程中，同樣有邏輯處理非常完善的庫來幫助實作這個工作。比如說Android裡面的Content Provider或者Adapter。

資料狀态管理。資料的狀态管理是指根據實習的開發需求所帶來的本地緩存，配置檔案讀取等等操作。比如聊天應用，文本編輯應用或者基本的資訊管理系統都有能力直接從本地的磁盤中讀取之前的操作記錄或者緩存資訊。進而讓程式能夠有能力很快地啟動并且展示。比如聊天程式中的聯系人清單，比如郵件用戶端裡的本地郵件等等。這些都依賴于有本地的存儲和緩存，來讓使用者更快地擷取資訊。

這裡沒有強調具體和網絡操作，具體和業務相關的邏輯處理等具體需求。對比在Web App開發的過程來說，情況則不太一樣。

由于傳統的Web 展示能力有限，傳統的Web開發過程中，由于位于前端。是以界面的開發本質上讓位于了CSS所創造的效果以及Javascript所包裝出來了各種各樣互動效果。這部分的工作更多地集中在樣式的調整以及和動畫效果制作上。

對于所謂的事件響應，資料綁定等等方面，在早期的開發過程中基本上不存在這個概念，完全跳轉回伺服器，然後重新重新整理頁面。在AJAX引入之後，利用Javascript + XMLHttpRequest，使得HTML的頁面邏輯可以轉移到Javascript中實作和完成。

對于資料的狀态管理部分。本質上來說，早前的Web基本不存在這個概念，僅有的Cookie能力有限，僅能部分儲存狀态。直到Web Storage開始實作，甚至是Web Database的出現，才增強了Web在這個方面的程式設計能力。

那麼，回過頭來看Web App和Native App之争的本質是什麼？ 無非就是Web App是否能夠完整實作Native App所能作的事情。這樣Web App在開發簡單，跨平台方面的能力才能充分凸顯出來。但對現階段的狀況來說，當期望把Native App所擁有的功能轉向到Web App時，不可避免地因為工具的缺失，甚至是開發理念的缺失，導緻了在開發中始終存在不夠的狀況。可以坦率地說，現在Web App的開發中，還處于建構不同的開發工具和開發庫，甚至是在摸索開發模式的過程中，還尚未成熟。

當然，這不是不能解決的問題。Web App開發，尤其是Mobile Web App 的很多工具和架構已經開始組建建立。

界面開發。如前面所說，非常強的Native App界面控件成為了提高效率的有效保證。在Mobile Web App開發中，Sencha以及jQTouch已經提供了非常強大的界面開發支援。同時在界面庫方面，jQuery Mobile可以認為是一種增強型的javascript庫，能夠有效地幫助使用者來解決和提升開發效率。

事件響應/資料綁定。如果和Native App相比，這塊本來就不是Web開發的強項，但是也許根據開發的需要，未來會衍生出包裝的非常完善的一站式解決方案。比如可以直接把一組RSS裡面的内容，更加友善地變成具有互動能力的List或者功能。

資料邏輯/緩存處理。Web Storage已經提供的技術的支援，需要的就是最佳的開發實踐，甚至是利用緩存的模式。對于簡化開發的工作來說，應該會出現專門的Storage的管理模式，甚至是封裝的非常完善的庫。

現有Web App開發模式的問題以及挑戰

從工具層面來說，Web App在工具方面的演化正在不斷地進步。但是在現有的Web App開發過程中，依然存在非常多的問題和挑戰。

性能問題。性能問題依舊是非常大的挑戰。由于Web App的開發幾乎完全建構在Webview的基礎之上，是以在Webview上對事件的處理以及響應的能力就直接決定了使用者的體驗。在這裡有兩方面的性能，一個性能是對事件響應的速度。在Web上控件的響應速度比原生的控件響應速度要慢；另外一個是直接在渲染和執行速度上面的速度。

分辨率的問題和适配的問題。和Native App的開發方式一樣，不同的分辨率，橫豎屏切換，以及對于不同機型的識别，甚至與對不同的web 浏覽器核心的适配，同樣存在一樣的問題。同樣需要比較多的調試和适配的工作。

離線的問題。和Native App相比，可能這是最應突破的一件事情。一是這是一個0或者1的問題，實質上是突破了原有的Web開發的限制，二是界面和邏輯資料的分離。對于Web的頁面來說，這可以認為是界面，中間涉及到分離的js, css檔案以及沒有更新的img等靜态元素的緩存問題，同時也存在把動态資料元素（比如某個控件裡的狀态，比如離線郵件中的郵件資訊）緩存以及載入的問題。這需要重建立立起一套解決方案來實作。

跨平台問題。Web App和Native App另一個不同在于通路硬體資源上的不同。由于受限于浏覽器的功能，有很多的硬體資源不能直接通路。所幸的是PhoneGap為在多個平台上開發提供了非常的好的解決方案，使得Web App擁有了能夠在多個平台上執行的能力。有理由相信這個問題能夠被解決的越來越順暢。

總結

如果從開發的工具以及各種支援來說，Mobile Web App開發現在尚處于比較早期的原始階段，甚至也會出現很多因為性能問題導緻不夠實用的情況。但是，從技術的角度來看，并沒有太多的緻命門檻，而是出于建構架構，重建遊戲規則的過程中。不僅僅是Facebook, Google這樣在網際網路上的巨頭，連IBM這樣的老牌公司也已經在開始搭建Mobile上的工具以及解決方案，這完全有理由詳細，在Mobile上Web App的開發會越來越火熱，讓我們拭目以待。

作者劉鐵鋒，百納資訊技術有限公司CTO，W3C标準化組織成員。

本文選自《程式員》雜志2012年01期，更多精彩内容敬請關注01期雜志

《程式員》2012年雜志訂閱送好禮活動火熱進行中