目前 mPaaS H5 容器 Demo 源碼已釋出至 GitHub，全新的接入方式讓你可以一鍵內建 mPaaS 環境并快速接入 H5 容器，體驗統一的容器和核心，擷取媲美原生的 Hybrid 方案及完美的動态能力。
時間： 1月15日15:00 — 16:00
主題： 移動開發平台mPaaS重磅釋出
詳情：
https://m.aliyun.com/markets/aliyun/act/mpaas_mobile 預約直播： https://developer.aliyun.com/live/1881支付寶 Hybrid 方案建設與演進
目前支付寶有 2 套 Hybrid 方案： HTML5 容器與小程式。小程式是最近幾年才出來，H5 容器已經有了很長時間的曆史，是以我們就先從 H5 容器說起。
- H5 容器
在支付寶中，HTML5 容器架構如圖所示：
最上層是浏覽器，這塊就是大家常見的 Web 開發環境，包括 HTML、CSS、JavaScript等。H5 容器作為中間層，将浏覽器和支付寶底層架構有機結合起來，在 H5 容器裡面有 2 個非常重要的概念： JSBridge 和 離線包，後面會做詳細介紹。支付寶底層架構會給 H5 容器提供 Native 的能力，這其中就包括 RPC（遠端過程調用，用來實作 APP 和伺服器通信）、支付、掃一掃等。
- JSBridge
JSBridge 是 H5 容器的基石，橋接了 JS 環境與 Native，實作了 Native 代碼和 浏覽器 環境的雙向通信，Native 代碼可以通過調用 浏覽器 提供的接口運作JS，進而實作調用 JS 函數、傳遞參數到 JS 環境等；而浏覽器到JS環境的通信是通過 Native 攔截浏覽器的請求來實作，請求可以是網絡請求或者是一些内部函數的調用。
那麼 JSBridge 會帶來什麼好處呢，在傳統的 Web 開發場景，H5 頁面會通過 HTTP 的 GET 或者 POST 請求到背景擷取資料，就會用到 jQuery 等 AJAX 架構。但是 H5 頁面中的 JS 函數公開的，沒法做一些加密邏輯，同時對于無法優化網絡。這幾年随着 4G 和流量卡的普及，讓手機網絡變得更快、更便宜，在這之前大量使用者會面臨流量不足、信号差、網絡不穩定的情況，這些場景在現在依然存在，而純 Web 方案是沒法提供相關的優化。
H5 容器提供的 JSBridge 解決了這個問題，所有 H5 頁面需要從背景擷取的資料都通過 JS Bridge 調用 Native 的 RPC SDK 來擷取。這樣實際 App 請求的資料都是由 RPC SDK 來發送，進而可以實作安全加密、簽名校驗、弱網優化、流量優化的功能。Native 層的這些功能是 Web 頁面開發人員無感覺的，是以業務開發人員隻需要專注其自身的業務開發即可。安全性由支付寶底層 SDK 保障。
H5 容器提供了 2 種擴充方式：
1. JSAPI
JSAPI 方式給 H5 頁面增加了 Native 功能調用接口，通過實作自定義 JSAPI 類中的 handler 方式，可以以 Native 的形式實作特定功能，例如調用 Native 加密函數。
2. 事件
H5 容器在狀态變化時會發送事件，通過監聽 H5 容器特定事件，可以實作對 H5 容器生命周期的處理，比如修改加載進度條顔色、修改頁面導航欄等。事件提供了更強的定制性，完全可以滿足對 H5 容器的各種自定義需求。
- H5 容器離線包
H5 容器離線包是 H5 容器使用者體驗的關鍵。
在 APP 裡面打開一個線上頁面的時候，通常會有一個白屏的階段，這是浏覽器需要從伺服器下載下傳 HTML 資源。由于手機網絡的限制，這個時間會很不确定，通常會花費 300ms 以上的時間，使用者在這個時間裡面就會看到頁面白屏。
為了優化 H5 容器使用者體驗，減少白屏時間，支付寶在 H5 容器中引入了離線包技術。離線包可以簡單了解為一個 zip 壓縮包，其中包含前端頁面所需的 HTML、CSS、JS、圖檔等資源。内置到用戶端後，H5 容器打開離線包頁面時會直接從離線包中擷取資源，這個是毫秒的通路時間，消除了打開頁面白屏現象。
在支付寶中，離線包分為 2 種：普通的業務資源包和公共資源包。先說公共資源包吧，公共資源包中會包含一些架構 JS、CSS、常見圖檔等，這些資源在整個 App 裡面就隻儲存一份；而業務資源包中隻儲存該業務所需的頁面靜态資源，業務之間是互相獨立解耦的。這樣一個業務的頁面資源就會同時來自其業務資源包和公共資源包，公共資源包的存在優化了 App 大小。
為了滿足快速釋出的需求，H5 容器離線包提供了更新機制，以單個離線包作為更新次元。因為單個離線包業務很簡單，是以離線包的大小是可控的，通常小于 500KB，這樣單個離線包的更新時間可控，可以做到使用者無感覺。在一些極端網絡場景下，新的業務資源包沒有更新超過，而我們又期望使用者使用的是最新的業務，這個時候 fallback 通路機制就會發揮作用。每個離線包資源都會在伺服器存放一份，在剛剛說到的極端場景下，使用者會通路伺服器的 fallback 位址擷取資源，進而保障頁面可用。
結合前面說到的離線包後，整個 H5 容器渲染流程如下。其中離線包資源的更新、下載下傳對使用者無感覺，頁面通路的資源是來自離線包還是來自 fallback 位址對前端是無感覺的。
- UC Webview 核心
為了提高 H5 容器穩定性，支付寶在安卓系統上使用了 UC Webview，UC Webview 的崩潰率和ANR率遠低于系統浏覽器，而且徹底規避了安卓系統 Webview 碎片化問題，相信做過安卓前端頁面相容的同學一定可以體會到使用一個浏覽器核心的好處。
H5 容器作為一個成熟的 Hybrid 方案可以滿足大部分的業務場景需求，但是其依然存在一些局限性。H5 容器的業務開發部分還保持着前端開發思維，畢竟整個過程都是使用的前端技術，隻需要在業務開發完成後內建到 APP 中完成測試。但是用戶端開發其中還有很多關鍵的概念，例如 iOS 的 ViewController 、Android 的 Activity 等，對用戶端頁面棧有清楚的了解更有助于開發 H5 容器。同時 H5 容器還存在一個緻命的問題就是無法管控品質，寬泛的前端規範讓管控變得異常困難。
- 支付寶小程式
為了解決 H5 容器的局限性，順應目前 APP 共享開放的需求，支付寶推出了新的 Hybrid 方案：支付寶小程式。支付寶小程式一種全新的開放模式，它運作在支付寶用戶端，可以被便捷地擷取和傳播，為終端使用者提供更優的使用者體驗 。支付寶小程式基于 Web 技術，是以學習成本低；其一套代碼同時支援 iOS 和 Android；并提供了豐富元件和 API；完全為 APP 開發而生。目前支付寶小程式已經提供 2000 多個開放接口，API 日調用次數超過 25 億次，擁有超過 100 萬的合作夥伴和超過 10 萬個活躍服務商。
支付寶小程式同時還支援了阿裡系多個 App ，包括口碑、高德和釘釘。
那麼支付寶小程式是怎麼解決 H5 容器的局限性呢？首先支付寶小程式是基于一個定制的 DSL 語言，不是前端的标準，但是類似。在 DSL 規則下業務進行小程式的開發，不支援直接操作 DOM，這種 DSL 規則下的自由可以有效的進行品質管控。另外支付寶小程式可以提供比 H5 小程式更優秀的性能、體驗和相容性，可以無感替換底層架構，應對遇到的性能問題。
目前支付寶小程式也支援前面提到的 H5 容器所使用的離線包技術，同時也支援 JSAPI 和事件的擴充方式，提供了更大的靈活性。
支付寶小程式的 DSL 語言包括了 4 部分：
- JSON
檔案用來提供小程式相關的配置，這裡就強調了 page 和 window 的概念，支援使用者去配置導航欄等 APP 開發中的概念。
- axml
可以了解為小孩程式的頁面 HTML，不支援直接操作 DOM 保障了頁面邏輯的可控。
- JS
用來描述代碼邏輯，提供了 Page 中所需的各種生命周期，讓開發者有APP 中的各種概念。
- acss
類似于 H5 中的 CSS，支援大部分 CSS 文法，讓前端開發可以快速完成小程式 UI 設計。
目前支付寶小程式已經逐漸開放給個人開發者使用，大家可以申請開通，享受支付寶帶來的流量。
Hybrid 方案借助移動開發平台 mPaaS 對外輸出
支付寶沉澱的 Hybrid 方案 H5 容器和小程式已經經過實際嚴苛的業務考驗，通過前面的介紹相信大家已經有了了解。
從 0 開始開發一套 Hybrid 架構需要大量的人力以及反複的業務驗證，對于大部分公司來說成本太高。而使用開源的 Hybrid 架構，例如 Cordova、Weex、React Native、Flutter等會面臨一個非常緻命的問題，就是遇到架構層的問題，很難獲得及時有效的技術支援。
目前支付寶的 Hybrid 方案已經借助移動開發平台 mPaaS 對外輸出，解決前面提到的痛點，讓你直接和支付寶使用同一套架構層代碼，而且提供及時的技術支援。
mPaaS 是一站式移動開發解決方案，提供了移動開發所需的 5 大元件：MGS、MDS、MPS、MAS、MSS，這些元件都是基于支付寶，經過實際業務考驗。
其中 mPaaS 的 Hybrid 解決方案就包含前面提到：H5 容器、離線包、小程式 三大部分。
mPaaS H5 容器是一個移動端 Hybrid SDK，提供了良好的外部擴充，可結合具體業務需求定制 JSAPI。在 Android 上使用 UC Webview，擁有解決系統級 Webview Crash 的能力。
mPaaS H5 離線包将 HTML 靜态資源壓縮預置到用戶端或通過 WIFI 預加載到本地，使用時直接從本地加載，進而最大程度地提高性能。結合 mPaaS MDS 推送服務，可以實作灰階釋出、強制更新，讓業務的開發更加靈活。
mPaaS 小程式可以讓大家自己的 App 使用小程式技術開發，建構自己的 App 生态，也就是說一步到位讓其滿足超級 App 的能力。由于底層使用的就是支付寶小程式的技術，可以無縫遷移支付寶小程式到自己的 App 中。
目前支付寶小程式的 IDE 已經支援多管道，包括支付寶、mPaaS和釘釘，點選切換即可輕松将小程式釋出到對應的平台。
擷取 Demo 源碼，進一步了解 mPaaS HTML5 容器&離線包特性和亮點。
Demo 源碼位址：
https://github.com/alipay/mpaas-demo公測申請：
http://mpaas2019.mikecrm.com/otOU1k1