透過微信應用號，看 HTML5 與 Native 進入融合時代

本文作者：鄒達，APICloud CTO，10 年來一直專注于移動瀏覽器引擎研究，參與過國內外多個瀏覽器引擎，Javascript 引擎和跨平臺應用引擎架構和開發。

如果說以前的微信公眾號還是一個媒體化的平臺，那么 2016 年的公眾號會有一種新的形態，叫應用號。應用號預示著比公眾號更強大的功能、更優質的體驗以及更豐富的服務。應用號的出現是微信產品的一次重大升級，無論是為了體現用戶價值觀？還是追求產品商業化？作為一名技術人員，我不想過多討論，而是更愿意從技術的角度來分析一些其中 Web 技術的發展。

微信做為一款超級 App，有著巨大的入口流量，需要不斷的產生動態的內容，Web 技術在微信中一直發揮中重要的作用。如果說公眾號還是標準 Web 技術＋簡單橋接擴展，那么在應用號中，Web 技術將依靠更強大的 Web 執行容器在微信中發揮更大的作用。我們可以來看看在微信中 Web 與 Native 技術的結合過程，從嵌入系統 Webview, 到 X5 增強瀏覽器引擎，到功能擴展的 JS-SDK，再到剛剛發布的 weUI，再到應用號。微信團隊一直推進著 Web 技術在 Native App 中融合與發展。

隨著移動設備的快速更新換代，以 HTML5 為代表的 Web 技術在 NativeApp 中有了越來越多的應用場景。一方面是 Native App 開發團隊在保證功能和性能的同時，需要提高開發效率，降低運營成本；另一方面是 App 用戶在滿足需求和體驗的同時，需要更快的獲取動態的內容；這些都需要 Web 技術在 App 開發中發揮越來越多的作用和價值。但這種價值絕對不能稱為脫離或顛覆。在今天，更多的是 “融合”！

我從 06 年開始做了 10 年瀏覽器引擎和跨平臺 App 引擎。見證了這 10 年來，Web 技術在 Native App 中不斷的應用和發展。從功能機到智能機，從 k-java 到移動 App，從 WebBrowser 到 Webkit，我們可以將 Web 技術在 Native App 中的發展分為 5 個階段，內置、嵌入、橋接、混合、融合。

一 . 內置自定義 Web 容器時代

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

二. 嵌入系統 Webview 時代

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

三 .Webview 的橋接擴展時代

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

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

四. 移動應用開發平臺的 Hybrid App 時代

從 2012 年開始，App 創業火爆，App 需求持續增長，有了更多的應用場景和行業結合：LBS，IoT，O2O，社交、視頻等等。一方面是使用 HTML＋CSS 進行界面布局存在 Dom 樹更新及單層渲染的性能問題，而且標準 JavaScript 規范支持的能力非常有限，需要大量的擴展來滿足行業需求；另一方面是原生開發模式成本高、效率低，行業呼喚更高效的跨平臺開發模式。

這一時期，國內外跨平臺技術也是層出不窮，不斷涌現出新的產品，但我們可以其他們分為兩類：

? 一類是繼續堅持使用 HTML＋CSS 進行界面布局，通過對頁面渲染進行優化和對標準 JS 進行原生擴展來實現跨平臺 App 開發。

? 另一類是放棄使用 HTML＋CSS 的界面布局，選擇一種第三方的中間語言（如 JS，C# 等）來映射成 Android 和 iOS 的系統調用，從而實現跨平臺。這種方式的界面布局需要通過中間語言組合系統 UI 組件來完成，目前看渲染性能是比 HTML＋CSS 的方式要好些，但這樣也失去了 HTML＋CSS 布局的標準性和靈活便捷。

本文探討的主要是 Web 技術在 App 中的發展過程，不可能沒有 HTML 和 CSS，所以這里我們將集中討論第一類的跨平臺產品（Web＋Native 混合）。像 ReactNative 雖然他所選擇的第三方語言是 JS，但是他也可以選擇其他語言，由于 HTML 和 CSS 已經不是其界面布局的方式，所以我認為其已經脫離了標準的 Web 的技術，這里不再過多討論。

此時國內 HTML5 也逐漸火熱，大量的 Web 程序員期待進入 Native App 的開發領域。此時，面向 Web 工程師的移動應用開發平臺（Web＋Native 混合）開始出現，提供了一站式的跨平臺 App 開發和管理服務，形成了一種新的 Web 技術與 Native App 相結合的模式。

HybridApp 是一個以 Web 技術為主的 Native App 開發模式，開發者不需要具備任何的 Native 技能，使用標準的 web 技術，通過調用平臺的擴展 API，就可以開發出獨立的跨平臺 App。并且能保證 App 的功能、性能和體驗。

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

1. MVC 架構；

2. 應用生命周期和統一事件管理；

3. 優化交互響應、動畫效果、數據緩存等；

4. Web 界面與 Native 組件的混合渲染；

5. 豐富的獨立功能模塊與聚合開放平臺 API；

6. 對主流 HTML 編輯器進行擴展來支持 App 開發；

7. App 安全機制及 Web 代碼全包加密；

這一時期出現了優秀跨平臺 App 引擎，如 APICloud DeepEngine，通過 Deep Engine 在降低開發成本，提高開發效率的同時，可以開發出滿足客戶需要和用戶運行體驗的商用 App。基于 APICloud，客戶也開發出了安裝量過千萬的主流優質應用。

五. 基于 SuperWebview 的融合時代

進入 2016 年，雖然 Hybrid App 已經被行業廣泛認可，但是目前 Native 還仍是主流的開發模式，大多數優質 App 都是原生的。如何能在這些 Native App 中使用 Web 技術？如何能在這些主流 App 中使用 Web 技術完成部分功能的同時，又能保證 App 的性能和體驗？如何能讓 Native 工程師和 Web 工程師能更好的協作？

對于這些問題，我們不能只是嵌入一個系統 Webview，或引入一套橋接擴展機制，而是需要一個功能強大完整的超級 Webview，并且是為每一個應用根據實際配置動態生成專屬的 SDK。這種超級 Webview 應具備的如下功能：

1. 功能強大，具備 MVC 架構和性能優化；

2. 聚合 API，支持擴展模塊和開放平臺服務；

3. 動態生成，根據配置，為每個應用動態生成專屬的 SDK；

4. 云修復，實現應用內更新功能。

方便協作，保持 Web 和 Native 開發的獨立性，降低融合成本，提高效率。

APICloud 在 2016 年開年推出的這款超越性產品——SuperWebview，SuperWebview 的出現必將加速 Web 技術在 Native App 中的融合，并且在優質的 Native App，甚至超級 App 中發揮更大的作用。任何一款 Native App 在集成 SuperWebview 之后，都可以大幅縮短迭代周期，支持功能的動態增加。由 Web 技術實現部分的功能更新無需再反復提交 AppStore 審核。用戶也無需重新下載安裝。

開發一款 App，到底誰當主角？是 Native＋Web，還是 Web＋Native？那要看誰更適合當主角，誰當主角才能把戲演好。一部好戲不能只有一個主角，配合互補才能演出好戲。

NativeApp 伴隨著移動設備而生，Web 技術也是自出生就與 Native App 互補和共存。APICloud 從未想過 “顛覆”，只是想提供一種實實在在的高效的 App 開發方式，讓 Web 技術和 NativeApp 能夠更好的融合，發揮出各自應有的優勢和價值。

超越源于融合！