我在閑魚做搭建——魔魚搭投編輯器介紹

背景

魔魚搭投編輯器是一個前端頁面可視化搭建工具，運營借助編輯器可以調用搭投的底層能力，在無需開發(fā)介入的情況下，自主修改頁面內容；簡單舉幾個需求場景增強一下體感：

結合上回《閑魚前端技術體系的背后——魔魚》的介紹，我們回顧建設魔魚平臺的目標：

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

這些目標在搭投編輯器中設計中都有涉及，本文結合需求來介紹背后的思考和技術細節(jié)，希望給對搭建感興趣的同學一些啟發(fā)。架構

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

搭建領域模型

魔魚的底層搭建能力基于集團(天馬)搭建底層技術設計的PMT模型

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

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

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

在此之上，我們提供出排期策略模型Strategy，魔魚設計一個模塊只有一個TAG，因此每個模塊都只有一個資源位，以魔魚源碼搭建為例圖示一下模型間的關系：

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

可視化搭建效果演示：

• • 配置修改所見即所得（廣告位順序）

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

Schema表單

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

舉個例子，開發(fā)要提供運營可配置banner圖片(要求圖片大小750*200，必填)和banner跳轉鏈接(必填)，需要編寫如下schema來描述表單：{

"title": "腰通banner",

"type": "object",

"properties": {

"picUrl": {

"type": "image",

"title": "圖片鏈接",

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

"x-required": true

},

"url": {

"type": "string",

"title": "跳轉鏈接",

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

"x-required": true

},

}

}簡單解釋一下schema的含義，type表示字段類型是字符串，title是字段的名稱，x-format和x-required則是我們拓展的字段來表示一些校驗規(guī)則；

而經過魔魚表單組件渲染后，運營配置時則會看到如下效果：

這里展開介紹一下研發(fā)過程中思考面臨的痛點問題：

1. 1. 開發(fā)/運營的協(xié)作

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

1. 2. 開發(fā)編寫schema的效率問題

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

1. 1. 場景化標準組件，數(shù)據(jù)類型和表單組件一一映射

基于formily的拓展能力，約定schema的type字段類型和antd表單組件的映射關系，并拓展開發(fā)了如圖片，鏈接，拓展插件等高頻組件，幫助運營正確填寫和預覽投放數(shù)據(jù)；映射關系代碼：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,

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

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

在遞歸階段，分析出參數(shù)后添加校驗邏輯，通過checkImage方法校驗圖片的尺寸，格式，大小等信息是否符合頁面要求。（另外，通過收斂上傳圖片接口也可以有效約束圖片素材的壓縮要求）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. 制定閑魚schema規(guī)范，約定大于配置

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

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

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

title:'商品列表',

items:{

type: 'object',

properties: {

... // 數(shù)組項 每一個商品的字段

},

},

}

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

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

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

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

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

排期策略能力

回到本文開始提的第三個需求，運營填寫的表單字段會存儲在一個排期的模型里，表單里除了頁面的信息之外還會提供填寫排期策略的相關信息，例如生效時間，展示權重，人群類型等，依據(jù)這些信息，才能根據(jù)不同用戶訪問頁面的時間點，返回符合規(guī)則的頁面數(shù)據(jù)；

為此，閑魚策略中臺為我們定制了策略排期能力，可以將模塊的資源位和排期模型進行綁定，在此基礎上我們設計實現(xiàn)了如下能力：

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

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

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

這個問題還有疑問的話，可以加幕.思.城火星老師免費咨詢，微.信號是為: msc496。

難題沒解決？加我微信給你講！【僅限淘寶賣家交流運營知識，非賣家不要加我哈】

>

推薦閱讀：

怎么才能放心的進行天貓店鋪轉讓？該如何正確轉讓天貓網店？

生意參謀里面如何看登錄時長?

淘寶店鋪過季商品現(xiàn)在沒有什么訪客的用不用下架呢？

更多資訊請關注幕 思 城。