打造手淘極簡包的輕量化框架
作者:周松(北傲)
如今app冗餘與包大小一直都是很多業務揮之不去的優化項。行業內很多極簡包如雨後春筍般冒出來。又或者是很多業務對極簡包的探索也有積極的嘗試。
極簡包帶來的價值,不僅是包大小上的質變,更是使用者下載轉化率和投放帶來的正向效應,線下下沉市場的開闢具有重要價值,對拉新轉化率影響很大。
一般極簡包會有兩種方案:
1、作為一個套殼App,套了一層H5。主要鏈路由前端去打通交易流程,然後通過更新方案引導使用者升級;
2、作為一個套殼App,套了一層H5。主要鏈路由前端去打通交易流程,然後通過外掛化的形式去動態更新Native版本的app。
無論採用上述哪種方式,作為H5的載體,只使用原生的web去開啟頁面體驗感仍不是很好。同時還會伴有各種H5的適配聯調和優化。而對於H5比較龐大的業務,如手淘,很多頁面前端去適配有極大的工作量,投入產出比不高。
故手淘極簡包提供第三種方案:
3、主頁由多個TAB實現,可以Native或者H5,由業務自己去選擇,詳情頁通過H5去載入。後期升級鏈路是傳統Apk更新或者外掛化由業務方自己去選擇。
由此手淘極簡包專案分離了一個可以快速搭建極簡App的框架。可供作為基礎腳手架,快速搭建出自己業務的極簡版App。
MTAS
Mini TaoBao Application Scaffold
MTAS是手淘極簡版應用腳手架,是基於快速搭建極簡包專案的App框架。
如今手機淘寶極簡版採用此極簡包基礎框架,包大小4M+。
基礎架構思維導圖
極簡基礎框架從結構上主要分為幾個部分:
極簡基礎服務
極簡基礎庫 -- 主要整合集團的基礎依賴,比如:網路、容器、登入等。都是經過裁剪或重構過的精簡版,相較於原版冗餘複雜功能多,精簡版的基礎依賴輕量簡單功能少。只要需要的基礎功能,不去額外增加包大小的負擔。
統一api層 -- 要想快速搭建一個輕量的app,基礎的功能封裝不能少,在這個模組中,統一實現常用的功能,若是業務接入,不需要重複造輪子。只需要簡單呼叫即可。
極簡外圍容器
極簡外圍容器由mini-網頁容器sdk作為載體,外圍實現極簡版的相關統一攔截導航。支援登入、back、跳轉、外鏈拉起、降級等功能。啟用多webview方案代替原生webview的快取前進後退等策略,使頁面過渡更加流暢。進入前後級更加快速,互動更好。內建快取冷啟及首次啟動達到秒開級別,提升使用者體驗。
極簡升級鏈路
可以同時支援外掛化下載、安裝、切換。也可以支援傳統的應用apk下載、安裝、升級。通過流式呼叫控制下載相關的操作,呼叫方可以自定義下載流來做自己想做的事情,例如一些流前檢查,流後處理,開關控制等等。
極簡業務元件
搭建一個簡版首頁的基礎檢視元件、常用的下拉重新整理、上拉載入元件、裁剪過的recyclerView等等元件,可以支援搭建簡單的首頁。
詳細設計
極簡包基礎框架自下而上,從基礎依賴到上層業務,一層層做解耦和分離。
業務可以呼叫基礎功能,也可以自行擴充套件功能。比較靈活。
極簡包定義一套輕量化方案,核心解決以下三類問題:
-
包大小:通過輕量基礎服務,以及Native + H5業務形態縮減包體大小至4M+;
-
升級轉化:外掛化底座實現靜默更新,外掛靜默更新 + 兜底APK更新 + 應用市場自動更新,整體提升升級率;
-
端內體驗:
- Native化核心頁面、H5預渲染、H5詳情極速版提升核心鏈路載入體驗
- 登入,保障包體大小前提下,支援支付寶登入、手機號一鍵登入&驗證碼登入、首頁強引導。
極簡版架構設計
極簡基礎服務
極簡基礎庫
主要整合集團的基礎依賴。都是經過裁剪或重構過的精簡版,相較於原版冗餘複雜功能多,精簡版的基礎依賴輕量簡單功能少。只要需要的基礎功能,不去額外增加包大小的負擔。
以下介紹幾個主要的裁剪基礎庫:
網頁容器sdk裁剪對比圖
mini-網頁容器sdk,是一個可擴充套件的 Hybrid 應用解決方案,為客戶端內的 Web 頁面提供了強大、易用的 WebView 容器。輕量且易用,目前只有500kb,不依賴UC核心,做到小而簡。
圖片庫sdk裁剪對比圖
mini-圖片庫sdk,精簡無線圖片庫sdk是阿里巴巴Android端集影象載入、顯示、處理、監控於一體的一站式解決方案。覆蓋業內主流圖片庫核心特性,同時因地制宜結合集團CDN圖片處理規則,旨在更有效地節省流量、更優越的記憶體佔用、更極致的效能優化、更流暢的載入體驗。簡化執行緒排程框架,減少圖片格式支援,輕量圖片降級方案,保留基礎功能,對模組合併,程式碼優化,收縮一些負責功能。
閘道器sdk裁剪對比圖
mini-閘道器sdk ,精簡API閘道器平臺,為客戶端、H5和服務端提供統一、快捷、可靠的API接入以及監控報表服務。保留安全框架的能力,保障移動平臺應用完整性、應用執行環境可信性、資料機密性。原生網路庫減小包大小。提供plugin供前端呼叫。
mini-資料採集sdk,一套面向客戶端開發的目前集團內覆蓋app最多的資料採集SDK,具有資料安全級別高、資料到達率高、傳輸流量小等特點。優化程式碼做裁剪,去網路底層sdk依賴。
mini-登入sdk,統一登入SDK為淘系APP打造一致的賬戶體驗,並且與安全深度整合,提供一致的安全水位。
程式碼裁剪,突出一鍵登入及sso登入,提高登入效率。縮減鏈路長的登入。
極簡包依賴大小對比圖
極簡包基礎依賴裁剪過後,正向收益是十分明顯的,有效的降低了包大小,去除不必要的依賴和功能。使應用達到輕量化和簡潔化。負向影響也可以預料,功能多樣性降低,可供的選擇減少。
統一api層
極簡包基礎框架中做了一套統一基礎實現。整合常用的工具類,對功能的使用也做了封裝。
基礎實現包類展示
每個包的劃分使職責明確。使用方可以直接用裡面的各種方法。也可以自己自定義需要的功能,或者實現介面擴充套件想要的能力。
極簡外圍容器
容器外圍承接了業務的基礎功能,保證正常的H5流程及安全相關的支援。同時也可以自定義實現業務方自己的擴充套件。
攔截導航
路由攔截導航主要分為兩個部分:替換器(Replace)和攔截器(Filter)。攔截器主要負責攔截並且做一些安全性的校驗以及處理;替換器主要處理業務上通用的功能,方便除錯測試的功能等等。
多WebView方案
為提升使用者體驗,極簡包採用多WebView方案,對h5頁面的前進、後退進行了優化,即在前進時開啟一個新WebView進行頁面載入,回退時可以立刻隱藏WebView實現秒退。
多WebView設計
極簡升級鏈路
極簡框架中的下載鏈路,可以根據策略模式自行選擇,根據前置條件的分配和設定,業務層主導如何執行策略。目前升級鏈路內建Apk更新和外掛更新,使用者也可以自定義流水線去包裝成另一個策略實現更新。
外掛包或者主線Apk包釋出可以在與極簡包解耦,互相的釋出不受影響,不互相阻塞,可以提前測試,線上提前部署。
升級鏈路
應用升級
極簡下載更新流程的架構方式主要通過流式呼叫來做階段化推進。其中應用升級的流如下:
應用升級流水線
這個整個流水線也可以自己去定義。
外掛升級
在外掛化下載更新架構中,線上外掛編譯好之後,端上通過下載、安裝、載入來做到切換到主包。
同時涵蓋安全模式,如果外掛包有異常,可以通過安全模式回滾至原來的極簡包。
外掛升級流水線&鏈路
安全模式
區別與傳統的Apk升級,外掛化升級的方式更加靈活、便捷、可配置。但是外掛化也可能會遇到一些機型和新系統相容性、穩定性的挑戰。這時候極簡基礎框架就有一個安全模式作為有力的保障,在遇到一些不可預料的場景,多次錯誤的情況,這個後盾就可以作為兜底,在錯誤態的情況下還原或復原應用的正常使用態。
安全模式提供基礎的安全校驗,在載入外掛之前,檢驗外掛是否合法、是否安全、檔案是否損壞等等,先行判斷。也可以通過策略配置,去動態的控制是否需要載入外掛。在保障體系中,最核心的就是回滾機制,當外掛載入之後,正在執行,出現了一些崩潰等影響使用者使用的案例,連續崩潰等重大錯誤行為嚴重影響使用者的使用,這時候,回滾機制就會判斷出出現了問題,就會回滾至極簡包,而不載入外掛內容,保證使用者的使用和體驗。
外掛升級通過在wifi情況下的靜默更新服務對使用者做引導升級,快速切換升級至全量業務。
外掛升級對於極簡包升級至主包,升級率的提高,各種下單、登入成本的降低等等的業務價值很高。
思考與未來
極簡包在快速獲取新增使用者上面的體驗優勢巨大,安裝速度極快,基礎鏈路保證,可以讓使用者體驗到APP功能。架構上整包可以配置更新,版本迭代覆蓋節奏可控。可以通過外掛快速部署各種新包、測試包、A/B實驗包來滿足各種需求。
長遠來看,技術上可以通過外掛化動態編譯技術,業務和效能可以通過hook實現自動插樁埋點、程式碼塊或者業務塊根據優先順序分包下載和載入等等。
關注【阿里巴巴移動技術】微信公眾號,每週 3 篇移動技術實踐&乾貨給你思考!
- 淘寶Native研發模式的演進與思考 | DX研發模式
- 前車之鑑:聊聊釘釘 Flutter 落地桌面端踩過的“坑” | Dutter
- 釘釘 Flutter 跨四端方案設計與技術實踐 | Dutter
- 前車之鑑:聊聊釘釘 Flutter 落地桌面端踩過的“坑” | Dutter
- Dutter | 前車之鑑:聊聊釘釘 Flutter 落地桌面端踩過的“坑”
- Dutter | 釘釘 Flutter 跨四端方案設計與技術實踐
- Swift 首次除錯斷點慢的問題解法 | 優酷 Swift 實踐
- Swift 首次除錯斷點慢的問題解法 | 優酷 Swift 實踐
- Swift 首次除錯斷點慢的問題解法 | 優酷 Swift 實踐
- MNN 引擎的稀疏計算方案設計與實踐
- 2022 支付寶五福 | “聯機版”打年獸背後的網路技術 RTMS
- 淘寶小程式體驗優化:資料分析和優化實踐
- Cube 技術解讀 | Cube 渲染設計的前世今生
- hyengine - 面向移動端的高效能通用編譯/解釋引擎
- 構建順滑自然的 Flutter 頁面
- 淘特 Flutter 流暢度優化實踐 · 二期
- 收藏!2022年全球IT基礎設施行業技術競爭格局分析
- 提升 Hybrid 體驗:餓了麼雙十一 PHA 框架技術實踐
- 優酷播放黑科技 | 自由視角技術的全鏈路策略與落地實踐
- 淘寶小程式體驗優化:資料分析和優化實踐