作者：千之

上篇回顧：淘寶小部件：全新的開放卡片技術！

2021 雙十一，淘寶全新的開放形態「小部件」大促中首次亮相，並且支撐開放業務初步規模化；說起小部件，我們還是先回顧一下淘寶小程式開放的前世今生。

小程式開放的前世今生

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

淘寶開放業務的本質，就是通過聯合三方開放生態的力量，幫助商家在淘內完成更好的商業運營行為，提供優秀的消費者體驗。面對商家開放定製程度高、經營資料協同性強、更高效運營鏈路的追求下，我們對開放技術的探索永無止境。

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

後來，我們和店鋪團隊合作，通過基於小程式環境下的外掛開放，幫助店鋪引入了 100+ ISV和數千家設計師，為上萬的品牌和商家提供了差異化營銷能力。這套技術天然是以小程式外掛為核心的技術方案，也是小程式環境+小程式標準；將商家自運營主陣地店鋪小程式外掛化，並對旺鋪平臺升級，使店鋪成為商家可高度模組化定製、個性化運營、差異化承接公域的核心經營陣地。

再後來，我們發現小程式技術雖然帶來了業務資源的統一和利用率的巨大提升，但小程式獨立形態的本質讓我們的追求受限。小程式獨立的頁面形態和消費者流量承接效率之間天然會存在博弈，這裡包括使用者點選會存在跳失率的原因，也包括整個消費者訪問路徑過長的原因，也有缺少消費者前臺心智的原因。

種種原因下，基於在小程式多年的技術積累和沉澱，我們啟動了小部件開放專案。

小部件本質上是一個開放的模組全域通投技術， 通過小部件，我們可以把業務投放在各大非小程式環境的業務場景中，譬如詳情、搜尋、首猜、訂閱等等，當然也可以在店鋪中投放。

小部件和小程式的關係

小程式的姊妹形態

小部件和小程式的關係是什麼？

一言以概之，小部件是小程式的姊妹形態。

過去，我們基於在小程式多年的技術積累和沉澱，我們沉澱了小程式平臺，作為小程式/小程式的核心繫統平臺，也是小程式系統的基石，提供著最基礎穩定的執行服務和資料能力；

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

除了這些平臺自身的基礎能力，我們還有來自廣告公司、品牌的新鮮創意，通過創意的組合和生態的合作，我們為業務供給養料；另外還有來自開源社群的輸入，與之配套的健壯工程體系。

站在這些巨人的肩膀上，通過這些生產要素的組合，我們在小程式之外孵化了一個新的開放形態：小部件。

小部件通過標準、能力、場景的三層開放，釋放了新一輪技術紅利；我們繼續標準化了開放能力的使用和完整的技術接入流程，通過新的場景開放提升了生態的創收空間。

在業務側，我們希望通過小部件可以撬動商家的運營心智，並最終提升商家的經營鏈路效果，為商家的經營效果所買單負責。

小部件是什麼

淘寶開放的新形態，卡片級開放方案

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

小部件是淘寶開放的新形態，是我們模組級的開放解決方案。

小部件生態裡的開發者和設計師們可以通過我們的前臺業務（LiveCard/前置卡片）來進入小部件的生產流程，通過我們的開放工具譬如淘寶開發者工具或者遊戲引擎IDE來生產自身的物料，再通過我們的雲函式/雲應用來連線開發者自身的雲，實現業務邏輯的研發閉環。

小部件的開發者生產完物料之後，會通過我們複雜的投放系統來做投放；這裡平臺會有一些規則的檢測和約束機制來保證流通的效率，針對不同的場景下，開發者可以開發不同的小部件來適配場景和適應場景的業務規則，此外，針對投放側還有一些配置資料的關係儲存，最後這些業務資料會以報表的形態展現在商家前臺；方便商家知道自家模組的正題情況，包括消費者點選PV、UV這些，還有引導成交資料等等。

