有貨每天會為用戶推送專題活動頁。通過個性化推薦系統(tǒng)，有貨每天會精挑細(xì)選一些量身定制的活動粒督，借助 APP 消息分發(fā)能力推送給用戶，為用戶提供專屬福利禽翼，幫助用戶更快地找到自己心儀的商品屠橄。這類消息正是通過專題活動頁的方式呈現(xiàn)的。
活動模板簡介
活動模板是有貨前端團(tuán)隊(duì)開發(fā)的一套快速生成專題活動頁的工具闰挡。借助于這套工 具锐墙，業(yè)務(wù)運(yùn)營人員可以根據(jù)視覺稿自行拼裝頁面，快速上線專題活動頁面长酗。
為什么要做
一直以來溪北，有貨的專題活動頁面是安排專人開發(fā)的。要上線一個頁面夺脾，從運(yùn)營部門提出業(yè)務(wù)需要之拨，到開發(fā)、調(diào)試咧叭、上線敦锌，花費(fèi)大量人力、時間佳簸。極端情況下乙墙，因?qū)ｎ}活動具有時效性的特點(diǎn)颖变，頁面未充分準(zhǔn)備好就草草上線，甚至無法如期上線而錯失營銷機(jī)會听想。另外腥刹，隨著業(yè)務(wù)發(fā)展，要開發(fā)的活動頁面越來越多汉买，技術(shù)部門任務(wù)越來越重衔峰。正常版本迭代任務(wù)開發(fā)過程中，也會突然插進(jìn)專題活動開發(fā)任務(wù)蛙粘，對版本質(zhì)量也會產(chǎn)生影響垫卤。大體總結(jié)原有的專題活動頁開發(fā)模式造成的問題如下：
- 無法滿足活動時效性強(qiáng)的要求。
- 臨時安插活動任務(wù)給技術(shù)部門出牧，工作量突增穴肘。
- 開發(fā)人力、時間成本高舔痕，出問題概率高评抚。
- 多人開發(fā)，造成編碼風(fēng)格不統(tǒng)一伯复，維護(hù)困難慨代。
- 重復(fù)開發(fā)。一有新的活動需求啸如，就要重新開發(fā)侍匙。
改變原有的開發(fā)模式迫在眉睫。我們對以往的活動頁面分析發(fā)現(xiàn)叮雳，大多數(shù)頁面需要的功能特性一樣想暗。因此，我們可以按照功能特性將頁面拆分债鸡，模塊化江滨，然后針對某個活動選擇不同的模塊拼裝頁面铛纬。如果有些活動頁面當(dāng)前活動模板不能很好支持厌均，仍然需要單獨(dú)開發(fā)。我們也希望一些基本功能告唆，比如用戶權(quán)限驗(yàn)證棺弊，領(lǐng)券，可以通過引入 SDK 工具包迅速實(shí)現(xiàn)擒悬。
我們希望模她，專題活動頁面不再需要開發(fā)，業(yè)務(wù)運(yùn)營人員根據(jù)視覺設(shè)計(jì)懂牧，可以自己完成活動頁面的發(fā)布侈净，使活動上線更加及時尊勿，運(yùn)營更加高效。對于技術(shù)部門來說畜侦，一勞永逸元扔，不再出現(xiàn)正常版本迭代下突然插入額外工作的情況，從而也能保證頁面易維護(hù)旋膳，穩(wěn)定性提高澎语。
為了解決以上問題，我們開發(fā)了活動模板及 YOHO-JS-SDK 工具包验懊。
實(shí)現(xiàn)
按照上述分析擅羞，我們將頁面組件化，看做是不同類型的樓層的組合 + 常用基礎(chǔ)功能义图。
基本樓層包括側(cè)懸浮减俏、底懸浮、普通樓層三大類型歌溉，普通樓層又包括頂懸浮垄懂、圖片樓層、商品組痛垛、店鋪組等類型草慧，覆蓋了活動頁面常用的頁面片段類型，這些樓層大都可以后端渲染直出匙头。后面進(jìn)一步做 Nginx 緩存漫谷、CDN 緩存處理，保證了頁面加載效率蹂析，減輕應(yīng)用服務(wù)器負(fù)擔(dān)舔示。部分需要動態(tài)呈現(xiàn)的個性化樓層，比如商品組电抚，采用了不同的處理策略惕稻，后面詳細(xì)說明。整個活動頁面組件化處理示例如下：
商品組樓層比較特殊蝙叛。商品組樓層包含多種配置類型俺祠，有些活動的商品固定，有些需要取具體類目下的商品或者取配置的活動商品池中的商品借帘，截取一定數(shù)量展示蜘渣。另外，一個活動可能配置多個商品樓層肺然，每個商品樓層的商品數(shù)量多達(dá) 100 個蔫缸。如果將商品組類型的樓層后端直接渲染輸出，勢必會影響頁面加載速度际起。所以拾碌，這部分的渲染邏輯移到 YOHO-JS-SDK 工具包中吐葱，前端異步獲取數(shù)據(jù)，瀏覽器端渲染輸出頁面校翔。使用以上策略結(jié)合懶加載唇撬，實(shí)現(xiàn)了較高的頁面加載速度和質(zhì)量。
同時展融，商品組也是我們的個性化組件之一窖认，其他的個性化組件還包括優(yōu)惠券和有貨幣等。借助有貨的大數(shù)據(jù)處理能力告希，我們現(xiàn)在可以根據(jù)用戶在有貨的消費(fèi)習(xí)慣扑浸，為用戶直接呈現(xiàn)符合其預(yù)期的商品，我們可以為用戶定制優(yōu)惠券燕偶，提供專屬的有貨幣贈送福利喝噪。實(shí)際上每個用戶看到的活動頁面都是不同的，實(shí)現(xiàn)了千人千面指么。目前酝惧，有貨 APP 的首頁、商品頁等都已經(jīng)實(shí)現(xiàn)了千人千面伯诬。用戶使用頻率越高晚唇，手中 APP 的個性化程度就越高，就越容易找到自己想要的潮品盗似。
下面介紹下活動模板的具體實(shí)現(xiàn)哩陕。
- 服務(wù)端中間層具體實(shí)現(xiàn)：
服務(wù)端從接口取到結(jié)構(gòu)化的數(shù)據(jù)后，根據(jù)數(shù)據(jù)選取不同的樓層模板渲染赫舒，輸出頁面悍及。此中間層使用 NodeJS(ExpressJS) 搭建。此處數(shù)據(jù)渲染由于與用戶個人信息數(shù)據(jù)無關(guān)接癌，所以我們可以多級緩存生成的頁面心赶，實(shí)現(xiàn)高并發(fā)下穩(wěn)定可靠快速的頁面加載。
服務(wù)端中間層從接口取到的數(shù)據(jù)片段如下所示：
通過服務(wù)端進(jìn)一步處理后缺猛，以上數(shù)據(jù)片段中的樓層數(shù)據(jù)對應(yīng)輸出的 html 代碼和渲染的頁面樓層如下：
H5 頁面于 APP WebView 中呈現(xiàn)場景下的加載流程示例如下：
-
YOHO-JS-SDK 相關(guān)特性
常用基礎(chǔ)功能封裝成了 YOHO-JS-SDK 工具包缨叫，打包成一個可以在任何工程中方便引入的 js 文件。YOHO-JS-SDK 工具包提供了以下基礎(chǔ)功能：
- 個性化推薦枯夜。即上文說到的商品組樓層弯汰，通過 JSONP 方式異步獲取數(shù)據(jù)艰山，瀏覽器端渲染頁面湖雹。結(jié)合有貨大數(shù)據(jù)處理，可以為用戶提供個性化的商品數(shù)據(jù)曙搬。
- 促銷摔吏。領(lǐng)取有貨幣和優(yōu)惠券鸽嫂。上部分圖中的優(yōu)惠券，依然是服務(wù)端直接渲染輸出征讲。領(lǐng)取優(yōu)惠券据某，需要用戶操作的數(shù)據(jù)交互通過此 SDK 工具包實(shí)現(xiàn)。
- 權(quán)限驗(yàn)證诗箍。提供用戶身份校驗(yàn)及登錄功能癣籽。
- 分享÷俗妫活動頁面嵌入 APP筷狼，QQ，微信 的情況下匠童，提供分享到微信埂材、QQ、微博等的功能汤求，并且使用運(yùn)營在后臺維護(hù)的分享信息俏险。
任何一個活動，只要按照約定的 DOM 結(jié)構(gòu)渲染頁面扬绪，都可以通過引入 YOHO-JS-SDK 快速實(shí)現(xiàn)上述功能竖独，無需針對功能編寫代碼。
現(xiàn)在的活動需求“開發(fā)”過程如下所示：
實(shí)際使用情況及效果
- 提升了效率:
- 配合后臺開發(fā)的拖曳式排版工具挤牛，業(yè)務(wù)運(yùn)營同事可以根據(jù)視覺稿自主配置活動頁面, 幾乎無需技術(shù)部參與排期预鬓，開發(fā)，使得活動可以以最快時間上線赊颠；
- 開發(fā)工作量大幅下降格二。即使后來頁面設(shè)計(jì)上有創(chuàng)新，只開發(fā)新的樓層即可竣蹦，無需從頭開發(fā)整個頁面顶猜。節(jié)省了大量人力、時間痘括、溝通成本长窄。上線半年，支持了近 2000 個運(yùn)營活動纲菌，市場推廣頁面挠日。
- 可以對所有活動頁面質(zhì)量整體控制:
- 借助平臺的圖片處理能力，可以對圖片質(zhì)量做調(diào)整翰舌。雙十一活動期間嚣潜，我們可以通過一次代碼發(fā)布，對所有相關(guān)活動頁面的圖片質(zhì)量整體控制椅贱，以更好地平衡頁面加載速度懂算、頁面質(zhì)量和 CDN 流量只冻；
- 所有活動整體緩存控制，雙十一计技，618 期間喜德，可以延長 Nginx 緩存時間，忽略網(wǎng)址查詢字符串垮媒，提高緩存命中舍悯，減少 Node 服務(wù)器壓力，將活動流量對整站的影響降低睡雇，保障核心業(yè)務(wù)正常運(yùn)行贱呐。
總結(jié)與展望
以前的有貨活動頁面大部分都是內(nèi)嵌 APP 使用的，在開發(fā)聯(lián)調(diào)時 H5 頁面與接口入桂、與 APP 溝通交互較為復(fù)雜奄薇。逐個頁面專項(xiàng)開發(fā)或者 APP 原生實(shí)現(xiàn)，費(fèi)時費(fèi)力抗愁。此次將頁面拆分馁蒂，開發(fā)活動模板，結(jié)合 H5 開發(fā)速度快的特點(diǎn)蜘腌，很好地支持了有貨線上活動專題業(yè)務(wù)沫屡。有些常用樓層多次實(shí)踐沉淀之后，可考慮 APP 原生實(shí)現(xiàn)撮珠，以提供更好的性能沮脖。
我們也可以為其開發(fā) PWA 應(yīng)用，提供更好的瀏覽器端瀏覽體驗(yàn)芯急。借助有貨大數(shù)據(jù)處理和 AI 技術(shù)勺届，我們也可以根據(jù)活動主題和活動商品，實(shí)現(xiàn) Banner 圖的自動生成娶耍，從而為用戶提供更加個性化的視覺效果免姿，更精準(zhǔn)地匹配用戶喜好。
對于長期活動榕酒，也可以對其做專門的 SEO 優(yōu)化胚膊，提供 AMP 和 MIP 頁面支持，用戶可以通過搜索引擎直達(dá)活動頁面想鹰，增加活動曝光率紊婉。
