我在閑魚(yú)做搭建——魔魚(yú)搭投編輯器介紹

背景

魔魚(yú)搭投編輯器是一個(gè)前端頁(yè)面可視化搭建工具，運(yùn)營(yíng)借助編輯器可以調(diào)用搭投的底層能力，在無(wú)需開(kāi)發(fā)介入的情況下，自主修改頁(yè)面內(nèi)容；簡(jiǎn)單舉幾個(gè)需求場(chǎng)景增強(qiáng)一下體感：

結(jié)合上回《閑魚(yú)前端技術(shù)體系的背后——魔魚(yú)》的介紹，我們回顧建設(shè)魔魚(yú)平臺(tái)的目標(biāo)：

1. 1. 提升前端研發(fā)效率，收斂工程研發(fā)管理流程；
2. 2. 動(dòng)態(tài)數(shù)據(jù)源可配置投放，從而在網(wǎng)關(guān)層優(yōu)化頁(yè)面首屏性能；
3. 3. 運(yùn)營(yíng)自主高效準(zhǔn)確的干預(yù)投放數(shù)據(jù)；

這些目標(biāo)在搭投編輯器中設(shè)計(jì)中都有涉及，本文結(jié)合需求來(lái)介紹背后的思考和技術(shù)細(xì)節(jié)，希望給對(duì)搭建感興趣的同學(xué)一些啟發(fā)。架構(gòu)

魔魚(yú)頁(yè)面編輯器鏈接了搭投系統(tǒng)的多個(gè)鏈路：研發(fā)編寫(xiě)頁(yè)面提供配置表單，對(duì)接底層系統(tǒng)使運(yùn)營(yíng)能可視化搭建頁(yè)面和修改投放數(shù)據(jù)，對(duì)接網(wǎng)關(guān)補(bǔ)全動(dòng)態(tài)數(shù)據(jù)，對(duì)接渲染引擎渲染最終頁(yè)面等，功能涉及面很廣。另外，阿里前端作為電商領(lǐng)域研究多年的技術(shù)團(tuán)隊(duì)，內(nèi)部自然對(duì)頁(yè)面搭建技術(shù)有大量基礎(chǔ)建設(shè)，從圖上可以看到，魔魚(yú)頁(yè)面編輯器的建設(shè)依賴(lài)很多外部系統(tǒng)的支持，結(jié)合閑魚(yú)需求場(chǎng)景和對(duì)已有技術(shù)的選型，魔魚(yú)團(tuán)隊(duì)得以在2個(gè)月的時(shí)間完成一套搭建方案的上線(xiàn)。實(shí)現(xiàn)

搭建領(lǐng)域模型

魔魚(yú)的底層搭建能力基于集團(tuán)(天馬)搭建底層技術(shù)設(shè)計(jì)的PMT模型

P：即Page，指搭建系統(tǒng)中創(chuàng)建的頁(yè)面；

M：指Module，指搭建系統(tǒng)所創(chuàng)建的頁(yè)面中的模塊；

T：TAG，指搭建系統(tǒng)中，頁(yè)面中模塊的每一個(gè)可用來(lái)投放數(shù)據(jù)的單位（資源位）；

在此之上，我們提供出排期策略模型Strategy，魔魚(yú)設(shè)計(jì)一個(gè)模塊只有一個(gè)TAG，因此每個(gè)模塊都只有一個(gè)資源位，以魔魚(yú)源碼搭建為例圖示一下模型間的關(guān)系：

天馬基于PMT設(shè)計(jì)規(guī)范提供了串聯(lián)操作頁(yè)面，模塊，資源位之間關(guān)系的底層能力，魔魚(yú)依賴(lài)于此開(kāi)發(fā)可視化搭建的功能，并通過(guò)設(shè)計(jì)資源位和排期系統(tǒng)的交互，提供給運(yùn)營(yíng)動(dòng)態(tài)投放數(shù)據(jù)，所見(jiàn)即所得實(shí)時(shí)驗(yàn)證頁(yè)面效果的能力。

可視化搭建效果演示：

• • 配置修改所見(jiàn)即所得（廣告位順序）

