Mobile Web App發(fā)展現(xiàn)狀及展望

　　在硬件處理能力不斷強(qiáng)大的同時(shí)，移動(dòng)設(shè)備的操作系統(tǒng)的競(jìng)爭(zhēng)也開(kāi)始越來(lái)越激烈，不僅僅是iOS, Android還有不知道市場(chǎng)反響如何的Windows Phone。而僅僅是這三種平臺(tái)，就已經(jīng)開(kāi)始讓傳統(tǒng)PC轉(zhuǎn)向移動(dòng)的開(kāi)發(fā)者以及企業(yè)開(kāi)始頭疼。與此同時(shí)，HTML 5能力的不斷強(qiáng)大，使得Web App和Native App之爭(zhēng)不斷升溫，在移動(dòng)設(shè)備上的討論尤為突出。但無(wú)論如何，當(dāng)硬件能力的進(jìn)一步強(qiáng)大，性能問(wèn)題得到改善之后，快速開(kāi)發(fā)程序的能力以及構(gòu)建程序的成本會(huì)成為影響和推動(dòng)技術(shù)選擇的一個(gè)重要原因。

　　Mobile Web App的現(xiàn)在

　　作為一個(gè)堅(jiān)定的Web App的支持者，筆者認(rèn)為，開(kāi)發(fā)難度和跨平臺(tái)的需求會(huì)在技術(shù)和商業(yè)兩個(gè)方面都會(huì)推動(dòng)Web App得到越來(lái)越廣泛的應(yīng)用。市場(chǎng)對(duì)Web App的接受程度也在不斷地得到印證，大家所熟知的Mobile Web App先行者Finance Time ，在短短的三個(gè)月的時(shí)間內(nèi)已經(jīng)獲得超過(guò)100萬(wàn)的下載量。相比起很多原生的程序，這個(gè)下載量不算太高，但其幾乎匹敵原生應(yīng)用的體驗(yàn)，已經(jīng)讓很多人留下了深刻的印象。

　　不僅僅如此，還有很多其他的數(shù)據(jù)可以用來(lái)分析Web的趨勢(shì)。如大家所熟知，F(xiàn)acebook也一直在推進(jìn)Web的發(fā)展。Facebook不僅收購(gòu)了HTML 5的移動(dòng)應(yīng)用開(kāi)發(fā)商Strobe，同時(shí) Facebook也正式推出了名為Spartan的HTML 5移動(dòng)開(kāi)發(fā)平臺(tái)，其目標(biāo)就在于更好地幫助開(kāi)發(fā)者開(kāi)發(fā)Web App。不僅如此，最近有消息傳出，作為在Web App開(kāi)發(fā)的最火的工具/框架之一Sencha的技術(shù)推廣經(jīng)理跳巢去了Facebook。足以見(jiàn)得Facebook在這個(gè)方面在不斷積蓄力量以求更大的突破以及發(fā)展。而另一則Adobe放棄在移動(dòng)設(shè)備上支持Flash的消息，更讓人看到了HTML 5在同一技術(shù)標(biāo)準(zhǔn)以及能力上的突破。

　　與此同時(shí)，國(guó)內(nèi)對(duì)Web App的技術(shù)的關(guān)注也非常活躍。一個(gè)致力于探討和分析業(yè)界對(duì)Web App的最新進(jìn)展和發(fā)展趨勢(shì)的博客Web App Trend的已經(jīng)出現(xiàn)，并且質(zhì)量相當(dāng)之高。不僅僅如此，PhoneGap中文站也已經(jīng)浮出水面，為國(guó)內(nèi)的開(kāi)發(fā)者帶來(lái)了全中文的教程以及學(xué)習(xí)資料。

　　這一切都在說(shuō)明業(yè)界對(duì)Web App不僅僅停留在口號(hào)，而是有更多的實(shí)質(zhì)性的推動(dòng)。

　　Web App開(kāi)發(fā)現(xiàn)狀

　　回到一個(gè)實(shí)質(zhì)性的問(wèn)題，什么才是Web App? 引用Web App Trend博客里面的一篇博文的內(nèi)容，有著如下的定義：

