鄒達(dá)，APICloud CTO，10年來一直專注于移動(dòng)瀏覽器引擎研究，參與過國內(nèi)外多個(gè)瀏覽器引擎，t引擎和跨平臺(tái)應(yīng)用引擎架構(gòu)和開發(fā)。

如果說以前的微信公眾號(hào)還是一個(gè)媒體化的平臺(tái)，那么2016年的公眾號(hào)會(huì)有一種新的形態(tài)，叫應(yīng)用號(hào)。應(yīng)用號(hào)預(yù)示著比公眾號(hào)更強(qiáng)大的功能、更優(yōu)質(zhì)的體驗(yàn)以及更豐富的服務(wù)。應(yīng)用號(hào)的出現(xiàn)是微信產(chǎn)品的一次重大升級(jí)，無論是為了體現(xiàn)用戶價(jià)值觀?還是追求產(chǎn)品商業(yè)化?作為一名技術(shù)人員，我不想過多討論，而是更愿意從技術(shù)的角度來分析一些其中Web技術(shù)的發(fā)展。

微信做為一款超級(jí)App，有著巨大的入口流量，需要不斷的產(chǎn)生動(dòng)態(tài)的內(nèi)容，Web技術(shù)在微信中一直發(fā)揮中重要的作用。如果說公眾號(hào)還是標(biāo)準(zhǔn)Web技術(shù)+簡單橋接擴(kuò)展，那么在應(yīng)用號(hào)中，Web技術(shù)將依靠更強(qiáng)大的Web執(zhí)行容器在微信中發(fā)揮更大的作用。我們可以來看看在微信中Web與Native技術(shù)的結(jié)合過程，從嵌入系統(tǒng)Webview, 到X5增強(qiáng)瀏覽器引擎，到功能擴(kuò)展的JS-SDK，再到剛剛發(fā)布的weUI，再到應(yīng)用號(hào)。微信團(tuán)隊(duì)一直推進(jìn)著Web技術(shù)在Native App中融合與發(fā)展。

隨著移動(dòng)設(shè)備的快速更新?lián)Q代，以HTML5為代表的Web技術(shù)在NativeApp中有了越來越多的應(yīng)用場(chǎng)景。一方面是Native App開發(fā)團(tuán)隊(duì)在保證功能和性能的同時(shí)，需要提高開發(fā)效率，降低運(yùn)營成本;另一方面是App用戶在滿足需求和體驗(yàn)的同時(shí)，需要更快的獲取動(dòng)態(tài)的內(nèi)容;這些都需要Web技術(shù)在App開發(fā)中發(fā)揮越來越多的作用和價(jià)值。但這種價(jià)值絕對(duì)不能稱為脫離或顛覆。在今天，更多的是“融合”!

我從06年開始做了10年瀏覽器引擎和跨平臺(tái)App引擎。見證了這10年來，Web技術(shù)在Native App中不斷的應(yīng)用和發(fā)展。從功能機(jī)到智能機(jī)，從k-java到移動(dòng)App，從WebBrowser到Webkit，我們可以將Web技術(shù)在Native App中的發(fā)展分為5個(gè)階段，內(nèi)置、嵌入、橋接、混合、融合。

從微信應(yīng)用號(hào)看HTML5與Native融合趨勢(shì)2

（一）內(nèi)置自定義Web容器時(shí)代

2010年之前，那時(shí)還是feature phone為主流的時(shí)代，硬件配置低，系統(tǒng)功能弱，手機(jī)應(yīng)用以內(nèi)置為主。但SP業(yè)務(wù)已得到長足的發(fā)展，用戶需要?jiǎng)討B(tài)獲取內(nèi)容來滿足資訊和娛樂的需求。這個(gè)時(shí)期Web技術(shù)在Native應(yīng)用中的使用方式是Native應(yīng)用開發(fā)商與瀏覽器廠商合作，在應(yīng)用中內(nèi)置某個(gè)廠商的瀏覽器引擎，作為Web的執(zhí)行容器。應(yīng)用從服務(wù)器端動(dòng)態(tài)下載web文件，解壓后交給Web容器離線運(yùn)行。內(nèi)容和功能都很簡單，通常就是圖片+文字的排版，以及按鍵交互。形式如圖書、雜志、小游戲以及小工具等。這類需求也驅(qū)動(dòng)了當(dāng)時(shí)一些主流瀏覽器廠商去思考瀏覽器的在傳統(tǒng)價(jià)值以外的作用，并積極參與到W3C Widget規(guī)范的制訂。這一時(shí)期也是移動(dòng)瀏覽器廠商的黃金時(shí)代。

（二）嵌入系統(tǒng)Webview時(shí)代