• • 排期策略切換所見(jiàn)即所得(不同排期展示的界面不同）

Schema表單

上面展示的表單部分是運(yùn)營(yíng)填寫(xiě)投放數(shù)據(jù)的區(qū)域，原理就是通過(guò)schema.json規(guī)范來(lái)描述可配置的數(shù)據(jù)表單；

舉個(gè)例子，開(kāi)發(fā)要提供運(yùn)營(yíng)可配置banner圖片(要求圖片大小750*200，必填)和banner跳轉(zhuǎn)鏈接(必填)，需要編寫(xiě)如下schema來(lái)描述表單：{

"title": "腰通banner",

"type": "object",

"properties": {

"picUrl": {

"type": "image",

"title": "圖片鏈接",

"x-format": "@image(750,220)",

"x-required": true

},

"url": {

"type": "string",

"title": "跳轉(zhuǎn)鏈接",

"x-format": "@url()",

"x-required": true

},

}

}簡(jiǎn)單解釋一下schema的含義，type表示字段類(lèi)型是字符串，title是字段的名稱(chēng)，x-format和x-required則是我們拓展的字段來(lái)表示一些校驗(yàn)規(guī)則；

而經(jīng)過(guò)魔魚(yú)表單組件渲染后，運(yùn)營(yíng)配置時(shí)則會(huì)看到如下效果：

這里展開(kāi)介紹一下研發(fā)過(guò)程中思考面臨的痛點(diǎn)問(wèn)題：

1. 1. 開(kāi)發(fā)/運(yùn)營(yíng)的協(xié)作

schema是搭建系統(tǒng)和投放系統(tǒng)連接的橋梁，開(kāi)發(fā)同學(xué)理解產(chǎn)品需求結(jié)合頁(yè)面UI提供給運(yùn)營(yíng)可配置的能力，而運(yùn)營(yíng)填寫(xiě)表單得到一串json數(shù)據(jù)保存在投放系統(tǒng)，最終在用戶(hù)訪(fǎng)問(wèn)的時(shí)渲染出頁(yè)面，在這個(gè)步驟里，投放系統(tǒng)理解為數(shù)據(jù)庫(kù)的作用，它并不理解運(yùn)營(yíng)填寫(xiě)json內(nèi)容含義，因此字段校驗(yàn)效果驗(yàn)證需要發(fā)生在配置階段，再往后的話(huà)效率上會(huì)很低，因此怎么保障填寫(xiě)的準(zhǔn)確性是非常重要的；

1. 2. 開(kāi)發(fā)編寫(xiě)schema的效率問(wèn)題

開(kāi)發(fā)通過(guò)schema去描述表單如何呈現(xiàn)，但是表單除了字段的類(lèi)型，名稱(chēng)信息之外，還有UI布局，校驗(yàn)規(guī)則，甚至聯(lián)動(dòng)關(guān)系相關(guān)的信息，例如想描述一個(gè)可供配置的圖片列表，那么除了字段類(lèi)型是數(shù)組外，在UI上還需要有增刪改等功能才可讓運(yùn)營(yíng)能完成配置需要， 描述一個(gè)這樣的字段所需要寫(xiě)的描述信息往往超過(guò)幾十行代碼，顯然效率是是不允許的；針對(duì)以上的痛點(diǎn)，我們選用阿里開(kāi)源的表單解決方案Formily，它拓展了JSON Schema制定了一套可以描述表單領(lǐng)域所有UI，交互的規(guī)范，按照這個(gè)規(guī)范我們可以渲染出需要的表單界面，而如何提升開(kāi)發(fā)效率，我們則采用了約定大于配置的方法，定制出閑魚(yú)schema規(guī)范提升研發(fā)效率，具體action有以下這幾點(diǎn)：

1. 1. 場(chǎng)景化標(biāo)準(zhǔn)組件，數(shù)據(jù)類(lèi)型和表單組件一一映射

基于formily的拓展能力，約定schema的type字段類(lèi)型和antd表單組件的映射關(guān)系，并拓展開(kāi)發(fā)了如圖片，鏈接，拓展插件等高頻組件，幫助運(yùn)營(yíng)正確填寫(xiě)和預(yù)覽投放數(shù)據(jù)；映射關(guān)系代碼：exportconstSchemaField= createSchemaField({

components: {

image: Image,

string: Input,

Input,

Password,

boolean: Switch,

array: ArrayTable,

Space,

color: Color,

time: TimePicker,

cards: ArrayCards,

text: Input,

date: DateTime,

daterange: DatePicker.RangePicker,

textarea: Input.TextArea,

number: NumberPicker,

radio: Radio.Group,

plugin: Plugin,

select: Select,

Editable,

copy: CopyItem,

// UI組件

FormCollapse,

FormGrid,

FormLayout,

FormItem,

},})通過(guò)這個(gè)能力，開(kāi)發(fā)按對(duì)業(yè)務(wù)的理解描述字段類(lèi)型即可渲染出對(duì)應(yīng)表單組件；另外我們約定了x-format關(guān)鍵字，針對(duì)常用的數(shù)據(jù)格式校驗(yàn)，提供了快捷得聲明方法，例如上文提及的校驗(yàn)banner圖片大小，開(kāi)發(fā)按如下規(guī)范添加x-fromat代碼：

@image('WidthxHeight', format, minSize, maxSize)

在遞歸階段，分析出參數(shù)后添加校驗(yàn)邏輯，通過(guò)checkImage方法校驗(yàn)圖片的尺寸，格式，大小等信息是否符合頁(yè)面要求。（另外，通過(guò)收斂上傳圖片接口也可以有效約束圖片素材的壓縮要求）const handler = {

...

image: (

dimension: string,

format: string,

minSize: number,

maxSize: number,

uploaderOptions: any,

action?: string,

): IMoyuSchema =>{

return{

'x-component': 'image',

'x-component-props': {

dimension,

format,

minSize,

maxSize,

uploaderOptions,

action,

},

'x-validator': async(value: any) =>{

returncheckImage({ dimension, format, src: value });

},

};

}

...

}效果如下：

1. 2. 制定閑魚(yú)schema規(guī)范，約定大于配置

參考上面的痛點(diǎn)描述，我們知道在UI，數(shù)組，聯(lián)動(dòng)關(guān)系等需要下讓開(kāi)發(fā)編寫(xiě)schema依然挺復(fù)雜，動(dòng)茬可能要100+行schema代碼顯然難以接受，因此我們制定了閑魚(yú)schema規(guī)范，在魔魚(yú)編輯器的表單模塊里會(huì)先遞歸完整的schema結(jié)構(gòu)，將約定的特征schema進(jìn)行特殊處理，這里以數(shù)組類(lèi)型數(shù)據(jù)為例：

我們的需求是描述一個(gè)商品列表的配置表單，根據(jù)魔魚(yú)的schema規(guī)范只需要寫(xiě)如下schema：listDemo:{

type:'array', //指定該數(shù)據(jù)的類(lèi)型為type

title:'商品列表',

items:{

type: 'object',

properties: {

... // 數(shù)組項(xiàng) 每一個(gè)商品的字段

},

},

}

}魔魚(yú)平臺(tái)呈現(xiàn)給運(yùn)營(yíng)具備增刪修改復(fù)制排序能力的數(shù)組表單：

