上篇回顧：淘寶小部件：全新的開放卡片技術(shù)

2021 雙十一，淘寶全新的開放形態(tài)「小部件」大促中首次亮相，并且支撐開放業(yè)務(wù)初步規(guī)模化；說起小部件，我們還是先回顧一下淘寶小程序開放的前世今生。

小程序開放的前世今生

從頁面級開放到模塊級開放

淘寶開放業(yè)務(wù)的本質(zhì)，就是通過聯(lián)合三方開放生態(tài)的力量，幫助商家在淘內(nèi)完成更好的商業(yè)運(yùn)營行為，提供優(yōu)秀的消費(fèi)者體驗(yàn)。面對商家開放定制程度高、經(jīng)營數(shù)據(jù)協(xié)同性強(qiáng)、更高效運(yùn)營鏈路的追求下，我們對開放技術(shù)的探索永無止境。

過去我們提供了小程序的能力，打破了 H5 頁面之間的邊界和割裂，商家可以深度經(jīng)營自身的消費(fèi)者；在這個過程中，我們借力了小程序成熟的業(yè)界生態(tài)和完善的工程基建，通過獨(dú)立頁面的形態(tài)來支撐了我們自身業(yè)務(wù)的發(fā)展，譬如購物小程序、淘積木廣告等等。

后來，我們和店鋪團(tuán)隊合作，通過基于小程序環(huán)境下的插件開放，幫助店鋪引入了 100+ ISV和數(shù)千家設(shè)計師，為上萬的品牌和商家提供了差異化營銷能力。這套技術(shù)天然是以小程序插件為核心的技術(shù)方案，也是小程序環(huán)境+小程序標(biāo)準(zhǔn)；將商家自運(yùn)營主陣地店鋪小程序插件化，并對旺鋪平臺升級，使店鋪成為商家可高度模塊化定制、個性化運(yùn)營、差異化承接公域的核心經(jīng)營陣地。

再后來，我們發(fā)現(xiàn)小程序技術(shù)雖然帶來了業(yè)務(wù)資源的統(tǒng)一和利用率的巨大提升，但小程序獨(dú)立形態(tài)的本質(zhì)讓我們的追求受限。小程序獨(dú)立的頁面形態(tài)和消費(fèi)者流量承接效率之間天然會存在博弈，這里包括用戶點(diǎn)擊會存在跳失率的原因，也包括整個消費(fèi)者訪問路徑過長的原因，也有缺少消費(fèi)者前臺心智的原因。

種種原因下，基于在小程序多年的技術(shù)積累和沉淀，我們啟動了小部件開放項目。

小部件本質(zhì)上是一個開放的模塊全域通投技術(shù)，通過小部件，我們可以把業(yè)務(wù)投放在各大非小程序環(huán)境的業(yè)務(wù)場景中，譬如詳情、搜索、首猜、訂閱等等，當(dāng)然也可以在店鋪中投放。

小部件和小程序的關(guān)系

小程序的姊妹形態(tài)

小部件和小程序的關(guān)系是什么？

一言以概之，小部件是小程序的姊妹形態(tài)。

過去，我們基于在小程序多年的技術(shù)積累和沉淀，我們沉淀了小程序平臺，作為小程序/小程序的核心系統(tǒng)平臺，也是小程序系統(tǒng)的基石，提供著最基礎(chǔ)穩(wěn)定的運(yùn)行服務(wù)和數(shù)據(jù)能力；

在開發(fā)者使用的開放能力的背后，我們還有著諸多能力的基礎(chǔ)平臺，開放平臺，提供了大量可使用可應(yīng)用的基礎(chǔ)能力；在小程序中我們積累了成熟的開發(fā)者工具體系，包括 IDE、構(gòu)建器等等這些一站式的工程工具；此外，我們在橫向自研了一個高效又輕量的 Weex2.0 渲染內(nèi)核，通過渲染內(nèi)核的升級和打磨，我們使得 Weex2.0 成為小部件渲染的核心基礎(chǔ)；另外還有我們有著在小程序下積累的一批富有淘寶特色的 API 和基礎(chǔ) API 能力，這些 API 可以無縫在小部件下被我們的開發(fā)者所使用；再者，我們擁有和小程序同構(gòu)的業(yè)務(wù)容器，穩(wěn)定隔離的業(yè)務(wù)容器使得我們可以高效推進(jìn)小部件相關(guān)的業(yè)務(wù)在安全的水位下運(yùn)行。

