? 復(fù)制鏈接觀看《mPaaS 小程序新品發(fā)布會(huì)》全程回放

https://yqh.aliyun.com/live/detail/15372

隨著小程序技術(shù)的愈發(fā)成熟，不同平臺(tái)的優(yōu)勢(shì)和典型使用場(chǎng)景各有側(cè)重，同時(shí)越來(lái)越多的開(kāi)發(fā)者可以結(jié)合自身的業(yè)務(wù)特色，通過(guò)小程序作為業(yè)務(wù)載體，形成單一平臺(tái)或多平臺(tái)的協(xié)同關(guān)系。

而今天，小程序技術(shù)的開(kāi)放，mPaaS 小程序框架作為一款 App 通用框架，幫助開(kāi)發(fā)者面向自身的 App 實(shí)現(xiàn)小程序投放。不止如此，小程序代碼僅需撰寫一次，便可多端投放至自有 App、支付寶、釘釘甚至其他小程序開(kāi)放平臺(tái)。

本文將圍繞支付寶在移動(dòng)端架構(gòu)的演進(jìn)逐步展開(kāi)，分享我們?cè)凇癆pp 動(dòng)態(tài)性”“提升研發(fā)效率”等方面所做的思考和具體實(shí)踐。

同時(shí)，針對(duì) mPaaS 小程序能力的開(kāi)放，也將展開(kāi)介紹我們?nèi)绾螌?shí)現(xiàn)“小程序代碼只寫一次，多端投放”，而這將給開(kāi)發(fā)者帶來(lái)完全不同的開(kāi)發(fā)體驗(yàn)。

支付寶 App 發(fā)展歷程

首先讓我們先回顧看看支付寶 App 在近幾年的具體發(fā)展歷程。