這個(gè)過(guò)程中，我們根據(jù)數(shù)組和數(shù)組項(xiàng)類(lèi)型指定schema的表單組件，增加數(shù)組操作控件，添加每一個(gè)表單的UI描述代碼，最后通過(guò)formily渲染出上面的表單；

基于這個(gè)思路，我們約定了動(dòng)態(tài)數(shù)據(jù)，其他系統(tǒng)的插件iframe接入的規(guī)范，避免了schema文件編寫(xiě)維護(hù)困難的問(wèn)題；

1. 3. 本地研發(fā)工程插件提升研發(fā)體驗(yàn)

我們把表單渲染模塊抽象出來(lái)，提供了tnpm包，結(jié)合vscode插件，讓開(kāi)發(fā)在書(shū)寫(xiě)schema.json的時(shí)候就可以實(shí)時(shí)預(yù)覽最終表單的UI樣式，并提供了基于閑魚(yú)schema規(guī)范的vscode snippets工具，幫助開(kāi)發(fā)依據(jù)規(guī)范書(shū)寫(xiě)schema；

排期策略能力

回到本文開(kāi)始提的第三個(gè)需求，運(yùn)營(yíng)填寫(xiě)的表單字段會(huì)存儲(chǔ)在一個(gè)排期的模型里，表單里除了頁(yè)面的信息之外還會(huì)提供填寫(xiě)排期策略的相關(guān)信息，例如生效時(shí)間，展示權(quán)重，人群類(lèi)型等，依據(jù)這些信息，才能根據(jù)不同用戶(hù)訪(fǎng)問(wèn)頁(yè)面的時(shí)間點(diǎn)，返回符合規(guī)則的頁(yè)面數(shù)據(jù)；