投放操作完成後，小部件會在前臺業務場景完成渲染，這裡的技術細節會非常複雜。因為在不同的場景下會涉及多個場景自身的容器，這裡包括PHA、Weex｜DX、小程式等等，所以我們需要通過一些方式直接嵌入在前臺場景中。然後執行時會動態拉取對應的JS包再加以執行，這個邏輯也會非常複雜，在小部件容器層面，我們會統一元資訊、基礎庫能力、生命週期等等能力；部分能力和小程式容器是直接公用的。最後 JS 程式碼會傳遞到小部件的核心，也就是 Weex2.0 核心中，Weex2.0 核心中包括了我們自研的指令碼引擎、圖形引擎還有渲染引擎。核心主要負責執行邏輯和提供渲染實現，通過Weex2.0 提供的跨平臺渲染一致效能力，我們在 iOS/Android 上可以實現幾乎一摸一樣的樣式能力和動畫能力，也能保證開發者的程式碼可以無縫渲染兩端。

最後是我們的支撐平臺，通過開放平臺、小程式平臺、小二運營平臺的橫向支撐和上述生產側、投放側、執行側的配合，我們可以面向私域場景輸送小部件的供給。這裡包括店鋪、詳情、搜尋、首猜、訂閱等等；面向這些場景下，我們可以提供最上方的卡片供給，還有商品卡片、互動卡片、小程式卡片、內容卡片、權益卡片、3D卡片等等。

關於小部件的詳細技術介紹，可以參看筆者之前的文章：淘寶小部件：全新的開放卡片技術！

小部件能幫助業務解決什麼問題

那回到一個業務命題上來，小部件可以幫助業務解決什麼問題？

我們拿店鋪舉例。

首先回顧一下店鋪開放業務的今年策略，店鋪今年重新做了開放業務的策略升級，主要是三個關鍵詞。

1. 首先是「表達模式升級」，店鋪模組升級為 LiveCard，並通過多個 LiveCard 組合為 MiniShop、每日好店等；
2. 第二個關鍵詞是「開放模式升級」，通過視覺開放、功能開放、應用開放的三個緯度，可以以卡片組合的方式來作為業務的前臺表達；
3. 第三個關鍵詞是「內容供給升級」，過去店鋪裡的模組大多數是商品貨架卡片為主，內容化的模組相對較少，通過內容供給的升級，利用小部件豐富的開發者生態和強大的互動前置能力，我們可以將互動遊戲直接前置在店鋪模組中。

剛剛好，小部件的技術體系完美契合了店鋪業務升級的思路。

開發者開發的一個 LiveCard 模組在店鋪裝修後，可以流通到詳情頁，並且在詳情頁的體驗和店鋪首頁的體驗是一模一樣的。當然，這裡面詳情只是其中一個場景，店鋪通過 LiveCard 可以從單純的貨架類卡片擴充到單品、推薦、權益、互動、內容、小程式等多型別卡片，豐富了各個場景的卡片供給，滿足了商家多元化的經營訴求，最大限度得釋放商家的生產力。

店鋪使用小部件可以實現商家價值與平臺價值的統一，業務可以通過小部件來沉澱自身的商家資產，並作結構化沉澱和利用，商家可以在店鋪內通過小部件獲取體驗一致性和更大的開放空間作自家店鋪的深度定製，對於我們的生態來說，生態裡的開發者可以獲取多場景、多賽道的創收空間，幫助開發者可以在更多的業務場景獲得商業價值。

小部件在雙11的規模化應用：店鋪場景

為商傢俬域帶來更為豐富的場景體驗和更強大的創新創造力

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

• 支撐了雙十一 98 個店鋪 LiveCard 的上線，涉及多個 KA/SKA 品牌的定製小部件和大量腰部商家的模版小部件；
• 幫助平臺上的商家通過 LiveCard 更快觸達潛在客群，並在大促期間成功獲客蓄水。

小部件在雙11的規模化應用：會員場景

幫助 Nike 打造品牌會員定製標杆專案，提升會員運營效率

1. 支撐了天貓行業 Top 定製專案 「Wildwood 」正式上線 Nike、Jordan、Nike Kids 三家旗艦店會員頁，整體專案對外為「Nike 會員進階計劃」，專案完整使用了小部件複雜的互動能力，並串聯了背後的小程式增加深度體驗；整體消費者回訪率和停留時長均高於大盤水位；
2. Nike 藉助小部件引入一系列高度個性化、有趣且更為深入的會員互動，藉此會員進階計劃，優化了中國消費者的會員體驗。

小部件遇到的技術挑戰

開放業務有著比較鮮明且明顯迥異於其他業務的業務特徵，這些業務特徵在今年雙十一對小部件帶來了全新的技術挑戰。

交付工期短：