除了這些平臺自身的基礎(chǔ)能力，我們還有來自廣告公司、品牌的新鮮創(chuàng)意，通過創(chuàng)意的組合和生態(tài)的合作，我們?yōu)闃I(yè)務(wù)供給養(yǎng)料；另外還有來自開源社區(qū)的輸入，與之配套的健壯工程體系。

站在這些巨人的肩膀上，通過這些生產(chǎn)要素的組合，我們在小程序之外孵化了一個新的開放形態(tài)：小部件。

小部件通過標(biāo)準(zhǔn)、能力、場景的三層開放，釋放了新一輪技術(shù)紅利；我們繼續(xù)標(biāo)準(zhǔn)化了開放能力的使用和完整的技術(shù)接入流程，通過新的場景開放提升了生態(tài)的創(chuàng)收空間。

在業(yè)務(wù)側(cè)，我們希望通過小部件可以撬動商家的運(yùn)營心智，并最終提升商家的經(jīng)營鏈路效果，為商家的經(jīng)營效果所買單負(fù)責(zé)。

小部件是什么

淘寶開放的新形態(tài)，卡片級開放方案

那么，回到小部件上來，小部件是什么？

小部件是淘寶開放的新形態(tài)，是我們模塊級的開放解決方案。

小部件生態(tài)里的開發(fā)者和設(shè)計師們可以通過我們的前臺業(yè)務(wù)（LiveCard/前置卡片）來進(jìn)入小部件的生產(chǎn)流程，通過我們的開放工具譬如淘寶開發(fā)者工具或者游戲引擎IDE來生產(chǎn)自身的物料，再通過我們的云函數(shù)/云應(yīng)用來連接開發(fā)者自身的云，實(shí)現(xiàn)業(yè)務(wù)邏輯的研發(fā)閉環(huán)。

小部件的開發(fā)者生產(chǎn)完物料之后，會通過我們復(fù)雜的投放系統(tǒng)來做投放；這里平臺會有一些規(guī)則的檢測和約束機(jī)制來保證流通的效率，針對不同的場景下，開發(fā)者可以開發(fā)不同的小部件來適配場景和適應(yīng)場景的業(yè)務(wù)規(guī)則，此外，針對投放側(cè)還有一些配置數(shù)據(jù)的關(guān)系存儲，最后這些業(yè)務(wù)數(shù)據(jù)會以報表的形態(tài)展現(xiàn)在商家前臺；方便商家知道自家模塊的正題情況，包括消費(fèi)者點(diǎn)擊PV、UV這些，還有引導(dǎo)成交數(shù)據(jù)等等。

投放操作完成后，小部件會在前臺業(yè)務(wù)場景完成渲染，這里的技術(shù)細(xì)節(jié)會非常復(fù)雜。因?yàn)樵诓煌膱鼍跋聲婕岸鄠€場景自身的容器，這里包括PHA、Weex｜DX、小程序等等，所以我們需要通過一些方式直接嵌入在前臺場景中。然后運(yùn)行時會動態(tài)拉取對應(yīng)的JS包再加以執(zhí)行，這個邏輯也會非常復(fù)雜，在小部件容器層面，我們會統(tǒng)一元信息、基礎(chǔ)庫能力、生命周期等等能力；部分能力和小程序容器是直接公用的。最后 JS 代碼會傳遞到小部件的內(nèi)核，也就是 Weex2.0 內(nèi)核中，Weex2.0 內(nèi)核中包括了我們自研的腳本引擎、圖形引擎還有渲染引擎。內(nèi)核主要負(fù)責(zé)執(zhí)行邏輯和提供渲染實(shí)現(xiàn)，通過Weex2.0 提供的跨平臺渲染一致性能力，我們在 iOS/Android 上可以實(shí)現(xiàn)幾乎一摸一樣的樣式能力和動畫能力，也能保證開發(fā)者的代碼可以無縫渲染兩端。