　　“要給出完整的Web App的定義是一件很復(fù)雜的事情，因此我們?cè)诖酥唤o出一個(gè)簡(jiǎn)單的定義： Web Application是指通過(guò)使用Web和Web瀏覽器技術(shù)，跨越網(wǎng)絡(luò)完成一個(gè)或多個(gè)任務(wù)的應(yīng)用程序，通常需要使用Web瀏覽器。 “

　　簡(jiǎn)單來(lái)說(shuō)，就是利用Web技術(shù)，能夠做出超越傳統(tǒng)理解網(wǎng)站的功能，讓它更具有交互體驗(yàn)，讓這個(gè)App看起來(lái)和用起來(lái)更像Native App。這樣就非常清楚Web App和Native App的差別具體在哪里了。之前的文章筆者探討過(guò)，在目前的技術(shù)儲(chǔ)備上Web App同樣也開(kāi)始用戶Cache, Drag&Drop等等Native App所必備的功能。

　　那么從開(kāi)發(fā)層面來(lái)看，Web App的開(kāi)發(fā)和Native App的開(kāi)發(fā)又有怎樣的差距和距離呢?

　　讓我們回想一下一個(gè)Native App的開(kāi)發(fā)過(guò)程：

　　界面開(kāi)發(fā)。一般來(lái)說(shuō)，Native App的界面開(kāi)發(fā)擁有非常強(qiáng)大的控件庫(kù)。不管是對(duì)用戶交互的Button、 Checkbox , 還是用戶輸入的textbox、RichTextbox，或是用戶展示的ListView或者GridView之類的控件(不同的開(kāi)發(fā)平臺(tái)下控件的名稱未必一致)，控件庫(kù)里面已經(jīng)為這些控件的展現(xiàn)方式。為屬性設(shè)置、事件響應(yīng)等基本的開(kāi)發(fā)需求做好的充分了準(zhǔn)備。絕大部分的開(kāi)發(fā)者只需要拖拽控件，然后就可以實(shí)現(xiàn)自己的邏輯代碼，而無(wú)需做太多的準(zhǔn)備工作。

　　事件響應(yīng)/數(shù)據(jù)綁定。在絕大部份的場(chǎng)合下，對(duì)于數(shù)據(jù)的處理成為了Native App開(kāi)發(fā)中間的重要工作。這部分的工作的本質(zhì)就是把從網(wǎng)絡(luò)上傳輸?shù)囊唤M數(shù)據(jù)(不管是從數(shù)據(jù)庫(kù)，還是從Web Services)轉(zhuǎn)換成為業(yè)務(wù)邏輯中所定義的對(duì)象，然后綁定到相應(yīng)的數(shù)據(jù)控件中。而事件響應(yīng)的過(guò)程則是相反的過(guò)程，根據(jù)用戶的響應(yīng)，修改相應(yīng)數(shù)據(jù)控件里面的值或者狀態(tài)，然后通過(guò)數(shù)據(jù)處理邏輯回傳到數(shù)據(jù)庫(kù)或者Web Services中。在這個(gè)過(guò)程中一般來(lái)說(shuō)Native App的開(kāi)發(fā)過(guò)程中，同樣有邏輯處理非常完善的庫(kù)來(lái)幫助實(shí)現(xiàn)這個(gè)工作。比如說(shuō)Android里面的Content Provider或者Adapter。

　　數(shù)據(jù)狀態(tài)管理。數(shù)據(jù)的狀態(tài)管理是指根據(jù)實(shí)習(xí)的開(kāi)發(fā)需求所帶來(lái)的本地緩存，配置文件讀取等等操作。比如聊天應(yīng)用，文本編輯應(yīng)用或者基本的信息管理系統(tǒng)都有能力直接從本地的磁盤中讀取之前的操作記錄或者緩存信息。從而讓程序能夠有能力很快地啟動(dòng)并且展示。比如聊天程序中的聯(lián)系人列表，比如郵件客戶端里的本地郵件等等。這些都依賴于有本地的存儲(chǔ)和緩存，來(lái)讓用戶更快地獲取信息。

