我在闲鱼做搭建-魔鱼搭投编辑器介绍

简介: 魔鱼搭投编辑器是一个前端页面可视化搭建工具,运营借助编辑器可以调用搭投的底层能力,在无需开发介入的情况下,自主修改页面内容;简单举几个需求场景增强一下体感:![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2022/png/25156814/1657002070368-0d405155-479c-42d5-b6c0-7b48f

魔鱼搭投编辑器是一个前端页面可视化搭建工具,运营借助编辑器可以调用搭投的底层能力,在无需开发介入的情况下,自主修改页面内容;简单举几个需求场景增强一下体感:
image.png结合上回《闲鱼前端技术体系的背后——魔鱼》的介绍,我们回顾建设魔鱼平台的目标:

  1. 提升前端研发效率,收敛工程研发管理流程;
  2. 动态数据源可配置投放,从而在网关层优化页面首屏性能;
  3. 运营自主高效准确的干预投放数据;

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

整体架构

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

实现细节

搭建领域模型

魔鱼的底层搭建能力基于集团(天马)搭建底层技术设计的PMT模型
P:即Page,指搭建系统中创建的页面;
M:指Module,指搭建系统所创建的页面中的模块;
T:TAG,指搭建系统中,页面中模块的每一个可用来投放数据的单位(资源位);
在此之上,我们提供出排期策略模型Strategy,魔鱼设计一个模块只有一个TAG,因此每个模块都只有一个资源位,以魔鱼源码搭建为例图示一下模型间的关系:
image.png
天马基于PMT设计规范提供了串联操作页面,模块,资源位之间关系的底层能力,并提供天马编辑器管理调用底层数据和接口,魔鱼依赖于此开发可视化搭建的功能,并通过设计资源位和排期系统的交互,提供给运营动态投放数据,所见即所得实时验证页面效果的能力。
可视化搭建效果演示:

  • 配置修改所见即所得(广告位顺序)

数据修改.gif

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

排期切换.gif

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则是我们拓展的字段来表示一些校验规则;
而经过魔鱼表单组件渲染后,运营配置时则会看到如下效果:
image.png
这里展开介绍一下研发过程中思考面临的痛点问题:

  1. 开发/运营的协作

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

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

开发通过schema去描述表单如何呈现,但是表单除了字段的类型,名称信息之外,还有UI布局,校验规则,甚至联动关系相关的信息,例如想描述一个可供配置的图片列表,那么除了字段类型是数组外,在UI上还需要有增删改等功能才可让运营能完成配置需要, 描述一个这样的字段所需要写的描述信息往往超过几十行代码,显然效率是是不允许的;
针对以上的痛点,我们选用阿里开源的表单解决方案Formily,它拓展了JSON Schema制定了一套可以描述表单领域所有UI,交互的规范,按照这个规范我们可以渲染出需要的表单界面,而如何提升开发效率,我们则采用了约定大于配置的方法,定制出闲鱼schema规范提升研发效率,具体action有以下这几点:

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

基于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 });
        },
      };
   }
   ...
}

效果如下:
image.png

  1. 制定闲鱼schema规范,约定大于配置

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

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

魔鱼平台呈现给运营具备增删修改复制排序能力的数组表单:
image.png
这个过程中,我们根据数组和数组项类型指定schema的表单组件,增加数组操作控件,添加每一个表单的UI描述代码,最后通过formily渲染出上面的表单;
基于这个思路,我们约定了动态数据,其他系统的插件iframe接入的规范,避免了schema文件编写维护困难的问题;

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

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

排期策略能力

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

  1. 提供时间穿梭能力,可以设定未来时刻来预览不同时间点页面的投放效果,达到验证页面的目的;
  2. 排期接入圈人平台,配置不同人群下发不同排期,配合部署页面语法环境验证的功能,预览人群配置效果;

总结

