跨端物料解決方案-織網(wǎng)
文末福利：淘系前端團隊 618 實踐小冊
NO.1
背景
隨著行業(yè)業(yè)務(wù)發(fā)展，需求不斷增多，并且各個行業(yè)業(yè)務(wù)各自為政，沒有通用化的動力和需求，導(dǎo)致模塊無法通用化，復(fù)用度低。
小程序成為行業(yè)運營趨勢，多端(web/小程序)訴求增加，現(xiàn)有業(yè)務(wù)組件和模塊無法滿足跨端訴求，前端兼容成本高，工作量大。
天貓行業(yè)基于這樣的訴求下，前端計劃通過聯(lián)合設(shè)計、產(chǎn)品將行業(yè)UI規(guī)范化(設(shè)計師規(guī)范設(shè)計稿，前端根據(jù)規(guī)范沉淀UI組件和模塊)，提升UI組件和模塊復(fù)用度，沉淀通用物料和跨端解決方案。計劃分為三步走：第一步，將行業(yè)UI規(guī)范化;第二步，制定并落地跨端解決方案;第三步UI智能化。接下來主要分為這三個部分進行拆解進行描述。
NO.2
行業(yè)UI規(guī)范化
不同的行業(yè)業(yè)務(wù)各自為政，設(shè)計師也有著自己的規(guī)范和想法，各個行業(yè)頻道百花齊放，導(dǎo)致功能類似的模塊重復(fù)設(shè)計、重復(fù)開發(fā)，解決行業(yè)效率痛點的第一個有力抓手便是推動行業(yè)進行UI規(guī)范化。我們方法是找行業(yè)其中一些頻道進行分析，如下:
我們可以發(fā)現(xiàn)其實行業(yè)頻道的模塊大同小異，功能類似，一些高頻模塊的覆蓋率達到了70%+，對這些高頻模塊進行規(guī)范和復(fù)用，理論上能省掉近一半的開發(fā)人力。于是，接下來對高頻模塊開始進行抽象和規(guī)范:
看到這里，大家可能會有疑問了，UI規(guī)范后真的能提升一倍效率么？答案是：基本不可能的。我們在落地的過程中發(fā)現(xiàn)行業(yè)和營銷會場對比，行業(yè)對心智的要求非常高，不同的行業(yè)和頻道需要自己的心智，所以在行業(yè)場景中，無法直接使用組件/模塊，業(yè)務(wù)對模塊和組件的皮膚提出了個性化的要求。針對于這個訴求，我們進一步設(shè)計了一套基于domKey的主題配置方案，來動態(tài)修改組件/模塊主題。
在社區(qū)方案中，如果需要修改組件/模塊的主題，大家可能第一個會想到是提供全局的css樣式配置文件。但是在行業(yè)的搭建場景下，為了避免不同模塊之間的樣式污染，所有css樣式在構(gòu)建時便以css-inline的方式編譯到了每個dom上，導(dǎo)致無法使用css樣式覆蓋方案來修改組件/模塊主題。
還有另外一個原因，在規(guī)范的UI組件中，除了顏色等樣式的變化，內(nèi)容、屬性和事件也需要變化，于是需要將可變的屬性通過props拋出給到開發(fā)者使用。基于這種方案，目前的行業(yè)UI規(guī)范稿，部分組件的props會非常多，導(dǎo)致使用體驗和可維護性大大減低。
基于上面兩點考慮，設(shè)計了一套DomKey機制來達到樣式/事件/屬性/內(nèi)容可靈活配置，來滿足行業(yè)個性化的訴求。
domkey機制在落地的過程中，我們發(fā)現(xiàn)這個方案的一個缺點: 如果一個業(yè)務(wù)基于規(guī)范修改的點非常多, props字段修改就增多, 開發(fā)者使用組件的體驗就會大大減低
為了增加開發(fā)者的使用體驗，提升開發(fā)者的效率，我們修改了組件的實現(xiàn)方案，將組件和主題進行分離，然后基于iceluna開發(fā)了一套組件主題可視化生成的工具--織網(wǎng)_組件配置中心。我們可以通過此平臺可視化的生成個性化的主題，發(fā)布成一個npm主題包。
到此為止，以上的方案已經(jīng)能滿足絕大多數(shù)的行業(yè)場景，基于這個方案我們落地了行業(yè)的一些頻道，也取得了不錯的結(jié)果。
NO.3
跨端解決方案
跨端方案是基于rax的構(gòu)建時方案，使用rax語法，在構(gòu)建時實時轉(zhuǎn)化出原生的語法，天貓行業(yè)作為第一批試點業(yè)務(wù)，落地了8+小程序，業(yè)務(wù)實踐中也踩了不少坑，如果大家想了解更多細節(jié)，可以參考這兩篇文章《Rax多端小程序從0到1》和《Rax小程序踩坑踩坑指南》，后面陸續(xù)加推跨端解決方案的系列文章。
NO.4
UI智能化
眾所周知，一個模塊/組件是由UI+Data+邏輯組成，上面我們做了很多組件/模塊UI層面上的規(guī)范和方案，在實際業(yè)務(wù)需求中，多變的訴求，使Data和邏輯有所變化，導(dǎo)致還是有相對比較大的開發(fā)量，我們在想是否可以對數(shù)據(jù)層也做一些約束和規(guī)范，使用直接的數(shù)據(jù)模型直接驅(qū)動組件，是不是大部分普適的模塊就不需要開發(fā)了呢？于是我們有另外一個產(chǎn)品：織網(wǎng)_行業(yè)魔方來解決這個問題。
行業(yè)魔方剛開始切入的點是: 支持行業(yè)Feeds模塊配置不同類型數(shù)據(jù)源，并對應(yīng)不同的物料(UI)。針對于這樣一個訴求我們開發(fā)了一個工具，支持投放數(shù)據(jù)源和物料關(guān)系的配置，通過和行業(yè)后端約定數(shù)據(jù)規(guī)范，使用阿拉丁方案能力，進行數(shù)據(jù)處理并渲染。關(guān)于行業(yè)魔方具體的細節(jié)可查看這篇文章《行業(yè)魔方》)
行業(yè)魔方第一期做了一個非常重要的實踐，將數(shù)據(jù)源和物料進行解耦，通過配置進行關(guān)聯(lián)。此方案落地了天貓新風尚大促業(yè)務(wù)，驗證了豐富的UI表達類型，對用戶點擊的提升有顯著的作用。基于這樣的結(jié)論，我們設(shè)想是不是可以根據(jù)不同的人群屬性，給其匹配最合適的UI表達式樣，這樣應(yīng)該可以更大限度提升用戶點擊率。于是，千機變應(yīng)運而生。
以上是物料在千機變的應(yīng)用，關(guān)于千機變更加詳細的方案后續(xù)再介紹。
NO.5
織網(wǎng)的誕生
目前在整個阿里，跨端物料方向上建設(shè)才剛剛起步，為了提供高頻可復(fù)用的業(yè)務(wù)域跨端物料，提供跨端物料解決方案，我們規(guī)劃了織網(wǎng)平臺，服務(wù)于行業(yè)、輕店、淘小鋪、營銷導(dǎo)購的開發(fā)同學(xué)進行跨端生產(chǎn)的場景。有跨端訴求的業(yè)務(wù)歡迎一起交流~
推薦閱讀
2、你不知道的 TypeScript 泛型（萬字長文，建議收藏）
3、尤大 3 天前發(fā)在 GitHub 上的 vue-lit 是啥？
如果覺得文章不錯，幫忙點個在看唄