支付寶一開(kāi)始僅僅只是一個(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 年后支付寶成長(zhǎng)為超級(jí) App，此時(shí)支付寶里面需要支持大量復(fù)雜的業(yè)務(wù)。

2018 年，隨著小程序的推出，支付寶開(kāi)始開(kāi)放自己的商業(yè)能力，用自己流量助力合作伙伴，因此整個(gè) App 面臨開(kāi)放、動(dòng)態(tài)化、高可用的挑戰(zhàn)，面對(duì)這些挑戰(zhàn)，我們把它總結(jié)為以下三個(gè)方面：

1. 動(dòng)態(tài)性及體驗(yàn)

• 面對(duì)多樣的需求，如何保證業(yè)務(wù)的快速迭代？

• 保證 App 動(dòng)態(tài)更新的前提下，如何保障用戶體驗(yàn)？

2. 研發(fā)效率

• 如何做到代碼一次編寫，多端復(fù)用？

• 沒(méi)有客戶端開(kāi)發(fā)經(jīng)驗(yàn)，如何提升開(kāi)發(fā)效率？

3. 開(kāi)放生態(tài)

• 如何將能力開(kāi)放給更多開(kāi)發(fā)者？

• 如何連接更多生態(tài)平臺(tái)，豐富自身 App 場(chǎng)景？

有了問(wèn)題，我們會(huì)通過(guò)技術(shù)手段，來(lái)解決這些問(wèn)題，我們從上面的三個(gè)方向出發(fā)，來(lái)進(jìn)行技術(shù)選型。

首先我們從業(yè)務(wù) 開(kāi)發(fā)成本 角度來(lái)看：

• 原生作為最基礎(chǔ)的開(kāi)發(fā)模式，需要雙端都進(jìn)行開(kāi)發(fā)，無(wú)疑成本是最高的；

• 其次是 ReactNative/Weex，即使是一次開(kāi)發(fā)，同時(shí)運(yùn)行在雙端，但由于是 JS 轉(zhuǎn)成 Native 組件渲染，實(shí)際運(yùn)行起來(lái)仍然存在些許差異，導(dǎo)致開(kāi)發(fā)者在寫業(yè)務(wù)界面時(shí)，部分差異需要通過(guò) Native 端定制開(kāi)發(fā)來(lái)解決。整體而言，ReactNative/Weex 已幫助業(yè)務(wù)方大幅降低開(kāi)發(fā)成本，但還是存在不小的端適配工作；

• 接下來(lái)是 Flutter，從業(yè)務(wù)開(kāi)發(fā)的角度來(lái)說(shuō)，F(xiàn)lutter 針對(duì)雙端對(duì)齊真的下了大功夫。在大多數(shù)場(chǎng)景下，Android 端開(kāi)發(fā)完畢之后能無(wú)縫跑在 iOS 端，當(dāng)然這和它自研的引擎有關(guān)。只不過(guò) Flutter 需基于 Dart 語(yǔ)言開(kāi)發(fā)，因此對(duì)于開(kāi)發(fā)者而言，部分老業(yè)務(wù)移植的工作量需考慮在內(nèi)；

• 最后是 HTML5，帶著成熟的語(yǔ)言，成熟的開(kāi)發(fā)模式，雙端幾乎一樣的表現(xiàn)等特性標(biāo)明 HTML5 仍然是目前我們能落地的開(kāi)發(fā)成本最低的方案。

接下來(lái)我們討論 用戶體驗(yàn) ：

• 首先，原生的體驗(yàn)毋庸置疑是最好的；

• 其次是自有渲染引擎的 Flutter，無(wú)論是性能還是控件的展現(xiàn)形式，可以說(shuō)是不亞于原生的體驗(yàn)；

• 接下來(lái)便是 ReactNative/Weex 方案，通過(guò)將前端代碼渲染成本地 Natvie 控件。在早期版本中，由于部分控件優(yōu)化不到位導(dǎo)致 App 卡頓，因此用戶體驗(yàn)的表現(xiàn)不足；

• 最后是 HTML5，完全通過(guò)瀏覽器內(nèi)核進(jìn)行渲染，借助預(yù)置資源、內(nèi)核優(yōu)化等技術(shù)，HTML5 可以做到接近原生的體驗(yàn)，但總體性能仍有差異。

接著是 動(dòng)態(tài)性 的支持：

• 首先，動(dòng)態(tài)性最優(yōu)的就是 HTML5 方案：可以訪問(wèn)在線頁(yè)面，服務(wù)端即時(shí)生效，也可以通過(guò)下發(fā)資源的方式，進(jìn)行動(dòng)態(tài)更新；

• 其次是 ReactNative/Weex 方案，通過(guò)一定的定制，開(kāi)發(fā)者可以將前端包熱部署、熱更新。不過(guò)相較于 HTML5 具備的“在線+離線”的動(dòng)態(tài)性，該方案仍然存在一定差距；

• 接下來(lái)是 Flutter，雖然有很強(qiáng)大的熱重載機(jī)制，不過(guò)由于 Google 的限制，正式版本 iOS 無(wú)法做到熱更新，目前的話，可以通過(guò)修改引擎，修改JIT和AOT方式來(lái)做到iOS熱更，或是采取運(yùn)行時(shí)解析渲染來(lái)做到動(dòng)態(tài)化，但相比于上面兩個(gè)方案，在動(dòng)態(tài)性上，flutter略差一些。

• 最后原生，Android/iOS 雙端均可以通過(guò)一些黑科技手段，進(jìn)行動(dòng)態(tài)更新，不過(guò)由于 iOS 政策禁止，因此在動(dòng)態(tài)性上，原生方案暫時(shí)不推薦；

分析完四種方案的不同的幾個(gè)方向，那么 mPaaS 帶來(lái)的答案是：

「兼顧動(dòng)態(tài)性、體驗(yàn)、開(kāi)發(fā)效率、開(kāi)放性的 Hybrid 架構(gòu)方案，即 mPaaS 小程序 」。

mPaaS小程序技術(shù)解析

什么是小程序呢？

根據(jù) w3c 小程序白皮書對(duì)小程序的定義， 小程序，是一種依賴 Web 技術(shù)，集成了原生能力的，新的移動(dòng)應(yīng)用程序格式。 它具有獲取「 便捷、連接穩(wěn)定、安全可靠、性能優(yōu)異 」這四個(gè)特點(diǎn)。

mPaaS 小程序，基于 Web 技術(shù)， 學(xué)習(xí)成本低 。

一套小程序代碼， 同時(shí)支持 iOS 和 Android ，接近原生體驗(yàn)。

同時(shí)提供 豐富的組件和 API ，如獲取用戶信息、本地存儲(chǔ)、支付功能等。

接下來(lái)我們來(lái)拆解小程序完整的技術(shù)架構(gòu)，試著通過(guò)「運(yùn)行階段、開(kāi)發(fā)階段、發(fā)布階段」將小程序整體的架構(gòu)展開(kāi)。

• 運(yùn)行階段

小程序采用雙線程模式將頁(yè)面渲染和業(yè)務(wù)邏輯分別放在兩個(gè)單獨(dú)的線程中，renderer 運(yùn)行在 WebView 中，負(fù)責(zé)渲染界面；小程序業(yè)務(wù)邏輯運(yùn)行在單獨(dú)的 worker 線程，負(fù)責(zé)事件處理、API 調(diào)用和生命周期管理。

兩個(gè)線程之間通過(guò)postMessage 以及 onMessage 進(jìn)行數(shù)據(jù)交換，數(shù)據(jù)可以從 worker 線程傳遞到 render 重新渲染界面，同時(shí)renderer也可以將事件傳遞給對(duì)應(yīng)的 worker 處理。

一個(gè) worker 可以對(duì)應(yīng)多個(gè) renderer，方便頁(yè)面間數(shù)據(jù)共享和交互。

對(duì)于渲染速度、交互響應(yīng)要求高的場(chǎng)景，如地圖，小程序?qū)⒃貓D組件嵌入到 WebView 上，相比在 Canvas 上渲染地圖，繪制速度和效率更高。