2010年，Android系統(tǒng)在國內(nèi)興起，iPhone也逐漸普及，以Android和iOS為主的原生應(yīng)用生態(tài)系統(tǒng)開始不斷的培養(yǎng)用戶到AppStore下載應(yīng)用，以及以獨(dú)立App作為入口的使用習(xí)慣。這一時(shí)期App開發(fā)需求也逐漸增長，但是競爭還不算激烈。客戶可以接受原生的開發(fā)成本和周期。應(yīng)用開發(fā)商利潤豐厚，開發(fā)者紛紛開始學(xué)習(xí)Android和iOS App開發(fā)。系統(tǒng)自帶瀏覽器的功能和性能已經(jīng)超過當(dāng)時(shí)的第三方瀏覽器。在App中通過嵌入系統(tǒng)Webview來展示本地或服務(wù)器端的界面已經(jīng)比較常見。這一時(shí)期Web技術(shù)的應(yīng)用以內(nèi)容展示為主，所能完成的功能被限制在標(biāo)準(zhǔn)瀏覽器支持的范圍內(nèi)。而傳統(tǒng)瀏覽器廠商依靠Lisence收費(fèi)的商業(yè)模式終結(jié)，并且逐漸淡出市場(chǎng)。

（三）Webview的橋接擴(kuò)展時(shí)代

2011年， Android和iOS在手機(jī)系統(tǒng)中逐漸已經(jīng)占據(jù)了統(tǒng)治地位。App開發(fā)需求迅速增長，競爭加劇，原生開發(fā)人員供不應(yīng)求，客戶開始考慮成本和周期，開發(fā)商開始考慮效率和利潤。開發(fā)者開始思考Webview在展示內(nèi)容之外是否還可以完成部分App功能。由于系統(tǒng)內(nèi)置的都是Webkit引擎，支持標(biāo)準(zhǔn)的Web技術(shù)，并且支持開放擴(kuò)展。國內(nèi)外以Phone Gap為代表的廠商開始了對(duì)Webview的橋接擴(kuò)展，并且形成一套完整的調(diào)用機(jī)制，在JS中可以任意調(diào)用原生接口。

從微信應(yīng)用號(hào)看HTML5與Native融合趨勢(shì)2

這種橋接擴(kuò)展主要集中于設(shè)備功能，提供的是一種能力，但是更多具體的映射還需要開發(fā)者自己來完成。由于沒有涉及窗口系統(tǒng)、交互響應(yīng)、動(dòng)畫效果，事件管理以及應(yīng)用生命周期管理等的擴(kuò)展，所以雖然開發(fā)出的App基本功能可以滿足需求，但是性能和體驗(yàn)太差。此時(shí)通過Webview+橋接擴(kuò)展的方式，原生工程師和Web工程師一起協(xié)作已經(jīng)可以完成一款 App的開發(fā)了。這一時(shí)期標(biāo)準(zhǔn)Web技術(shù)(HTML，CSS，JS)和橋接擴(kuò)展機(jī)制在移動(dòng)App中的使用趨勢(shì)也造成了一批傳統(tǒng)的使用非標(biāo)準(zhǔn)web技術(shù)(自定義XML標(biāo)簽和JS語法)的移動(dòng)中間件廠商的消亡。

（四）移動(dòng)應(yīng)用開發(fā)平臺(tái)的Hybrid App時(shí)代

從2012年開始，App創(chuàng)業(yè)火爆，App需求持續(xù)增長，有了更多的應(yīng)用場(chǎng)景和行業(yè)結(jié)合：LBS，IoT，O2O，社交、視頻等等。一方面是使用HTML+CSS進(jìn)行界面布局存在Dom樹更新及單層渲染的性能問題，而且標(biāo)準(zhǔn)t規(guī)范支持的能力非常有限，需要大量的擴(kuò)展來滿足行業(yè)需求;另一方面是原生開發(fā)模式成本高、效率低，行業(yè)呼喚更高效的跨平臺(tái)開發(fā)模式。

這一時(shí)期，國內(nèi)外跨平臺(tái)技術(shù)也是層出不窮，不斷涌現(xiàn)出新的產(chǎn)品，但我們可以其他們分為兩類：

一類是繼續(xù)堅(jiān)持使用HTML+CSS進(jìn)行界面布局，通過對(duì)頁面渲染進(jìn)行優(yōu)化和對(duì)標(biāo)準(zhǔn)JS進(jìn)行原生擴(kuò)展來實(shí)現(xiàn)跨平臺(tái)App開發(fā)。

