魔鱼搭投编辑器 ，一款优秀的前端界面可视化工具

背景

魔鱼搭投编辑器是一个前端页面可视化搭建工具，运营借助编辑器可以调用搭投的底层能力，在无需开发介入的情况下，自主修改页面内容；简单举几个需求场景增强一下体感：

结合上回《闲鱼前端技术体系的背后——魔鱼》的介绍，我们回顾建设魔鱼平台的目标：

• 1. 提升前端研发效率，收敛工程研发管理流程；

• 1. 动态数据源可配置投放，从而在网关层优化页面首屏性能；

• 1. 运营自主高效准确的干预投放数据；

这些目标在搭投编辑器中设计中都有涉及，本文结合需求来介绍背后的思考和技术细节，希望给对搭建感兴趣的同学一些启发。

架构

魔鱼页面编辑器链接了搭投系统的多个链路：研发编写页面提供配置表单，对接底层系统使运营能可视化搭建页面和修改投放数据，对接网关补全动态数据，对接渲染引擎渲染最终页面等，功能涉及面很广。另外，阿里前端作为电商领域研究多年的技术团队，内部自然对页面搭建技术有大量基础建设，从图上可以看到，魔鱼页面编辑器的建设依赖很多外部系统的支持，结合闲鱼需求场景和对已有技术的选型，魔鱼团队得以在2个月的时间完成一套搭建方案的上线。
实现

搭建领域模型

魔鱼的底层搭建能力基于集团(天马)搭建底层技术设计的PMT模型

• P：即Page，指搭建系统中创建的页面；
• M：指Module，指搭建系统所创建的页面中的模块；
• T：TAG，指搭建系统中，页面中模块的每一个可用来投放数据的单位（资源位）；
  在此之上，我们提供出排期策略模型Strategy，魔鱼设计一个模块只有一个TAG，因此每个模块都只有一个资源位，以魔鱼源码搭建为例图示一下模型间的关系：
  

天马基于PMT设计规范提供了串联操作页面，模块，资源位之间关系的底层能力，魔鱼依赖于此开发可视化搭建的功能，并通过设计资源位和排期系统的交互，提供给运营动态投放数据，所见即所得实时验证页面效果的能力。
可视化搭建效果演示：

• 配置修改所见即所得（广告位顺序）

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

Schema表单

上面展示的表单部分是运营填写投放数据的区域，原理就是通过schema.json规范来描述可配置的数据表单；

举个例子，开发要提供运营可配置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则是我们拓展的字段来表示一些校验规则；
而经过魔鱼表单组件渲染后，运营配置时则会看到如下效果：

面临的痛点问题

这里展开介绍一下研发过程中思考面临的痛点问题：

1. 开发/运营的协作

schema是搭建系统和投放系统连接的桥梁，开发同学理解产品需求结合页面UI提供给运营可配置的能力，而运营填写表单得到一串json数据保存在投放系统，最终在用户访问的时渲染出页面，在这个步骤里，投放系统理解为数据库的作用，它并不理解运营填写json内容含义，因此字段校验效果验证需要发生在配置阶段，再往后的话效率上会很低，因此怎么保障填写的准确性是非常重要的；

2. 开发编写schema的效率问题

开发通过schema去描述表单如何呈现，但是表单除了字段的类型，名称信息之外，还有UI布局，校验规则，甚至联动关系相关的信息，例如想描述一个可供配置的图片列表，那么除了字段类型是数组外，在UI上还需要有增删改等功能才可让运营能完成配置需要， 描述一个这样的字段所需要写的描述信息往往超过几十行代码，显然效率是是不允许的；

针对以上的痛点，我们选用阿里开源的表单解决方案Formily，它拓展了JSON Schema制定了一套可以描述表单领域所有UI，交互的规范，按照这个规范我们可以渲染出需要的表单界面，而如何提升开发效率，我们则采用了约定大于配置的方法，定制出闲鱼schema规范提升研发效率，具体action有以下这几点：