資源加載方面，小程序采用離線化方式加載，也就是說(shuō)當(dāng)打開(kāi)小程序時(shí)，小程序離線包必須下載到本地，由于每個(gè)版本只下載一次，一方面節(jié)省了每次請(qǐng)求的資源開(kāi)銷，另一方面啟動(dòng)速度大大提升了。

當(dāng)有新的版本時(shí)，發(fā)布平臺(tái)自動(dòng)比對(duì)本地安裝的版本和最新版本產(chǎn)生并下發(fā)差量包，客戶端不需要下載整個(gè)包即可更新小程序至最新版。

• 開(kāi)發(fā)與發(fā)布階段

應(yīng)用開(kāi)發(fā)必然不能缺少完善工具鏈的支持，小程序 IDE 集合了編碼、調(diào)試、預(yù)覽以及發(fā)布等能力。客戶端經(jīng)過(guò)簡(jiǎn)單的適配，即可在真機(jī)應(yīng)用中實(shí)時(shí)預(yù)覽和調(diào)試小程序。

對(duì)小程序架構(gòu)有了初步的了解之后，我們接下來(lái)看看 mPaaS 小程序?qū)⑷绾螌?shí)現(xiàn)動(dòng)態(tài)發(fā)布。這恰恰是 mPaaS 小程序核心的亮點(diǎn)，借助「包發(fā)布和管理」的能力，App 的研發(fā)與迭代效率得以深度優(yōu)化。

如上圖所示，我們重新定義了研發(fā)模式與發(fā)布流程，每個(gè)小程序都可以作為獨(dú)立產(chǎn)品，有自己的發(fā)布流程，無(wú)需等待其他團(tuán)隊(duì)。各業(yè)務(wù)團(tuán)隊(duì)進(jìn)行完全拆分，每個(gè)業(yè)務(wù)獨(dú)立演進(jìn)，獨(dú)立發(fā)布。

在發(fā)布過(guò)程中，要遵守以下流程：

1. 指標(biāo)線性，定義每次發(fā)布的業(yè)務(wù)和性能指標(biāo)；

