支付寶一開始僅僅只是一個(gè)單體應(yīng)用的工具型 App,讓用戶可以在手機(jī)完成支付寶相關(guān)的業(yè)務(wù)查詢和操作。2013 年后,支付寶逐步轉(zhuǎn)型為平臺(tái)型 App, 平臺(tái)型 App 具有服務(wù)化、模塊化、工具組件化的特點(diǎn),這個(gè)時(shí)候支付寶的業(yè)務(wù)不僅僅是支付,還需要給客戶提供了很多生活相關(guān)的服務(wù),例如余額寶、繳電費(fèi)等。2015 年后支付寶成長為超級(jí) App,超級(jí) App 會(huì)面臨開放、動(dòng)態(tài)化、高可用的挑戰(zhàn),此時(shí)支付寶里面需要支持大量復(fù)雜的業(yè)務(wù),同時(shí)開放自己的商業(yè)能力,用自己流量助力合作伙伴。

從單體應(yīng)用到超級(jí) App 的轉(zhuǎn)變,其實(shí)體現(xiàn)了一個(gè)用戶對(duì) App 需求的變化,移動(dòng)互聯(lián)網(wǎng)用戶需求的本質(zhì)是服務(wù),而不是 App,用戶高頻使用的 App 是少數(shù)。在 超級(jí) App 時(shí)代,支付寶主要面臨的挑戰(zhàn)是:

1. 支持復(fù)雜業(yè)務(wù)

App 的業(yè)務(wù)越來越復(fù)雜,不僅僅是內(nèi)部業(yè)務(wù),還包含了大量外部的合作伙伴。如果采用傳統(tǒng)的 App 開發(fā)方式很難應(yīng)對(duì)日趨復(fù)雜的業(yè)務(wù)場景。

2. 滿足業(yè)務(wù)快速迭代的需求

當(dāng)前業(yè)務(wù)的另外一個(gè)特點(diǎn)就是需要快速迭代,變化的政策、突發(fā)事件都需要我們可以快速把新的業(yè)務(wù)需求觸達(dá)給用戶。但是 App 開發(fā)一個(gè)不容忽視的問題,就是應(yīng)用商店審核。由于審核的存在,App 上開發(fā)的業(yè)務(wù)會(huì)有一個(gè)統(tǒng)一排期,比如說月底會(huì)有新版本,那么所有的業(yè)務(wù)進(jìn)度都得考慮 App 的排期計(jì)劃。

3. 開放平臺(tái)

作為超級(jí) App,一個(gè)最主要的特征就是開放。開放就是共享 App 的流量,讓外部伙伴的業(yè)務(wù)可以通過支付寶觸達(dá)用戶,這就面臨一個(gè)質(zhì)量管控的問題。支付寶需要保證這些業(yè)務(wù)是合法合規(guī)的,保障用戶的財(cái)產(chǎn)安全。

在超級(jí) App 時(shí)代,使用純 Native 開發(fā)會(huì)遇到很大的局限性。這里純 Native 開發(fā)指的是,iOS 使用 Objective-C 或者 Swift 開發(fā)、Android 使用 Java 或者 Kotlin開發(fā)。純 Native 開發(fā),業(yè)務(wù)邏輯的變化都需要通過發(fā)布新版本來觸達(dá)用戶,所以會(huì)面臨前面提到的發(fā)布審核周期長的問題。另一方面,用戶每次需要使用新功能,都需要更新一次 App ,這對(duì)用戶來說是一個(gè)成本很高的問題,會(huì)導(dǎo)致新業(yè)務(wù)很難在短時(shí)間覆蓋用戶。