　　這里沒(méi)有強(qiáng)調(diào)具體和網(wǎng)絡(luò)操作，具體和業(yè)務(wù)相關(guān)的邏輯處理等具體需求。對(duì)比在Web App開(kāi)發(fā)的過(guò)程來(lái)說(shuō)，情況則不太一樣。

　　由于傳統(tǒng)的Web 展示能力有限，傳統(tǒng)的Web開(kāi)發(fā)過(guò)程中，由于位于前端。因此界面的開(kāi)發(fā)本質(zhì)上讓位于了CSS所創(chuàng)造的效果以及Javascript所包裝出來(lái)了各種各樣交互效果。這部分的工作更多地集中在樣式的調(diào)整以及和動(dòng)畫(huà)效果制作上。

　　對(duì)于所謂的事件響應(yīng)，數(shù)據(jù)綁定等等方面，在早期的開(kāi)發(fā)過(guò)程中基本上不存在這個(gè)概念，完全跳轉(zhuǎn)回服務(wù)器，然后重新刷新頁(yè)面。在AJAX引入之后，利用Javascript + XMLHttpRequest，使得HTML的頁(yè)面邏輯可以轉(zhuǎn)移到Javascript中實(shí)現(xiàn)和完成。

　　對(duì)于數(shù)據(jù)的狀態(tài)管理部分。本質(zhì)上來(lái)說(shuō)，早前的Web基本不存在這個(gè)概念，僅有的Cookie能力有限，僅能部分保存狀態(tài)。直到Web Storage開(kāi)始實(shí)現(xiàn)，甚至是Web Database的出現(xiàn)，才增強(qiáng)了Web在這個(gè)方面的編程能力。

　　那么，回過(guò)頭來(lái)看Web App和Native App之爭(zhēng)的本質(zhì)是什么? 無(wú)非就是Web App是否能夠完整實(shí)現(xiàn)Native App所能作的事情。這樣Web App在開(kāi)發(fā)簡(jiǎn)單，跨平臺(tái)方面的能力才能充分凸顯出來(lái)。但對(duì)現(xiàn)階段的狀況來(lái)說(shuō)，當(dāng)期望把Native App所擁有的功能轉(zhuǎn)向到Web App時(shí)，不可避免地因?yàn)楣ぞ叩娜笔В�甚至是開(kāi)發(fā)理念的缺失，導(dǎo)致了在開(kāi)發(fā)中始終存在不夠的狀況�？梢蕴孤实卣f(shuō)，現(xiàn)在Web App的開(kāi)發(fā)中，還處于構(gòu)建不同的開(kāi)發(fā)工具和開(kāi)發(fā)庫(kù)，甚至是在摸索開(kāi)發(fā)模式的過(guò)程中，還尚未成熟。

　　當(dāng)然，這不是不能解決的問(wèn)題。Web App開(kāi)發(fā)，尤其是Mobile Web App 的很多工具和框架已經(jīng)開(kāi)始組建建立。

　　界面開(kāi)發(fā)。如前面所說(shuō)，非常強(qiáng)的Native App界面控件成為了提高效率的有效保證。在Mobile Web App開(kāi)發(fā)中，Sencha以及jQTouch已經(jīng)提供了非常強(qiáng)大的界面開(kāi)發(fā)支持。同時(shí)在界面庫(kù)方面，jQuery Mobile可以認(rèn)為是一種增強(qiáng)型的javascript庫(kù)，能夠有效地幫助用戶來(lái)解決和提升開(kāi)發(fā)效率。

　　事件響應(yīng)/數(shù)據(jù)綁定。如果和Native App相比，這塊本來(lái)就不是Web開(kāi)發(fā)的強(qiáng)項(xiàng)，但是也許根據(jù)開(kāi)發(fā)的需要，未來(lái)會(huì)衍生出包裝的非常完善的一站式解決方案。比如可以直接把一組RSS里面的內(nèi)容，更加方便地變成具有交互能力的List或者功能。