最后是我們的支撐平臺，通過開放平臺、小程序平臺、小二運(yùn)營平臺的橫向支撐和上述生產(chǎn)側(cè)、投放側(cè)、運(yùn)行側(cè)的配合，我們可以面向私域場景輸送小部件的供給。這里包括店鋪、詳情、搜索、首猜、訂閱等等；面向這些場景下，我們可以提供最上方的卡片供給，還有商品卡片、互動卡片、小程序卡片、內(nèi)容卡片、權(quán)益卡片、3D卡片等等。

關(guān)于小部件的詳細(xì)技術(shù)介紹，可以參看筆者之前的文章：《小部件：淘寶的開放卡片技術(shù)》。

小部件能幫助業(yè)務(wù)解決什么問題

那回到一個業(yè)務(wù)命題上來，小部件可以幫助業(yè)務(wù)解決什么問題？

我們拿店鋪舉例。

首先回顧一下店鋪開放業(yè)務(wù)的今年策略，店鋪今年重新做了開放業(yè)務(wù)的策略升級，主要是三個關(guān)鍵詞。

首先是「表達(dá)模式升級」，店鋪模塊升級為 LiveCard，并通過多個 LiveCard 組合為 MiniShop、每日好店等；

第二個關(guān)鍵詞是「開放模式升級」，通過視覺開放、功能開放、應(yīng)用開放的三個緯度，可以以卡片組合的方式來作為業(yè)務(wù)的前臺表達(dá)；

第三個關(guān)鍵詞是「內(nèi)容供給升級」，過去店鋪里的模塊大多數(shù)是商品貨架卡片為主，內(nèi)容化的模塊相對較少，通過內(nèi)容供給的升級，利用小部件豐富的開發(fā)者生態(tài)和強(qiáng)大的互動前置能力，我們可以將互動游戲直接前置在店鋪模塊中；

剛剛好，小部件的技術(shù)體系完美契合了店鋪業(yè)務(wù)升級的思路。

開發(fā)者開發(fā)的一個 LiveCard 模塊在店鋪裝修后，可以流通到詳情頁，并且在詳情頁的體驗(yàn)和店鋪首頁的體驗(yàn)是一模一樣的。當(dāng)然，這里面詳情只是其中一個場景，店鋪通過 LiveCard 可以從單純的貨架類卡片拓展到單品、推薦、權(quán)益、互動、內(nèi)容、小程序等多類型卡片，豐富了各個場景的卡片供給，滿足了商家多元化的經(jīng)營訴求，最大限度得釋放商家的生產(chǎn)力。

店鋪使用小部件可以實(shí)現(xiàn)商家價值與平臺價值的統(tǒng)一，業(yè)務(wù)可以通過小部件來沉淀自身的商家資產(chǎn)，并作結(jié)構(gòu)化沉淀和利用，商家可以在店鋪內(nèi)通過小部件獲取體驗(yàn)一致性和更大的開放空間作自家店鋪的深度定制，對于我們的生態(tài)來說，生態(tài)里的開發(fā)者可以獲取多場景、多賽道的創(chuàng)收空間，幫助開發(fā)者可以在更多的業(yè)務(wù)場景獲得商業(yè)價值。

小部件在雙11的規(guī)模化應(yīng)用：店鋪場景

為商家私域帶來更為豐富的場景體驗(yàn)和更強(qiáng)大的創(chuàng)新創(chuàng)造力

淘寶小部件第一次登上雙十一舞臺。在大促中總體覆蓋商家數(shù) 300+，涉及多個核心 KA 和 SKA 商家，前臺峰值消費(fèi)者曝光 PV 1900W+，UV 470W+；

支撐了雙十一 98 個店鋪 LiveCard 的上線，涉及多個 KA/SKA 品牌的定制小部件和大量腰部商家的模版小部件；