站在開發(fā)的角度,純 Native 的開發(fā)效率會(huì)比前端低很多,而且同時(shí)需要 iOS 和 Android 的開發(fā)人員。包大小也是需要考慮的問題,如果目前支付寶的業(yè)務(wù)都是用 Native 開發(fā),大家看到的包大小得增加好幾倍,這進(jìn)一步增加了用戶的升級(jí)成本。作為開放平臺(tái),Native 代碼的權(quán)限和版本管理會(huì)變得異常的復(fù)雜,每次發(fā)版本就都需要同時(shí)協(xié)調(diào)內(nèi)部和外部伙伴的業(yè)務(wù),事情就變得非常糟糕了。

所以,現(xiàn)在 App 開發(fā)肯定離不開 Hybrid 方案,Hybrid 方案就是混合開發(fā),同時(shí)結(jié)合了 Native 開發(fā)和 Web 開發(fā)技術(shù)。Web 開發(fā)經(jīng)過 20 年的發(fā)展,已經(jīng)將 結(jié)構(gòu) HTML、表現(xiàn) CSS 和 行為 JS 3 部分拆開,因此具有很高的開發(fā)效率。Hybrid 方案同時(shí)具有跨平臺(tái)的特征,一份代碼同時(shí)發(fā)布到 iOS 和 Android,節(jié)省開發(fā)時(shí)間?；?Hybrid 方案開發(fā)的業(yè)務(wù)可以快速發(fā)布,而不用考慮 APP 發(fā)版實(shí)踐,給業(yè)務(wù)很大的靈活性。相比于 Web 開發(fā),Hybrid 方案提供了豐富的設(shè)備 API,讓更多業(yè)務(wù)形態(tài)成為可能。

支付寶 Hybrid 方案建設(shè)與演進(jìn)

目前支付寶有 2 套 Hybrid 方案: HTML5 容器與小程序。小程序是最近幾年才出來,H5 容器已經(jīng)有了很長時(shí)間的歷史,所以我們就先從 H5 容器說起。

· H5 容器

在支付寶中,HTML5 容器架構(gòu)如圖所示:

最上層是瀏覽器,這塊就是大家常見的 Web 開發(fā)環(huán)境,包括 HTML、CSS、JavaScript等。H5 容器作為中間層,將瀏覽器和支付寶底層框架有機(jī)結(jié)合起來,在 H5 容器里面有 2 個(gè)非常重要的概念: JSBridge 和 離線包,后面會(huì)做詳細(xì)介紹。支付寶底層框架會(huì)給 H5 容器提供 Native 的能力,這其中就包括 RPC(遠(yuǎn)程過程調(diào)用,用來實(shí)現(xiàn) APP 和服務(wù)器通信)、支付、掃一掃等。

· JSBridge

JSBridge 是 H5 容器的基石,橋接了 JS 環(huán)境與 Native,實(shí)現(xiàn)了 Native 代碼和 瀏覽器 環(huán)境的雙向通信,Native 代碼可以通過調(diào)用 瀏覽器 提供的接口運(yùn)行JS,從而實(shí)現(xiàn)調(diào)用 JS 函數(shù)、傳遞參數(shù)到 JS 環(huán)境等;而瀏覽器到JS環(huán)境的通信是通過 Native 攔截瀏覽器的請(qǐng)求來實(shí)現(xiàn),請(qǐng)求可以是網(wǎng)絡(luò)請(qǐng)求或者是一些內(nèi)部函數(shù)的調(diào)用。

那么 JSBridge 會(huì)帶來什么好處呢,在傳統(tǒng)的 Web 開發(fā)場景,H5 頁面會(huì)通過 HTTP 的 GET 或者 POST 請(qǐng)求到后臺(tái)獲取數(shù)據(jù),就會(huì)用到 jQuery 等 AJAX 框架。但是 H5 頁面中的 JS 函數(shù)公開的,沒法做一些加密邏輯,同時(shí)對(duì)于無法優(yōu)化網(wǎng)絡(luò)。這幾年隨著 4G 和流量卡的普及,讓手機(jī)網(wǎng)絡(luò)變得更快、更便宜,在這之前大量用戶會(huì)面臨流量不足、信號(hào)差、網(wǎng)絡(luò)不穩(wěn)定的情況,這些場景在現(xiàn)在依然存在,而純 Web 方案是沒法提供相關(guān)的優(yōu)化。