目前闲鱼APP内多个页面已经迁移/接入了魔鱼研发体系,相对于使用集团内搭投编辑器方案,定制设计的页面交互方案去除了复杂冗余的不相干功能提升运营理解操作成本,而通过闲鱼schema规范的设计使更多内容运营可自主修改从而减少了研发介入的发布耗时,另外通过支持动态数据源的配置能力,配合网关减少了页面首屏耗时;
搭建技术本质上也是一种低代码的技术方案,使用搭投编辑器,闲鱼前端团队可以沉淀团队日常开发中的物料组件变为通用模块来提升代码复用率从而提升研发效率;支持更多商品内容的动态配置来提升运营页面的效率。未来搭投编辑器一方面会继续支持前端研发整体方案的迭代升级,另一方面会和平台使用者积极沟通带来更好的交互体验!


相关文章
|
XML Java 数据库连接
JavaWeb项目-超市订单管理系统【Day01】
JavaWeb项目-超市订单管理系统【Day01】
|
18天前
|
存储 人工智能 自然语言处理
从“代码补全”到“知识对齐”:Qoder Repo Wiki 迎来重磅升级
随着大模型发展,AI Coding正从辅助编码迈向自主编程。Qoder通过显性化知识、增强上下文、Spec驱动与智能体协作,提升研发效率与透明度,应对软件复杂性挑战,推动人与AI高效协同。
从“代码补全”到“知识对齐”:Qoder Repo Wiki 迎来重磅升级
|
存储 Kubernetes 调度
k8s教程(pod篇)-DaemonSet(每个node上只调度一个pod)
k8s教程(pod篇)-DaemonSet(每个node上只调度一个pod)
402 0
|
Java 中间件 Serverless
CSE:阿里在线应用如何演进成Serverless架构
**Cloud Service Engine**,简称**CSE**,是中间件部门研发的面向通用Serverless计算的中间件产品,目标是具备AWS Lambda的各种优势,同时可以解决AWS Lambda的关键技术缺陷。 AWS Lambda如果用于核心业务,可能会有以下缺陷:(仅代表个人观点) * 要求用户以Function为单位开发,全新的开发框架,云厂商强绑定。社区主
3265 0
|
机器学习/深度学习 SQL 人工智能
Web LLM 实验:间接注入
Web LLM 实验:间接注入
|
机器学习/深度学习 人工智能 达摩院
MindOpt工具是如何做到配套使用的?请看此篇
MindOpt是阿里巴巴达摩院决策职能实验室研发的专注于优化领域,提供智能优化解决方案的品牌。主要的目标是帮助客户通过先进的优化算法和技术,实现业务流程的最佳化,提升效率,降低成本,并最大化业务价值。
|
移动开发 监控 前端开发
2023 年大淘宝 Web 端技术概览
2022 年,大淘宝前端团队进行了调整:重新组织生产关系,按业务线拆分整合进对应的业务技术团队,同时保留了大前端虚线组织,确保研发基建的一致性、技术的持续投入以及推进人员的成长。 整个变化涉及超过三百人的前端团队,经过了半年多的运转,整个团队在技术上也进行了对应的聚焦和收敛。 新的组织协作形态下,大淘宝 Web 领域的工程师们正在做哪些技术工作、有什么技术产品,特在 2023 年开年之际向行业前端同学进行分享。
4222 1
2023 年大淘宝 Web 端技术概览
|
运维 监控 安全
系统日志规范及最佳实践(1)
系统日志规范及最佳实践
3213 0
|
SQL Dubbo 安全
关于“错误码”设计方面的思考|系统异常,我****
这篇文章给大家分享一下关于“错误码”设计方面的思考。其实提到“错误码”我的第一反映是:混乱。 特别是在微服务架构之下,各个团队都有一套自己的“错误码”,甚至在一个团队里面不同的微服务都有自己的一套码值,这些“一套一套”的错误码,各成一派,互不通气。 但是一旦微服务上下游交互涉及到错误码转换的时候,总有一方就开始痛了,因为总有一方要承担兼容转换、令人“恶心”的逻辑。 我也见过试图在一片混乱中“力挽狂澜”的案例,比如由基础架构组提供统一的错误码管理平台,如果某个系统需要错误码就去该管理平台上去申请。 这个想法固然是好的,但是我认为存在的一个巨大的问题就是:历史码值的治理。
|
存储 缓存 运维
Redis 的开发规范和常见问题 | 学习笔记
快速学习 Redis 的开发规范和常见问题
Redis 的开发规范和常见问题 | 学习笔记