幫助平臺上的商家通過 LiveCard 更快觸達(dá)潛在客群，并在大促期間成功獲客蓄水；

小部件在雙11的規(guī)模化應(yīng)用：會員場景

幫助 Nike 打造品牌會員定制標(biāo)桿項目，提升會員運(yùn)營效率

支撐了天貓行業(yè) Top 定制項目 「Wildwood 」正式上線 Nike、Jordan、Nike Kids 三家旗艦店會員頁，整體項目對外為「Nike 會員進(jìn)階計劃」，項目完整使用了小部件復(fù)雜的交互能力，并串聯(lián)了背后的小程序增加深度體驗(yàn)；整體消費(fèi)者回訪率和停留時長均高于大盤水位；

Nike 借助小部件引入一系列高度個性化、有趣且更為深入的會員互動，借此會員進(jìn)階計劃，優(yōu)化了中國消費(fèi)者的會員體驗(yàn)；

小部件遇到的技術(shù)挑戰(zhàn)

開放業(yè)務(wù)有著比較鮮明且明顯迥異于其他業(yè)務(wù)的業(yè)務(wù)特征，這些業(yè)務(wù)特征在今年雙十一對小部件帶來了全新的技術(shù)挑戰(zhàn)。

交付工期短：

ISV 通常開發(fā)、測試的時間準(zhǔn)備不足，交付工期被項目上線時間壓縮，缺少嚴(yán)格測試周期能力

ISV 水平和質(zhì)量都參差不齊，項目交付水準(zhǔn)也無特定標(biāo)準(zhǔn)，缺少最佳實(shí)踐指導(dǎo)

上線不可控：

商家私域業(yè)務(wù)上線時間自由不可控，缺少單業(yè)務(wù)粒度的監(jiān)控和運(yùn)維能力

商家私域業(yè)務(wù)發(fā)布裝修即全量，缺少灰度放量機(jī)制

回滾難度高：

上線后遇到問題再回滾/降級的成本商家是無法 cover 的，并且存在投訴風(fēng)險

商家/品牌的業(yè)務(wù)預(yù)期一向比較明確，通常需要配合生意經(jīng)營節(jié)奏，一般不輕易回滾

這些顯著的業(yè)務(wù)特征給我們的雙十一帶來了一些棘手的挑戰(zhàn)，巨量的開發(fā)者提交版本和商家發(fā)布過程使得我們在雙十一期間經(jīng)歷了報警、回滾、排查、修復(fù)、發(fā)布的多輪考驗(yàn)。在不影響商家品牌的核心體驗(yàn)的前提下，我們和開發(fā)者一起經(jīng)歷了多輪排查問題再修復(fù)上線的過程。

結(jié)合我們的業(yè)務(wù)特征和雙十一期間的一些問題，我們總結(jié)了目前小部件最大的挑戰(zhàn)和瓶頸，同時我們也在痛苦中尋求解法：

其一，穩(wěn)定性挑戰(zhàn)：主要是小部件內(nèi)核成熟度欠缺導(dǎo)致的全局穩(wěn)定性風(fēng)險，目前小部件的內(nèi)核（Unicorn）還在快速迭代中，大量的功能需求和優(yōu)化策略也在并行開發(fā)中；在快速迭代的過程中勢必會導(dǎo)致穩(wěn)定性受到挑戰(zhàn)，這里存在業(yè)務(wù)場景對穩(wěn)定性的高要求和技術(shù)迭代過快之間的矛盾；針對穩(wěn)定性挑戰(zhàn)的問題，我們后面會持續(xù)建設(shè)內(nèi)核的穩(wěn)定性，和內(nèi)核團(tuán)隊一起把穩(wěn)定性建設(shè)作為小部件最重要的技術(shù)目標(biāo)；努力夯實(shí)內(nèi)核的基本功，面向輕量、現(xiàn)代、高性能的渲染引擎目標(biāo)邁進(jìn)；