3. 场景化标准组件，数据类型和表单组件一一映射

基于formily的拓展能力，约定schema的type字段类型和antd表单组件的映射关系，并拓展开发了如图片，链接，拓展插件等高频组件，帮助运营正确填写和预览投放数据；映射关系代码：

export const SchemaField = 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,
  },
})

通过这个能力，开发按对业务的理解描述字段类型即可渲染出对应表单组件；另外我们约定了x-format关键字，针对常用的数据格式校验，提供了快捷得声明方法，例如上文提及的校验banner图片大小，开发按如下规范添加x-fromat代码：

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

在递归阶段，分析出参数后添加校验逻辑，通过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) => {
   
   
          return checkImage({
   
    dimension, format, src: value });
        },
      };
   }
   ...
}

效果如下：

4. 制定闲鱼schema规范，约定大于配置

参考上面的痛点描述，我们知道在UI，数组，联动关系等需要下让开发编写schema依然挺复杂，动茬可能要100+行schema代码显然难以接受，因此我们制定了闲鱼schema规范，在魔鱼编辑器的表单模块里会先递归完整的schema结构，将约定的特征schema进行特殊处理，这里以数组类型数据为例：
我们的需求是描述一个商品列表的配置表单，根据魔鱼的schema规范只需要写如下schema：

listDemo:{
   
   
    type:'array', //指定该数据的类型为type
    title:'商品列表',
    items:{
   
   
      type: 'object',
      properties: {
   
   
           ...    // 数组项 每一个商品的字段
        },
      },
    }
   }

魔鱼平台呈现给运营具备增删修改复制排序能力的数组表单：

这个过程中，我们根据数组和数组项类型指定schema的表单组件，增加数组操作控件，添加每一个表单的UI描述代码，最后通过formily渲染出上面的表单；
基于这个思路，我们约定了动态数据，其他系统的插件iframe接入的规范，避免了schema文件编写维护困难的问题；

5. 本地研发工程插件提升研发体验

我们把表单渲染模块抽象出来，提供了tnpm包，结合vscode插件，让开发在书写schema.json的时候就可以实时预览最终表单的UI样式，并提供了基于闲鱼schema规范的vscode snippets工具，帮助开发依据规范书写schema；

排期策略能力

回到本文开始提的第三个需求，运营填写的表单字段会存储在一个排期的模型里，表单里除了页面的信息之外还会提供填写排期策略的相关信息，例如生效时间，展示权重，人群类型等，依据这些信息，才能根据不同用户访问页面的时间点，返回符合规则的页面数据；
为此，闲鱼策略中台为我们定制了策略排期能力，可以将模块的资源位和排期模型进行绑定，在此基础上我们设计实现了如下能力：

• 1. 提供时间穿梭能力，可以设定未来时刻来预览不同时间点页面的投放效果，达到验证页面的目的；

• 1. 排期接入圈人平台，配置不同人群下发不同排期，配合部署页面语法环境验证的功能，预览人群配置效果；

总结

目前闲鱼APP内多个页面已经迁移/接入了魔鱼研发体系，相对于使用集团内搭投编辑器方案，定制设计的页面交互方案去除了复杂冗余的不相干功能提升运营理解操作成本，而通过闲鱼schema规范的设计使更多内容运营可自主修改从而减少了研发介入的发布耗时，另外通过支持动态数据源的配置能力，配合网关减少了页面首屏耗时；

搭建技术本质上也是一种低代码的技术方案，使用搭投编辑器，闲鱼前端团队可以沉淀团队日常开发中的物料组件变为通用模块来提升代码复用率从而提升研发效率；支持更多商品内容的动态配置来提升运营页面的效率。未来搭投编辑器一方面会继续支持前端研发整体方案的迭代升级，另一方面会和平台使用者积极沟通带来更好的交互体验！

文章来源：www.toutiao.com/article/711…