前端通用模塊在手淘業務中的實踐
2020年618大促已經過去，作爲淘系每年重要的大促活動，淘系前端在其中扮演着什麼樣的角色，如何保證大促的平穩進行？又在其中應用了哪些新技術？淘系前端團隊特此舉辦了 618 系列徵文，爲大家介紹 618 中的前端身影。
本篇的作者是來自於行業與工作臺團隊的 玄扈，爲大家介紹 行業魔方 項目。
前言
過去的一年，筆者在天貓行業支持了成批的行業頻道前端建設，深刻體會到業務的發展促使快速建場、高效用場的需求愈發強烈；而行業前端的開發方式仍是勞動密集型，通過加大外包資源投入+玩命加班來完成越來越多的新業務需求，而外包和加班都會導致代碼可維護性進一步下降，對頻道這類長尾業務弊大於利。
得益於淘系前端的積累，現在我們可以藉助完善的天馬搭建體系、Rax1.0跨端開發框架、imgcook智能生產這些賊棒的工具完成一個個模塊的開發並搭建出一個完整的小程序頻道，但在行業這樣的生產關係下，我們希望能沉澱出一套更高效的生產體系來支持我們高（hao）效（hao）工（shui）作（jiao）。
去年底開始，天貓行業已與UED、產品團隊合作完成了TaoUI組件規範，並建設了織網組件中心來支撐行業沉澱下來的物料，那麼，如果按照一定的規範，使用直接的數據模型直接驅動組件，是不是大部分普適的模塊就不需要開發了呢？於是，行業魔方項目應運而生。
TL;DR
我們想要 提供一套供行業業務快速搭建出行業頁面並高效運營維護的模塊生產&使用平臺。
石器時代
去年底開始推進TaoUI組件落地時，正是行業頻道需求的爆發期，我們藉此機會沉澱了一批以 行業魔方 爲名的通用模塊用以支持業務。
這批模塊成功幫助我們在短期內支持了7個淘寶/天貓行業的頻道業務，以及服飾行業新風尚的營銷場景混合Feeds需求，有效釋放了研發壓力。在這批模塊中，我們首次引入了數據驅動UI的形式，通過運營在搭建平臺配置的數據源DSL來編排數據獲取行爲，並進行數據與組件物料的組裝。
這套方案支持了我們幾個月的業務開發，但我們也發現了其中的幾個問題：
-
運營需要在搭建平臺同時配置數據源參數和物料信息，由於schema複雜，操作繁瑣，擴展性極差
-
隨着TaoUI組件的應用持續增加，定製點亦越來越多，我們提出了基於主題進行配置，主題允許業務自行定製，但通用模塊不可能透傳所有參數到組件
-
現有方案的數據獲取基於在前端發起請求，在數據源較多或混排規則複雜的場景下性能嚴重受限
-
Rax編譯時小程序方案不支持動態import組件，通用模塊引入業務定製（外部組件）能力實際無法落地
所以，我們決定發展到下個時代～
銅器時代
基於此前在行業魔方通用模塊中沉澱的經驗，我們決定做出以下幾點調整：
-
組件基於主題進行配置，主題（元素樣式集合）支持業務定製，產出了織網組件配置平臺
-
與行業後端共建數據鏈路，將對固定模型DSL的數據源獲取、混排、分頁等能力在服務端落地，前端模塊迴歸渲染本職
-
自建織網模塊工坊（行業魔方）平臺，用於配置數據源、物料主題，並用於最終發佈DSL、生產模塊
這套方案現已小步快跑支持了天貓服飾行業618會場的商品內容混排Feeds流，通過更通用、輕量的方案爲營銷會場帶來了更豐富的體驗，讓用戶不僅買得爽，還能看得爽。
鋼鐵時代（未來）
行業魔方的能力目前還是較爲初級的階段，我們希望在未來能夠通過體系化的建設，幫助業務更快更高效的編排數據->生產出符合規範且有調性的頻道模塊，一步到位，從而高效支持頻道快速建場、頻繁迭代的需求場景。
同時，這套方案因爲完全依靠編排數據和物料來渲染頻道模塊，在基於數據進行物料的混排、對不同種類的數據、不同的物料進行AB等精細化運營場景下，具備天然的接入優勢，可以完美實現算法控制數據，數據決定UI。這一理念已在天貓服飾的內部數據平臺基於行業魔方的方案有所落地。
✿ 拓展閱讀
作者| 玄扈
編輯| 橙子君
出品| 阿里巴巴新零售淘系技術