H5 容器提供的 JSBridge 解決了這個(gè)問題,所有 H5 頁面需要從后臺(tái)獲取的數(shù)據(jù)都通過 JS Bridge 調(diào)用 Native 的 RPC SDK 來獲取。這樣實(shí)際 App 請(qǐng)求的數(shù)據(jù)都是由 RPC SDK 來發(fā)送,從而可以實(shí)現(xiàn)安全加密、簽名校驗(yàn)、弱網(wǎng)優(yōu)化、流量優(yōu)化的功能。Native 層的這些功能是 Web 頁面開發(fā)人員無感知的,所以業(yè)務(wù)開發(fā)人員只需要專注其自身的業(yè)務(wù)開發(fā)即可。安全性由支付寶底層 SDK 保障。

H5 容器提供了 2 種擴(kuò)展方式:

1. JSAPI

JSAPI 方式給 H5 頁面增加了 Native 功能調(diào)用接口,通過實(shí)現(xiàn)自定義 JSAPI 類中的 handler 方式,可以以 Native 的形式實(shí)現(xiàn)特定功能,例如調(diào)用 Native 加密函數(shù)。

2. 事件

H5 容器在狀態(tài)變化時(shí)會(huì)發(fā)送事件,通過監(jiān)聽 H5 容器特定事件,可以實(shí)現(xiàn)對(duì) H5 容器生命周期的處理,比如修改加載進(jìn)度條顏色、修改頁面導(dǎo)航欄等。事件提供了更強(qiáng)的定制性,完全可以滿足對(duì) H5 容器的各種自定義需求。

· H5 容器離線包

H5 容器離線包是 H5 容器用戶體驗(yàn)的關(guān)鍵。

在 APP 里面打開一個(gè)線上頁面的時(shí)候,通常會(huì)有一個(gè)白屏的階段,這是瀏覽器需要從服務(wù)器下載 HTML 資源。由于手機(jī)網(wǎng)絡(luò)的限制,這個(gè)時(shí)間會(huì)很不確定,通常會(huì)花費(fèi) 300ms 以上的時(shí)間,用戶在這個(gè)時(shí)間里面就會(huì)看到頁面白屏。

為了優(yōu)化 H5 容器用戶體驗(yàn),減少白屏?xí)r間,支付寶在 H5 容器中引入了離線包技術(shù)。離線包可以簡單理解為一個(gè) zip 壓縮包,其中包含前端頁面所需的 HTML、CSS、JS、圖片等資源。內(nèi)置到客戶端后,H5 容器打開離線包頁面時(shí)會(huì)直接從離線包中獲取資源,這個(gè)是毫秒的訪問時(shí)間,消除了打開頁面白屏現(xiàn)象。

在支付寶中,離線包分為 2 種:普通的業(yè)務(wù)資源包和公共資源包。先說公共資源包吧,公共資源包中會(huì)包含一些框架 JS、CSS、常見圖片等,這些資源在整個(gè) App 里面就只保存一份;而業(yè)務(wù)資源包中只保存該業(yè)務(wù)所需的頁面靜態(tài)資源,業(yè)務(wù)之間是相互獨(dú)立解耦的。這樣一個(gè)業(yè)務(wù)的頁面資源就會(huì)同時(shí)來自其業(yè)務(wù)資源包和公共資源包,公共資源包的存在優(yōu)化了 App 大小。

為了滿足快速發(fā)布的需求,H5 容器離線包提供了更新機(jī)制,以單個(gè)離線包作為更新維度。因?yàn)閱蝹€(gè)離線包業(yè)務(wù)很簡單,所以離線包的大小是可控的,通常小于 500KB,這樣單個(gè)離線包的更新時(shí)間可控,可以做到用戶無感知。在一些極端網(wǎng)絡(luò)場景下,新的業(yè)務(wù)資源包沒有更新超過,而我們又期望用戶使用的是最新的業(yè)務(wù),這個(gè)時(shí)候 fallback 訪問機(jī)制就會(huì)發(fā)揮作用。每個(gè)離線包資源都會(huì)在服務(wù)器存放一份,在剛剛說到的極端場景下,用戶會(huì)訪問服務(wù)器的 fallback 地址獲取資源,從而保障頁面可用。