2. 智能灰度，內(nèi)部灰度、外部灰度、指定灰度；

3. 實(shí)時(shí)監(jiān)控，修復(fù)循環(huán)；

4. 線上運(yùn)維修復(fù)手段技術(shù)兜底。

然后我們?cè)倭南滦〕绦虻陌踩?/p>

• 連接安全

基于阿里巴巴無(wú)線保鏢能力，保障小程序請(qǐng)求安全，篡改后的請(qǐng)求無(wú)法通過(guò)校驗(yàn)。

• 包體安全

包體經(jīng)過(guò)加密、加簽，保障下載過(guò)程安全，篡改后的小程序包無(wú)法正常使用。

• 權(quán)限安全

完整的權(quán)限管理體系，針對(duì)不同小程序開(kāi)放不同權(quán)限，保障用戶的隱私安全。

接著我們看下小程序框架能力擴(kuò)展體系。

mPaaS 小程序本身已集成近上百個(gè)常用的 API，包括網(wǎng)絡(luò)、媒體、存儲(chǔ)、定位、掃碼、藍(lán)牙等等，這些 API 同樣可以完美的運(yùn)行在支付寶中。

不僅如此，應(yīng)用開(kāi)發(fā)者可以將自己特色的功能 mPaaS 小程序擴(kuò)展能力透出給小程序開(kāi)發(fā)者。這塊擴(kuò)展主要包括三個(gè)方面：

• 能力擴(kuò)展： 提供自定義事件能力，支持 “ 小程序 -> 原生 ” ，以及 “ 原生 -> 小程序 ”

• 樣式擴(kuò)展： 提供多種原生樣式定制，包括導(dǎo)航欄，加載動(dòng)畫，啟動(dòng)動(dòng)畫等原生樣式

• 組件擴(kuò)展： 提供自定義組件能力，擴(kuò)展小程序標(biāo)簽

最后我們?cè)倭牧男〕绦虻亩喽送斗排c生態(tài)。

基于 mPaaS 小程序體系，我們可以將非常多的小程序標(biāo)準(zhǔn)，通過(guò)工具轉(zhuǎn)化成標(biāo)準(zhǔn)小程序產(chǎn)物，例如開(kāi)發(fā)者自己寫的 mPaaS 小程序，抑或是 mPaaS 小程序市場(chǎng)的小程序，或者支付寶 or 其他三方小程序。通過(guò) IDE 轉(zhuǎn)化完成后，我們可以通過(guò)兩種渠道，投放到不同的端上。使用 mPaaS 發(fā)布平臺(tái)，即可投放到自有 App 中，使用其他三方開(kāi)放平臺(tái)，即可投放到對(duì)應(yīng)的端上，一次開(kāi)發(fā)，僅需少量適配，即可多端投放。

當(dāng)然，對(duì)于自身 App 內(nèi)業(yè)務(wù)場(chǎng)景相對(duì)匱乏的情況，基于 mPaaS 統(tǒng)一的小程序框架能力，阿里系的三方業(yè)務(wù)場(chǎng)景，能夠?qū)崿F(xiàn)無(wú)縫投放，從而滿足開(kāi)發(fā)者豐富自身業(yè)務(wù)場(chǎng)景的需求。

基于mPaaS小程序的移動(dòng)端能力構(gòu)建

上面介紹完了 mPaaS 小程序的技術(shù)架構(gòu)以及能力，接下來(lái)我們聊下基于 mPaaS 小程序在具體研發(fā)向的思考。

• 移動(dòng)中臺(tái)能力建設(shè)

所謂移動(dòng)中臺(tái)能力建設(shè)，我們希望通過(guò)整合整個(gè) App 架構(gòu)：在基礎(chǔ)層面，將通用的組件下沉，避免重復(fù)創(chuàng)造輪子，同時(shí)標(biāo)準(zhǔn)化服務(wù)接口，為更多的上層業(yè)務(wù)提供優(yōu)質(zhì)、穩(wěn)定且標(biāo)準(zhǔn)的服務(wù)。