為此，閑魚(yú)策略中臺(tái)為我們定制了策略排期能力，可以將模塊的資源位和排期模型進(jìn)行綁定，在此基礎(chǔ)上我們?cè)O(shè)計(jì)實(shí)現(xiàn)了如下能力：

1. 1. 提供時(shí)間穿梭能力，可以設(shè)定未來(lái)時(shí)刻來(lái)預(yù)覽不同時(shí)間點(diǎn)頁(yè)面的投放效果，達(dá)到驗(yàn)證頁(yè)面的目的；
2. 2. 排期接入圈人平臺(tái)，配置不同人群下發(fā)不同排期，配合部署頁(yè)面語(yǔ)法環(huán)境驗(yàn)證的功能，預(yù)覽人群配置效果；
3. 總結(jié)

目前閑魚(yú)APP內(nèi)多個(gè)頁(yè)面已經(jīng)遷移/接入了魔魚(yú)研發(fā)體系，相對(duì)于使用集團(tuán)內(nèi)搭投編輯器方案，定制設(shè)計(jì)的頁(yè)面交互方案去除了復(fù)雜冗余的不相干功能提升運(yùn)營(yíng)理解操作成本，而通過(guò)閑魚(yú)schema規(guī)范的設(shè)計(jì)使更多內(nèi)容運(yùn)營(yíng)可自主修改從而減少了研發(fā)介入的發(fā)布耗時(shí)，另外通過(guò)支持動(dòng)態(tài)數(shù)據(jù)源的配置能力，配合網(wǎng)關(guān)減少了頁(yè)面首屏耗時(shí)；

搭建技術(shù)本質(zhì)上也是一種低代碼的技術(shù)方案，使用搭投編輯器，閑魚(yú)前端團(tuán)隊(duì)可以沉淀團(tuán)隊(duì)日常開(kāi)發(fā)中的物料組件變?yōu)橥ㄓ媚K來(lái)提升代碼復(fù)用率從而提升研發(fā)效率；支持更多商品內(nèi)容的動(dòng)態(tài)配置來(lái)提升運(yùn)營(yíng)頁(yè)面的效率。未來(lái)搭投編輯器一方面會(huì)繼續(xù)支持前端研發(fā)整體方案的迭代升級(jí)，另一方面會(huì)和平臺(tái)使用者積極溝通帶來(lái)更好的交互體驗(yàn)！

這個(gè)問(wèn)題還有疑問(wèn)的話(huà)，可以加幕.思.城火星老師免費(fèi)咨詢(xún)，微.信號(hào)是為: msc496。

難題沒(méi)解決？加我微信給你講！【僅限淘寶賣(mài)家交流運(yùn)營(yíng)知識(shí)，非賣(mài)家不要加我哈】

>

推薦閱讀：

怎么才能放心的進(jìn)行天貓店鋪轉(zhuǎn)讓?zhuān)吭撊绾握_轉(zhuǎn)讓天貓網(wǎng)店？

生意參謀里面如何看登錄時(shí)長(zhǎng)?

淘寶店鋪過(guò)季商品現(xiàn)在沒(méi)有什么訪(fǎng)客的用不用下架呢？

更多資訊請(qǐng)關(guān)注幕 思 城。