結(jié)合前面說到的離線包后,整個(gè) H5 容器渲染流程如下。其中離線包資源的更新、下載對(duì)用戶無感知,頁面訪問的資源是來自離線包還是來自 fallback 地址對(duì)前端是無感知的。

· UC Webview 內(nèi)核

為了提高 H5 容器穩(wěn)定性,支付寶在安卓系統(tǒng)上使用了 UC Webview,UC Webview 的崩潰率和ANR率遠(yuǎn)低于系統(tǒng)瀏覽器,而且徹底規(guī)避了安卓系統(tǒng) Webview 碎片化問題,相信做過安卓前端頁面兼容的同學(xué)一定可以體會(huì)到使用一個(gè)瀏覽器內(nèi)核的好處。

H5 容器作為一個(gè)成熟的 Hybrid 方案可以滿足大部分的業(yè)務(wù)場景需求,但是其依然存在一些局限性。H5 容器的業(yè)務(wù)開發(fā)部分還保持著前端開發(fā)思維,畢竟整個(gè)過程都是使用的前端技術(shù),只需要在業(yè)務(wù)開發(fā)完成后集成到 APP 中完成測試。但是客戶端開發(fā)其中還有很多關(guān)鍵的概念,例如 iOS 的 ViewController 、Android 的 Activity 等,對(duì)客戶端頁面棧有清楚的了解更有助于開發(fā) H5 容器。同時(shí) H5 容器還存在一個(gè)致命的問題就是無法管控質(zhì)量,寬泛的前端規(guī)范讓管控變得異常困難。

· 支付寶小程序

為了解決 H5 容器的局限性,順應(yīng)當(dāng)前 APP 共享開放的需求,支付寶推出了新的 Hybrid 方案:支付寶小程序。支付寶小程序一種全新的開放模式,它運(yùn)行在支付寶客戶端,可以被便捷地獲取和傳播,為終端用戶提供更優(yōu)的用戶體驗(yàn) 。支付寶小程序基于 Web 技術(shù),因此學(xué)習(xí)成本低;其一套代碼同時(shí)支持 iOS 和 Android;并提供了豐富組件和 API;完全為 APP 開發(fā)而生。目前支付寶小程序已經(jīng)提供 2000 多個(gè)開放接口,API 日調(diào)用次數(shù)超過 25 億次,擁有超過 100 萬的合作伙伴和超過 10 萬個(gè)活躍服務(wù)商。

支付寶小程序同時(shí)還支持了阿里系多個(gè) App ,包括口碑、高德和釘釘。

那么支付寶小程序是怎么解決 H5 容器的局限性呢?首先支付寶小程序是基于一個(gè)定制的 DSL 語言,不是前端的標(biāo)準(zhǔn),但是類似。在 DSL 規(guī)則下業(yè)務(wù)進(jìn)行小程序的開發(fā),不支持直接操作 DOM,這種 DSL 規(guī)則下的自由可以有效的進(jìn)行質(zhì)量管控。另外支付寶小程序可以提供比 H5 小程序更優(yōu)秀的性能、體驗(yàn)和兼容性,可以無感替換底層框架,應(yīng)對(duì)遇到的性能問題。

目前支付寶小程序也支持前面提到的 H5 容器所使用的離線包技術(shù),同時(shí)也支持 JSAPI 和事件的擴(kuò)展方式,提供了更大的靈活性。

支付寶小程序的 DSL 語言包括了 4 部分:

· JSON