其二，語法能力：小部件的樣式語法限制目前還是相對嚴(yán)格，主要表現(xiàn)在部分受限制的CSS樣式能力和數(shù)據(jù)協(xié)議聲明；相對于小程序/Web體系的語法，小部件的一些語法限制對開發(fā)者確實(shí)提升了學(xué)習(xí)成本，幫助小部件的開發(fā)者獲取和 Web一樣的優(yōu)秀體驗(yàn)，是我們正在努力優(yōu)化的一件事；我們希望通過后續(xù)文檔的持續(xù)完善、內(nèi)核對樣式能力的進(jìn)一步支持、工具鏈的持續(xù)增強(qiáng)來幫助開發(fā)者進(jìn)一步降低成本；

其三，開發(fā)體驗(yàn)：小部件的研發(fā)工程鏈路細(xì)節(jié)粗糙；作為一個面向開發(fā)者的技術(shù)產(chǎn)品，小部件的工程鏈路上存在很多細(xì)節(jié)點(diǎn)需要深入打磨優(yōu)化，這里包括預(yù)覽環(huán)境和真實(shí)環(huán)境的對齊、性能面板能力的提供、調(diào)試工具鏈的增強(qiáng)、線上監(jiān)控數(shù)據(jù)的披露、多場景流傳的最佳實(shí)踐、B端配置能力的升級等等；面這些開發(fā)者最關(guān)心最迫切的問題，小部件會盡快通過產(chǎn)品化的方式來優(yōu)化我們的開發(fā)者體驗(yàn)，幫助開發(fā)者可以持續(xù)通過平臺能力的升級來提升自身的開發(fā)效率和體驗(yàn)；

小部件的后續(xù)規(guī)劃

小部件項目組全面支撐了開放業(yè)務(wù)的 2021 雙十一大促，小部件技術(shù)方案實(shí)現(xiàn)了從框架演進(jìn)到內(nèi)核切換全流程的全面升級和優(yōu)化。項目組30多位核心成員，成功走過了 KO、方案評審設(shè)計、封閉測試開發(fā)、大促沖刺等各個階段，歷經(jīng)考驗(yàn)、自證預(yù)言，順利上線。

一路走來，篳路藍(lán)縷。

我們希望后續(xù)持續(xù)構(gòu)建可支撐多場景多形態(tài)、API無差別能力、端到端建設(shè)的新一代開放技術(shù)，實(shí)現(xiàn)極致的全局開放，面向生態(tài)提供更高質(zhì)量更廣闊的開放賽道。

在生態(tài)體驗(yàn)這塊：

我們計劃會面向生態(tài)開放全新的 Rax DSL，給開發(fā)者提供新的技術(shù)語言選擇；

我們計劃面向開發(fā)者升級整個監(jiān)控運(yùn)維體系，提供監(jiān)控報警、自動化運(yùn)維等報表；

我們計劃繼續(xù)豐富小部件的樣式和動畫能力，并提供更多的 API 能力；

我們計劃持續(xù)優(yōu)化開發(fā)者的體驗(yàn)，幫助開發(fā)者提高小部件的研發(fā)效率；

在技術(shù)基建這塊：

我們計劃持續(xù)接入更多淘寶的公私域場景，提高小部件的流通可能性；

我們計劃完善小部件的跨場景流通能力，并提升小部件的流通效率；

我們計劃優(yōu)化小部件的前臺消費(fèi)者體驗(yàn)，優(yōu)化小部件前臺加載時長和引入小部件集群方案；

我們計劃夯實(shí)小部件內(nèi)核基礎(chǔ)穩(wěn)定性，修煉內(nèi)功持續(xù)建設(shè)底層基建；

通過生態(tài)體驗(yàn)和技術(shù)基建的雙重建設(shè)，我們希望小部件可以成為商家在私域運(yùn)營的核心武器，幫助商家在淘寶可以更好運(yùn)營自身的消費(fèi)者。

???拓展閱讀

作者|千之

編輯|橙子君

出品|阿里巴巴新零售淘系技術(shù)

總結(jié)

以上是生活随笔為你收集整理的淘宝小部件在 2021 双十一中的规模化应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。