另一類是放棄使用HTML+CSS的界面布局，選擇一種第三方的中間語言(如JS，C#等)來映射成Android和iOS的系統(tǒng)調(diào)用，從而實(shí)現(xiàn)跨平臺(tái)。這種方式的界面布局需要通過中間語言組合系統(tǒng)UI組件來完成，目前看渲染性能是比HTML+CSS的方式要好些，但這樣也失去了HTML+CSS布局的標(biāo)準(zhǔn)性和靈活便捷。

從微信應(yīng)用號(hào)看HTML5與Native融合趨勢(shì)1

本文探討的主要是Web技術(shù)在App中的發(fā)展過程，不可能沒有HTML和CSS，所以這里我們將集中討論第一類的跨平臺(tái)產(chǎn)品(Web+Native混合)。像ReactNative雖然他所選擇的第三方語言是JS，但是他也可以選擇其他語言，由于HTML和CSS已經(jīng)不是其界面布局的方式，所以我認(rèn)為其已經(jīng)脫離了標(biāo)準(zhǔn)的Web的技術(shù)，這里不再過多討論。

此時(shí)國內(nèi)HTML5也逐漸火熱，大量的Web程序員期待進(jìn)入Native App的開發(fā)領(lǐng)域。此時(shí)，面向Web工程師的移動(dòng)應(yīng)用開發(fā)平臺(tái)(Web+Native混合)開始出現(xiàn)，提供了一站式的跨平臺(tái)App開發(fā)和管理服務(wù)，形成了一種新的Web技術(shù)與Native App相結(jié)合的模式。

從微信應(yīng)用號(hào)看HTML5與Native融合趨勢(shì)1

HybridApp是一個(gè)以Web技術(shù)為主的Native App開發(fā)模式，開發(fā)者不需要具備任何的Native技能，使用標(biāo)準(zhǔn)的web技術(shù)，通過調(diào)用平臺(tái)的擴(kuò)展API，就可以開發(fā)出獨(dú)立的跨平臺(tái)App。并且能保證App的功能、性能和體驗(yàn)。

Hybrid App引擎需要在橋接擴(kuò)展的基礎(chǔ)上提供更多的功能，如：

MVC架構(gòu);

應(yīng)用生命周期和統(tǒng)一事件管理;

優(yōu)化交互響應(yīng)、動(dòng)畫效果、數(shù)據(jù)緩存等;

Web界面與Native組件的混合渲染;

豐富的獨(dú)立功能模塊與聚合開放平臺(tái)API;

對(duì)主流HTML編輯器進(jìn)行擴(kuò)展來支持App開發(fā);

App安全機(jī)制及Web代碼全包加密;

這一時(shí)期出現(xiàn)了優(yōu)秀跨平臺(tái)App引擎，如APICloud DeepEngine，通過Deep Engine在降低開發(fā)成本，提高開發(fā)效率的同時(shí)，可以開發(fā)出滿足客戶需要和用戶運(yùn)行體驗(yàn)的商用App。基于APICloud，客戶也開發(fā)出了安裝量過千萬的主流優(yōu)質(zhì)應(yīng)用。

（五）基于SuperWebview的融合時(shí)代

進(jìn)入2016年，雖然Hybrid App已經(jīng)被行業(yè)廣泛認(rèn)可，但是目前Native還仍是主流的開發(fā)模式，大多數(shù)優(yōu)質(zhì)App都是原生的。如何能在這些Native App中使用Web技術(shù)?如何能在這些主流App中使用Web技術(shù)完成部分功能的同時(shí)，又能保證App的性能和體驗(yàn)?如何能讓Native工程師和Web工程師能更好的協(xié)作?

對(duì)于這些問題，我們不能只是嵌入一個(gè)系統(tǒng)Webview，或引入一套橋接擴(kuò)展機(jī)制，而是需要一個(gè)功能強(qiáng)大完整的超級(jí)Webview，并且是為每一個(gè)應(yīng)用根據(jù)實(shí)際配置動(dòng)態(tài)生成專屬的SDK。這種超級(jí)Webview應(yīng)具備的如下功能：

功能強(qiáng)大，具備MVC架構(gòu)和性能優(yōu)化;

聚合API，支持?jǐn)U展模塊和開放平臺(tái)服務(wù);

動(dòng)態(tài)生成，根據(jù)配置，為每個(gè)應(yīng)用動(dòng)態(tài)生成專屬的SDK;

云修復(fù)，實(shí)現(xiàn)應(yīng)用內(nèi)更新功能。

方便協(xié)作，保持Web和Native開發(fā)的獨(dú)立性，降低融合成本，提高效率。

從微信應(yīng)用號(hào)看HTML5與Native融合趨勢(shì)1

APICloud在2016年開年推出的這款超越性產(chǎn)品——SuperWebview，SuperWebview的出現(xiàn)必將加速Web技術(shù)在Native App中的融合，并且在優(yōu)質(zhì)的Native App，甚至超級(jí)App中發(fā)揮更大的作用。任何一款Native App在集成SuperWebview之后，都可以大幅縮短迭代周期，支持功能的動(dòng)態(tài)增加。由Web技術(shù)實(shí)現(xiàn)部分的功能更新無需再反復(fù)提交AppStore審核。用戶也無需重新下載安裝。

開發(fā)一款A(yù)pp，到底誰當(dāng)主角?是Native+Web，還是Web+Native?那要看誰更適合當(dāng)主角，誰當(dāng)主角才能把戲演好。一部好戲不能只有一個(gè)主角，配合互補(bǔ)才能演出好戲。

NativeApp伴隨著移動(dòng)設(shè)備而生，Web技術(shù)也是自出生就與Native App互補(bǔ)和共存。APICloud從未想過“顛覆”，只是想提供一種實(shí)實(shí)在在的高效的App開發(fā)方式，讓W(xué)eb技術(shù)和NativeApp能夠更好的融合，發(fā)揮出各自應(yīng)有的優(yōu)勢(shì)和價(jià)值。