京東收銀臺(tái)客戶端原生化架構(gòu)設(shè)計(jì)與實(shí)踐

在之前的文章中，我們了解到收銀臺(tái)的基本業(yè)務(wù)，包含支付與信息確認(rèn)，以及活動(dòng)引流等基本功能；下面我們會(huì)對(duì)收銀臺(tái)原生化及過(guò)程，向大家做一下介紹。

在京東APP收銀臺(tái)的日常需求迭代中，我們發(fā)現(xiàn)系統(tǒng)的維護(hù)成本在逐漸增加。同時(shí)通過(guò)對(duì)服務(wù)端QPS、TP99與前端H5首開速度等數(shù)據(jù)的分析，我們認(rèn)識(shí)到收銀臺(tái)前后端在性能上也存在一定的優(yōu)化空間?；谔嵘脩趔w驗(yàn)和架構(gòu)升級(jí)等考慮，APP收銀臺(tái)團(tuán)隊(duì)發(fā)起了原生化重構(gòu)專項(xiàng)計(jì)劃。我們期待原生化重構(gòu)最終能夠達(dá)成提升用戶體驗(yàn)與轉(zhuǎn)化率，增強(qiáng)系統(tǒng)安全性、穩(wěn)定性，提升支付效率，降低維護(hù)成本等目標(biāo)。

? ??

長(zhǎng)期以來(lái)，收銀臺(tái)前端一直是以H5+原生共存的Hybrid形態(tài)存在，H5負(fù)責(zé)頁(yè)面展示渲染與交互，原生負(fù)責(zé)各個(gè)支付SDK的支付調(diào)用等邏輯處理。從技術(shù)角度來(lái)看，這種收銀臺(tái)整體支付鏈路較長(zhǎng)，用戶要經(jīng)過(guò)登錄態(tài)打通，URL重定向，添加特定UA參數(shù)，CDN獲取靜態(tài)資源，請(qǐng)求服務(wù)端接口，WebView加載資源渲染，H5原生橋接交互等一系列操作才能完成從進(jìn)入收銀臺(tái)->選擇支付方式->支付訂單的支付流程。整體流程由于涉及環(huán)節(jié)較多，相對(duì)較容易受到網(wǎng)絡(luò)抖動(dòng)、WebView OOM等影響，從而導(dǎo)致收銀臺(tái)頁(yè)面無(wú)法正常加載。此外，當(dāng)發(fā)生線上問(wèn)題時(shí)，常常要協(xié)調(diào)從前端頁(yè)面，到WebView容器，再到客戶端，網(wǎng)絡(luò)層，網(wǎng)路，網(wǎng)關(guān)，服務(wù)端，整個(gè)鏈路中涉及到的各個(gè)模塊共同排查，溝通成本較高，難以滿足5分鐘內(nèi)解決問(wèn)題原則。基于以上考慮，收銀臺(tái)團(tuán)隊(duì)決定通過(guò)放棄使用WebView相關(guān)的技術(shù)棧，采用純?cè)夹g(shù)棧實(shí)現(xiàn)，以達(dá)到縮短整體支付鏈路的目的；同時(shí)考慮到成功頁(yè)活動(dòng)配置頻繁的現(xiàn)狀，以及項(xiàng)目維度的因素，在支付后流程保留WebView的相關(guān)實(shí)現(xiàn)，但是為了避免與原有的流程耦合，需要新寫WebView容器頁(yè)面。

原生收銀臺(tái)根據(jù)靈活可配置的可配置化規(guī)則，設(shè)計(jì)了一套“元素與坑位“的方案以及與之相對(duì)應(yīng)的全新服務(wù)端接口。考量到足夠的靈活性，盡可能復(fù)用邏輯與顯示，以抵消原生收銀臺(tái)只能增量發(fā)版的弊端。同時(shí)在設(shè)計(jì)上我們也保留了WebView容器的能力，以應(yīng)對(duì)突然且緊急的情況。

經(jīng)過(guò)上述選擇過(guò)程，最后我們決定支付頁(yè)和好友代付頁(yè)使用原生技術(shù)棧實(shí)現(xiàn)，其他頁(yè)面包括支付成功頁(yè)保留H5實(shí)現(xiàn)。

