天天看點

前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)

前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)

2020年618大促已經過去,作為淘系每年重要的大促活動,淘系前端在其中扮演着什麼樣的角色,如何保證大促的平穩進行?又在其中應用了哪些新技術?淘系前端團隊特此舉辦了 618 系列征文,為大家介紹 618 中的前端身影。

本篇的作者是來自于行業與工作台團隊的 玄扈,為大家介紹 行業魔方 項目。

前言

過去的一年,筆者在天貓行業支援了成批的行業頻道前端建設,深刻體會到業務的發展促使快速建場、高效用場的需求愈發強烈;而行業前端的開發方式仍是勞動密集型,通過加大外包資源投入+玩命加班來完成越來越多的新業務需求,而外包和加班都會導緻代碼可維護性進一步下降,對頻道這類長尾業務弊大于利。

得益于淘系前端的積累,現在我們可以借助完善的天馬搭建體系、Rax1.0跨端開發架構、imgcook智能生産這些賊棒的工具完成一個個子產品的開發并搭建出一個完整的小程式頻道,但在行業這樣的生産關系下,我們希望能沉澱出一套更高效的生産體系來支援我們高(hao)效(hao)工(shui)作(jiao)。

去年底開始,天貓行業已與UED、産品團隊合作完成了TaoUI元件規範,并建設了織網元件中心來支撐行業沉澱下來的物料,那麼,如果按照一定的規範,使用直接的資料模型直接驅動元件,是不是大部分普适的子產品就不需要開發了呢?于是,行業魔方項目應運而生。

前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)
前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)
前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)

TL;DR

我們想要 提供一套供行業業務快速搭建出行業頁面并高效營運維護的子產品生産&使用平台。

石器時代

去年底開始推進TaoUI元件落地時,正是行業頻道需求的爆發期,我們借此機會沉澱了一批以 行業魔方 為名的通用子產品用以支援業務。

前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)

這批子產品成功幫助我們在短期内支援了7個淘寶/天貓行業的頻道業務,以及服飾行業新風尚的營銷場景混合Feeds需求,有效釋放了研發壓力。在這批子產品中,我們首次引入了資料驅動UI的形式,通過營運在搭建平台配置的資料源DSL來編排資料擷取行為,并進行資料與元件物料的組裝。

前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)

這套方案支援了我們幾個月的業務開發,但我們也發現了其中的幾個問題:

1、營運需要在搭建平台同時配置資料源參數和物料資訊,由于schema複雜,操作繁瑣,擴充性極差

2、随着TaoUI元件的應用持續增加,定制點亦越來越多,我們提出了基于主題進行配置,主題允許業務自行定制,但通用子產品不可能透傳所有參數到元件

3、現有方案的資料擷取基于在前端發起請求,在資料源較多或混排規則複雜的場景下性能嚴重受限

4、Rax編譯時小程式方案不支援動态import元件,通用子產品引入業務定制(外部元件)能力實際無法落地

是以,我們決定發展到下個時代~

銅器時代

基于此前在行業魔方通用子產品中沉澱的經驗,我們決定做出以下幾點調整:

1、元件基于主題進行配置,主題(元素樣式集合)支援業務定制,産出了織網元件配置平台

2、與行業後端共建資料鍊路,将對固定模型DSL的資料源擷取、混排、分頁等能力在服務端落地,前端子產品回歸渲染本職

3、自建織網子產品工坊(行業魔方)平台,用于配置資料源、物料主題,并用于最終釋出DSL、生産子產品

前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)
前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)

這套方案現已小步快跑支援了天貓服飾行業618會場的商品内容混排Feeds流,通過更通用、輕量的方案為營銷會場帶來了更豐富的體驗,讓使用者不僅買得爽,還能看得爽。

鋼鐵時代(未來)

行業魔方的能力目前還是較為初級的階段,我們希望在未來能夠通過體系化的建設,幫助業務更快更高效的編排資料->生産出符合規範且有調性的頻道子產品,一步到位,進而高效支援頻道快速建場、頻繁疊代的需求場景。

前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)

同時,這套方案因為完全依靠編排資料和物料來渲染頻道子產品,在基于資料進行物料的混排、對不同種類的資料、不同的物料進行AB等精細化營運場景下,具備天然的接入優勢,可以完美實作算法控制資料,資料決定UI。這一理念已在天貓服飾的内部資料平台基于行業魔方的方案有所落地。

關注「淘系技術」微信公衆号,一個有溫度有内容的技術社群~

前端通用子產品在手淘業務中的實踐前言TL;DR石器時代銅器時代鋼鐵時代(未來)

繼續閱讀