1. ISV 通常開發、測試的時間準備不足，交付工期被專案上線時間壓縮，缺少嚴格測試周期能力
2. ISV 水平和質量都參差不齊，專案交付水準也無特定標準，缺少最佳實踐指導

上線不可控：

1. 商傢俬域業務上線時間自由不可控，缺少單業務粒度的監控和運維能力
2. 商傢俬域業務釋出裝修即全量，缺少灰度放量機制

回滾難度高：

1. 上線後遇到問題再回滾/降級的成本商家是無法 cover 的，並且存在投訴風險
2. 商家/品牌的業務預期一向比較明確，通常需要配合生意經營節奏，一般不輕易回滾

這些顯著的業務特徵給我們的雙十一帶來了一些棘手的挑戰，巨量的開發者提交版本和商家釋出過程使得我們在雙十一期間經歷了報警、回滾、排查、修復、釋出的多輪考驗。在不影響商家品牌的核心體驗的前提下，我們和開發者一起經歷了多輪排查問題再修復上線的過程。

結合我們的業務特徵和雙十一期間的一些問題，我們總結了目前小部件最大的挑戰和瓶頸，同時我們也在痛苦中尋求解法：

其一，穩定性挑戰： 主要是小部件核心成熟度欠缺導致的全域性穩定性風險，目前小部件的核心（Unicorn）還在快速迭代中，大量的功能需求和優化策略也在並行開發中；在快速迭代的過程中勢必會導致穩定性受到挑戰，這裡存在業務場景對穩定性的高要求和技術迭代過快之間的矛盾；針對穩定性挑戰的問題，我們後面會持續建設核心的穩定性，和核心團隊一起把穩定性建設作為小部件最重要的技術目標；努力夯實核心的基本功，面向輕量、現代、高效能的渲染引擎目標邁進；

其二，語法能力： 小部件的樣式語法限制目前還是相對嚴格，主要表現在部分受限制的CSS樣式能力和資料協議宣告；相對於小程式/Web體系的語法，小部件的一些語法限制對開發者確實提升了學習成本，幫助小部件的開發者獲取和 Web一樣的優秀體驗，是我們正在努力優化的一件事；我們希望通過後續文件的持續完善、核心對樣式能力的進一步支援、工具鏈的持續增強來幫助開發者進一步降低成本；

其三，開發體驗： 小部件的研發工程鏈路細節粗糙；作為一個面向開發者的技術產品，小部件的工程鏈路上存在很多細節點需要深入打磨優化，這裡包括預覽環境和真實環境的對齊、效能皮膚能力的提供、除錯工具鏈的增強、線上監控資料的披露、多場景流傳的最佳實踐、B端配置能力的升級等等；面這些開發者最關心最迫切的問題，小部件會盡快通過產品化的方式來優化我們的開發者體驗，幫助開發者可以持續通過平臺能力的升級來提升自身的開發效率和體驗。

小部件的後續規劃

小部件專案組全面支撐了開放業務的 2021 雙十一大促，小部件技術方案實現了從框架演進到核心切換全流程的全面升級和優化。專案組30多位核心成員，成功走過了 KO、方案評審設計、封閉測試開發、大促衝刺等各個階段，歷經考驗、自證預言，順利上線。

一路走來，篳路藍縷。

我們希望後續持續構建可支撐多場景多形態、API無差別能力、端到端建設的新一代開放技術，實現極致的全域性開放，面向生態提供更高質量更廣闊的開放賽道。

[]()

在生態體驗這塊：

1. 我們計劃會面向生態開放全新的 Rax DSL，給開發者提供新的技術語言選擇；
2. 我們計劃面向開發者升級整個監控運維體系，提供監控報警、自動化運維等報表；
3. 我們計劃繼續豐富小部件的樣式和動畫能力，並提供更多的 API 能力；
4. 我們計劃持續優化開發者的體驗，幫助開發者提高小部件的研發效率。

在技術基建這塊：

1. 我們計劃持續接入更多淘寶的公私域場景，提高小部件的流通可能性；
2. 我們計劃完善小部件的跨場景流通能力，並提升小部件的流通效率；
3. 我們計劃優化小部件的前臺消費者體驗，優化小部件前臺載入時長和引入小部件叢集方案；
4. 我們計劃夯實小部件核心基礎穩定性，修煉內功持續建設底層基建。

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

關注【阿里巴巴移動技術】微信公眾號，每週 3 篇移動技術實踐&乾貨給你思考！