那么我們就需要從兩個(gè)方面來(lái)處理這個(gè)事情。

• 基礎(chǔ)組件

我們?cè)陂_(kāi)發(fā)過(guò)程中可能會(huì)存在這樣一個(gè)問(wèn)題，就是兩個(gè)團(tuán)隊(duì)協(xié)作開(kāi)發(fā)，可能大家有自己沉淀的一些經(jīng)典組件，我們可以對(duì)這些組件進(jìn)行沉淀，同時(shí)，還可以通過(guò)小程序的自定義組件能力，對(duì)小程序提供服務(wù)。

• 核心能力服務(wù)化

組件沉淀后，對(duì)于一些核心的業(yè)務(wù)能力，我們需要將這部分能力進(jìn)行服務(wù)化，抽象出標(biāo)準(zhǔn)的服務(wù)接口or小程序API，供其他團(tuán)隊(duì)或是第三方生態(tài)調(diào)用。比如說(shuō)支付寶的支付服務(wù)、芝麻信用服務(wù)等，都是依托于服務(wù)化，最終良好的為其他業(yè)務(wù)提供服務(wù)的。

• 移動(dòng)前臺(tái)建設(shè)

在我們完成 移動(dòng)中臺(tái)能力建設(shè) 之后，整體的能力就已經(jīng)具備了，剩下的就是結(jié)合小程序框架，建設(shè)我們的移動(dòng)前臺(tái)能力。

• 核心業(yè)務(wù)體驗(yàn)優(yōu)化

針對(duì)一些非常核心的業(yè)務(wù)邏輯，比如支付寶寶的支付，以及一些對(duì)性能要求比較高的業(yè)務(wù)，比如首頁(yè)，亦或是一些特殊交互的頁(yè)面。通常我們是希望通過(guò)使用原生頁(yè)面或是 flutter 等原生技術(shù)來(lái)實(shí)現(xiàn)頁(yè)面。因?yàn)檫@些頁(yè)面，通常不會(huì)有大改，所以對(duì)動(dòng)態(tài)化能力要求不是很嚴(yán)格，同時(shí)原生又能滿足這些頁(yè)面多種多樣用戶體驗(yàn)的需求。

• 復(fù)雜業(yè)務(wù)小程序化

對(duì)一些復(fù)雜的二級(jí)業(yè)務(wù)，可能業(yè)務(wù)本身會(huì)頻繁的進(jìn)行迭代，那么對(duì)于原生 native 將會(huì)是災(zāi)難般的開(kāi)發(fā)體驗(yàn)，這時(shí)候，我們需將這部分業(yè)務(wù)剝離出來(lái)，通過(guò)前端技術(shù)將業(yè)務(wù)改造成小程序，再通過(guò)發(fā)布服務(wù)將離線包發(fā)布到應(yīng)用上。這樣，就滿足了我們業(yè)務(wù)復(fù)雜多變的場(chǎng)景。

• 三方生態(tài)化

我們不僅自身提供各種各樣的服務(wù)，也需要引入第三方服務(wù)來(lái)服務(wù)更多的人群，傳統(tǒng)的 H5 頁(yè)面由于過(guò)于寬泛的前端標(biāo)準(zhǔn)，加上有一定的技術(shù)門檻，這里就不如規(guī)范、簡(jiǎn)單的小程序了。同時(shí)，在利用上面我們介紹的移動(dòng)中臺(tái)建設(shè)，對(duì)第三方小程序提供多種多樣的自有中臺(tái)能力，完成場(chǎng)景多樣化。

圍繞著小程序如何幫助我們改造自身的業(yè)務(wù)模塊，并且逐步逐步形成動(dòng)態(tài)化更新，相信大家有了更全面的認(rèn)識(shí)。

目前 mPaaS 小程序已開(kāi)放免費(fèi)試用， 歡迎接入體驗(yàn)。在接入測(cè)試階段，有任何答疑需求，也歡迎使用釘釘搜索“32843812”加群。