在充分掌握業(yè)務(wù)的基礎(chǔ)上，架構(gòu)設(shè)計(jì)的核心是處理好抽象與解耦，這也是一種方法論；在整個(gè)重構(gòu)的過(guò)程中，為了抵消原生技術(shù)棧固有的弊端，原生收銀臺(tái)十分注重配置化能力，在架構(gòu)層保留了H5收銀臺(tái)托底，原生支付流程中添加了，可WebView配置支付支持的功能。模塊整體架構(gòu)如下：

之前H5收銀臺(tái)實(shí)現(xiàn)中，僅有一個(gè)WebView容器頁(yè)面的情況下，天然易造成業(yè)務(wù)耦合，故在新的架構(gòu)中，把不同業(yè)務(wù)的H5頁(yè)面拆分成不同的WebView容器頁(yè)面來(lái)實(shí)現(xiàn)。

我們認(rèn)為支付行為及流程的處理，統(tǒng)一閉環(huán)到支付對(duì)象中，但是不同的支付方式響應(yīng)的流程，在支付對(duì)象內(nèi)應(yīng)當(dāng)保持獨(dú)立、解耦，這樣邏輯可以更簡(jiǎn)單，支付方式的接入與移除也更容易掌控。如下：

再具體到頁(yè)面內(nèi)元素坑位的支付方式維度，每個(gè)支付方式都有自己的支付樓層，不同支付方式表現(xiàn)內(nèi)容和功能有所不同，原生收銀臺(tái)在充分梳理了所有字段、業(yè)務(wù)的基礎(chǔ)上，將不同支付方式抽象出通用的坑位，即可不必針對(duì)每個(gè)支付類型做特殊處理，而服務(wù)端根據(jù)元素坑位下發(fā)內(nèi)容動(dòng)態(tài)展示。經(jīng)過(guò)梳理，我們識(shí)別到：

? ??

同時(shí)我們將復(fù)雜邏輯，如分期擴(kuò)展信息獲取邏輯，優(yōu)惠券分期雙向聯(lián)動(dòng)選擇邏輯等，進(jìn)行了針對(duì)性的改造，在保證原有用戶體驗(yàn)和用戶使用習(xí)慣的基礎(chǔ)上，簡(jiǎn)化流程同時(shí)將業(yè)務(wù)邏輯處理上移服務(wù)端。

經(jīng)過(guò)服務(wù)端、客戶端以及前端團(tuán)隊(duì)，充分的業(yè)務(wù)梳理、刪除冗余數(shù)據(jù)與邏輯重構(gòu)合并。原生收銀臺(tái)接口的可讀性得到極大增強(qiáng)。接口數(shù)量減少了5個(gè)， 其中支付頁(yè)接口數(shù)據(jù)包大小減少了近50%。單機(jī)QPS提升18%，支付系統(tǒng)TP99提升22.5%。機(jī)器成本降低18%，系統(tǒng)維護(hù)成本降低50%。同時(shí)原生技術(shù)棧的自然技術(shù)優(yōu)勢(shì)得到體現(xiàn)，重構(gòu)后的收銀臺(tái)支付頁(yè)首開時(shí)間較之H5約快近3倍。原生化后整個(gè)支付鏈路被極大縮短為“打開即可支付“，支付效率隨之提高。

原生收銀臺(tái)在本次11.11大促之前，已經(jīng)過(guò)充分的切量、壓測(cè)等等驗(yàn)證與準(zhǔn)備，應(yīng)對(duì)大促自然胸有成竹。從結(jié)果上看，支付系統(tǒng)TP99從零點(diǎn)峰值開始到大促結(jié)束，為歷屆大促以來(lái)最好一次，整個(gè)原生收銀臺(tái)基本無(wú)客訴，平穩(wěn)度過(guò)本次大促。

從用戶體驗(yàn)的角度，收銀臺(tái)目前還有優(yōu)化空間，還可以進(jìn)一步縮短支付鏈路；從系統(tǒng)升級(jí)的角度，在安全策略、接口數(shù)據(jù)樓層化、接口合并等方面，還可以進(jìn)一步加強(qiáng)與優(yōu)化。收銀臺(tái)接下來(lái)也會(huì)對(duì)這些待優(yōu)化的點(diǎn)持續(xù)投入。