　　數(shù)據(jù)邏輯/緩存處理。Web Storage已經(jīng)提供的技術(shù)的支持，需要的就是最佳的開(kāi)發(fā)實(shí)踐，甚至是利用緩存的模式。對(duì)于簡(jiǎn)化開(kāi)發(fā)的工作來(lái)說(shuō)，應(yīng)該會(huì)出現(xiàn)專門的Storage的管理模式，甚至是封裝的非常完善的庫(kù)。

　　現(xiàn)有Web App開(kāi)發(fā)模式的問(wèn)題以及挑戰(zhàn)

　　從工具層面來(lái)說(shuō)，Web App在工具方面的演化正在不斷地進(jìn)步。但是在現(xiàn)有的Web App開(kāi)發(fā)過(guò)程中，依然存在非常多的問(wèn)題和挑戰(zhàn)。

　　性能問(wèn)題。性能問(wèn)題依舊是非常大的挑戰(zhàn)。由于Web App的開(kāi)發(fā)幾乎完全構(gòu)建在Webview的基礎(chǔ)之上，因此在Webview上對(duì)事件的處理以及響應(yīng)的能力就直接決定了用戶的體驗(yàn)。在這里有兩方面的性能，一個(gè)性能是對(duì)事件響應(yīng)的速度。在Web上控件的響應(yīng)速度比原生的控件響應(yīng)速度要慢;另外一個(gè)是直接在渲染和執(zhí)行速度上面的速度。

　　分辨率的問(wèn)題和適配的問(wèn)題。和Native App的開(kāi)發(fā)方式一樣，不同的分辨率，橫豎屏切換，以及對(duì)于不同機(jī)型的識(shí)別，甚至與對(duì)不同的web 瀏覽器內(nèi)核的適配，同樣存在一樣的問(wèn)題。同樣需要比較多的調(diào)試和適配的工作。

　　離線的問(wèn)題。和Native App相比，可能這是最應(yīng)突破的一件事情。一是這是一個(gè)0或者1的問(wèn)題，實(shí)質(zhì)上是突破了原有的Web開(kāi)發(fā)的限制，二是界面和邏輯數(shù)據(jù)的分離。對(duì)于Web的頁(yè)面來(lái)說(shuō)，這可以認(rèn)為是界面，中間涉及到分離的js, css文件以及沒(méi)有更新的img等靜態(tài)元素的緩存問(wèn)題，同時(shí)也存在把動(dòng)態(tài)數(shù)據(jù)元素(比如某個(gè)控件里的狀態(tài)，比如離線郵件中的郵件信息)緩存以及載入的問(wèn)題。這需要重新建立起一套解決方案來(lái)實(shí)現(xiàn)。

　　跨平臺(tái)問(wèn)題。Web App和Native App另一個(gè)不同在于訪問(wèn)硬件資源上的不同。由于受限于瀏覽器的功能，有很多的硬件資源不能直接訪問(wèn)。所幸的是PhoneGap為在多個(gè)平臺(tái)上開(kāi)發(fā)提供了非常的好的解決方案，使得Web App擁有了能夠在多個(gè)平臺(tái)上執(zhí)行的能力。有理由相信這個(gè)問(wèn)題能夠被解決的越來(lái)越順暢。

　　總結(jié)

　　如果從開(kāi)發(fā)的工具以及各種支持來(lái)說(shuō)，Mobile Web App開(kāi)發(fā)現(xiàn)在尚處于比較早期的原始階段，甚至也會(huì)出現(xiàn)很多因?yàn)樾阅軉?wèn)題導(dǎo)致不夠?qū)嵱玫那闆r。但是，從技術(shù)的角度來(lái)看，并沒(méi)有太多的致命門檻，而是出于構(gòu)建框架，重建游戲規(guī)則的過(guò)程中。不僅僅是Facebook, Google這樣在互聯(lián)網(wǎng)上的巨頭，連IBM這樣的老牌公司也已經(jīng)在開(kāi)始搭建Mobile上的工具以及解決方案，這完全有理由詳細(xì)，在Mobile上Web App的開(kāi)發(fā)會(huì)越來(lái)越火熱，讓我們拭目以待。

服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)！虛擬主機(jī)域名注冊(cè)頂級(jí)提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]