文件用來提供小程序相關(guān)的配置,這里就強(qiáng)調(diào)了 page 和 window 的概念,支持用戶去配置導(dǎo)航欄等 APP 開發(fā)中的概念。

· axml

可以理解為小孩程序的頁面 HTML,不支持直接操作 DOM 保障了頁面邏輯的可控。

· JS

用來描述代碼邏輯,提供了 Page 中所需的各種生命周期,讓開發(fā)者有APP 中的各種概念。

· acss

類似于 H5 中的 CSS,支持大部分 CSS 語法,讓前端開發(fā)可以快速完成小程序 UI 設(shè)計(jì)。

目前支付寶小程序已經(jīng)逐步開放給個(gè)人開發(fā)者使用,大家可以申請(qǐng)開通,享受支付寶帶來的流量。

Hybrid 方案借助移動(dòng)開發(fā)平臺(tái) mPaaS 對(duì)外輸出

支付寶沉淀的 Hybrid 方案 H5 容器和小程序已經(jīng)經(jīng)過實(shí)際嚴(yán)苛的業(yè)務(wù)考驗(yàn),通過前面的介紹相信大家已經(jīng)有了了解。

從 0 開始開發(fā)一套 Hybrid 框架需要大量的人力以及反復(fù)的業(yè)務(wù)驗(yàn)證,對(duì)于大部分公司來說成本太高。而使用開源的 Hybrid 框架,例如 Cordova、Weex、React Native、Flutter等會(huì)面臨一個(gè)非常致命的問題,就是遇到框架層的問題,很難獲得及時(shí)有效的技術(shù)支持。

目前支付寶的 Hybrid 方案已經(jīng)借助移動(dòng)開發(fā)平臺(tái) mPaaS 對(duì)外輸出,解決前面提到的痛點(diǎn),讓你直接和支付寶使用同一套框架層代碼,而且提供及時(shí)的技術(shù)支持。

mPaaS 是一站式移動(dòng)開發(fā)解決方案,提供了移動(dòng)開發(fā)所需的 5 大組件:MGS、MDS、MPS、MAS、MSS,這些組件都是基于支付寶,經(jīng)過實(shí)際業(yè)務(wù)考驗(yàn)。

其中 mPaaS 的 Hybrid 解決方案就包含前面提到:H5 容器、離線包、小程序 三大部分。

mPaaS H5 容器是一個(gè)移動(dòng)端 Hybrid SDK,提供了良好的外部擴(kuò)展,可結(jié)合具體業(yè)務(wù)需求定制 JSAPI。在 Android 上使用 UC Webview,擁有解決系統(tǒng)級(jí) Webview Crash 的能力。

mPaaS H5 離線包將 HTML 靜態(tài)資源壓縮預(yù)置到客戶端或通過 WIFI 預(yù)加載到本地,使用時(shí)直接從本地加載,從而最大程度地提高性能。結(jié)合 mPaaS MDS 推送服務(wù),可以實(shí)現(xiàn)灰度發(fā)布、強(qiáng)制更新,讓業(yè)務(wù)的開發(fā)更加靈活。

mPaaS 小程序可以讓大家自己的 App 使用小程序技術(shù)開發(fā),構(gòu)建自己的 App 生態(tài),也就是說一步到位讓其滿足超級(jí) App 的能力。由于底層使用的就是支付寶小程序的技術(shù),可以無縫遷移支付寶小程序到自己的 App 中。

目前支付寶小程序的 IDE 已經(jīng)支持多渠道,包括支付寶、mPaaS和釘釘,點(diǎn)擊切換即可輕松將小程序發(fā)布到對(duì)應(yīng)的平臺(tái)。

點(diǎn)擊以下鏈接可以獲取 Demo 源碼,進(jìn)一步了解 mPaaS HTML5 容器&離線包特性和亮點(diǎn)。

· Demo 源碼地址:https://github.com/alipay/mpaas-demo

· 公測申請(qǐng):http://mpaas2019.mikecrm.com/otOU1k1

songjy