XRender 2.0 正式发布啦!🎉

avatar
公众号 @fliggyfe

官方文档:xrender.fun/form-render

github:github.com/alibaba/x-r…

本文作者飞猪前端 @lhbxs,分享 XRender 2.0 带来的惊喜和变化

前言

XRender 1.0 已经发布两年多了,随着用户体量的增大,使用场景也变得越来越复杂,逐渐暴露出了一些问题。例如,在处理复杂表单时,有时会感觉有点“力不从心”,性能上存在短板;在表单校验时,偶尔会出现一些“千奇百怪”的问题。

因此在 2022 年 11 月,我们决定启动 XRender 2.0 的研发。带着对未来的期待,为大家带来更好、更快、更强的渲染体验!XRender 2.0 终于在今天与大家见面了,接下来让我们看看它将会带给我们哪些惊喜和改变吧!

介绍

为了能够让那些初次接触 XRender 的”萌新“们快速了解这款开源产品,下面我们简单介绍一下 XRender。如果你已经是 XRender 的忠实铁粉,可以略过本章节。

什么是 XRender

XRender 是一套基于 React.js 框架的,开箱即用的中后台「表单 / 表格 / 图表」解决方案,目前已经在阿里飞猪内部服务了 4 年,未来也将持续服务 XRender 的用户。

目前 XRender 已经赢得了许多支持者,我们非常感谢每一位用户的信任和支持!下面这张图展示的是 XRender 的一部分用户。

截屏2023-03-19 00.35.53.png

为什么需要 XRender

对于中后台业务来说,表单表格是最常用的组件,几乎可以覆盖 90% 的业务场景。但是大部分业务的表单和表格场景都存在着很高的重复度,这就意味着开发人员需要花费大量的时间去处理这些重复的工作,这是非常低效的。

因此,像 XRender 这样的工具就显得非常必要了。使用 XRender,开发人员可以快速构建出高效、美观、易用的表单和表格,从而将更多的时间和精力放在业务逻辑的处理上,大大提高开发效率。

XRender 重要成员

1. FormRender

中后台表单解决方案,通过 JsonSchema 协议动态渲染表单

  •   特性
    •   协议驱动:通过 JsonSchema 协议动态渲染表单

    •   高性能&设计新颖:全新的表单设计和良好的表单性能

    •   内置组件丰富:包含基础组件、嵌套卡片类组件、动态增减 List 组件

  •   代码片段
const schema = {
  type: 'object',
  properties: {
    input1: {
      title: '简单输入框',
      type: 'string',
      required: true
    },
    select1: {
      title: '单选',
      type: 'string',
      props: {
        options: [
          { label: '早', value: 'a' },
          { label: '中', value: 'b' },
          { label: '晚', value: 'c' }
        ]
      }
    }
  }
};
export default () => {
  const form = useForm();
  const onFinish = (formData) => {
    console.log('formData:', formData);
  };
  return (
    <>
     <FormRender form={form}  schema={schema} onFinish={onFinish} />
     <Button type="primary" onClick={form.submit}>提交</Button>
    </>
  );
};
  •   渲染效果

截屏2023-03-19 01.09.49.png

2. TableRender

中后台列表解决方案,常用于搜索列表快速生成

  •   特性

    •   TableRender 可以理解为 FormRender + Table 的组合模式,通过 schema 配置查询条件,通过 columns 配置表格列。
    •   TableRender 内置了数据请求逻辑,数据展示模版,Tab 页数据分类等功能,比直接使用 Table 更加高效,更加简单。
  •   代码片段

const schema = {
  type: 'object',
  labelWidth: 80,
  properties: {
    state: {
      title: '酒店状态',
      type: 'string',
      enum: ['open', 'closed'],
      enumNames: ['营业中', '已打烊'],
      widget: 'select'
    },
    labels: {
      title: '酒店星级',
      type: 'string'
    },
    created_at: {
      title: '成立时间',
      type: 'string',
      format: 'date'
    },
    ....
  }
};
const columns = [
  {
    title: '酒店名称',
    dataIndex: 'title',
    valueType: 'text',
    width: '20%'
  },
  {
    title: '酒店地址',
    dataIndex: 'address',
    ellipsis: true,
    copyable: true,
    valueType: 'text',
    width: '25%'
  },
  {
    title: '酒店状态',
    tooltip: { title: '气泡提示'},
    enum: {
      open: '营业中',
      closed: '已打烊',
    },
    dataIndex: 'state',
  },
  ...
];
  •   渲染效果 截屏2023-03-19 11.45.41.png

3. ChartRender

中后台图表解决方案,常用于图表展示页快速生成,可用少量代码快速生成一张图表

  •   特性

    •   基于 @ant-design/charts:常用于图表展示页快速生成。可用少量代码快速生成一张图表
    •   真正的开箱即用:只需要关心你的数据,传入 meta、data 即可出图
    •   开发体验舒适:使用 TypeScript 开发,提供完整的类型定义文件
    •   无缝习惯使用:图表用 Ant Design Charts 来提供,自定义的样式支持参数透传。
  •   代码片段

const schema = {
  type: 'object',
  properties: {
    os: {
      type: 'string',
      enum: ['Windows', 'MacOS', 'Android', 'iOS'],
      enumNames: ['Windows', 'MacOS', 'Android', 'iOS'],
      props: { placeholder: '操作系统' },
      required: true
    },
    location: {
      type: 'string',
      enum: ['杭州', '宁波', '嘉兴', '金华'],
      enumNames: ['杭州', '宁波', '嘉兴', '金华'],
      props: { placeholder: 'IP 属地' }
    }
  }
};

const api = ({ filters }) => {
  console.log('filters >>> ', filters);
  return new Promise((resolve) => setTimeout(() => {
    const meta = [
      { id: 'ds', name: '日期', isDim: true },
      { id: 'pv', name: '访问量' },
      { id: 'uv', name: '访客数' }
    ];
    const data = [...new Array(24)].map((_, index) => ({
      ds: `2022-01-${String(index + 1).padStart(2, 0)}`,
      pv: Math.floor(Math.random() * 100) + 100,
      uv: Math.floor(Math.random() * 100),
    }));
    resolve({ meta, data });
  }, 1000));
};
const App = () => {
  return (
    <Card title="访问趋势" extra={<Search searchOnChange api={api} schema={schema}/>}>
      <Column />
    </Card>
  );
};

export default withChart(App);
  •   渲染效果 截屏2023-03-19 01.23.31.png

核心升级

FormRender

更好的性能

1.0 版本中单个表单项数据发生改变会导致表单全量更新,这在复杂的大表单场景会有严重的性能问题,2.0 我们对性能这块做了专项治理,通过对 form-render 底层重构,接入 Antd Form 来实现表单的数据收集、管控。性能方面有了明显的提升。

全新的设计

2.0 我们对内置组件 UI 做了全新的升级,整体视觉更显大气

截屏2023-03-19 01.25.44.png

截屏2023-03-19 01.27.11.png

截屏2023-03-19 01.28.04.png

增加 Rules 校验配置

2.0 表单项校验,我们对齐了 Antd Form Rules 配置规则,同时对自定义校验也做了优化

const schema = {
  type: 'object',
  displayType: 'row',
  properties: {
    input1: {
      title: '正则表达式',
      type: 'string',
      required: true,
      rules: [
        { pattern: '^[\u4E00-\u9FA5]+$', message: '请输入中文!' }
      ]
    },
    input2: {
      title: '自定义校验',
      type: 'string',
      rules: [
        { 
          validator: (_, value) => {
            const pattern = '^[\u4E00-\u9FA5]+$';
            const result = new RegExp(pattern).test(value);
            return result;
            // 或者是返回一个对象,用于动态设置 message 内容
            // return {
            //   status: result,
            //   message: '请输入中文!',
            // }
          }, 
          message: '请输入中文!' 
        }
      ]
    }
  }
};

调整了表单布局方式

  •   displayType 标签排列方式

  •   column 表单一行能展示的表单项个数

  •   labelWidth 标签固定宽度

  •   cellSpan 表单项跨列

  •   maxWidth 输入控件最长宽度

  •   labelCol、FieldCol 表单项内部布局

增加了查询表单

截屏2023-03-19 01.33.11.png

国际化 & Antd 5

  •   国际化支持:内置中英文语言包,英文版 locale: 'en-US'

  •   Antd V5: 兼容 antd V5 版本,无需额外配置,根据宿主项目自动适配

其它特性更新

  •   List 嵌套组件

    •   支持配置是否默认展示一条数据
    •   支持配置新增、删除、复制等自定义方法
  •   Object 嵌套组件

    •   新增四种嵌套组件,包括折叠、卡片等等
    •   支持嵌套组件自定义

TableRender

2.0 对 TableRender 进行了重构,主要解决的是组件易用性的问题,抛弃了原来的多个实例组合拼接的方式,改用单实例属性聚合的方式。出于这么考虑的原因是:

  •   导出多个实例对象,本身在使用上就有一定的使用成本
  •   API 属性在设计上存在问题,不应该和 Search 捆绑,这导致在没有查询条件的场景比较尴尬

简化了使用方式

在 table-render 的使用方式上进行了调整,通过属性聚合、减少实例导出从而降低使用新增

截屏2023-03-19 01.36.29.png

增加了多种数据展示模版

截屏2023-03-19 01.35.30.png

后续规划

  •  form-render-moblie(预计 4 月底发布)

    • 接入 antd-mobile 输入类型控件,作为内置控件
    • 支持 card、collapse、list 嵌套模式
  •   表单设计器 fr-generator 全面升级

    •   更全面的表单配置内容
    •   更加灵活的插件机制,提升配置定制化能力
    •   支持自定义组件灵活接入
  •   协议方面:后续会在协议方面深度耕耘,提升协议配置能力和易用性,例如:

    •   提升在 List、Object 嵌套组件的定制化的易用性
    •   支持 Bind 属性在 list 场景使用

写在最后

虽然我们的XRender 2.0已经面世,但它还有很多待完善的地方,我们会根据用户的反馈,不断优化产品体验,修复和完善产品功能。如果你在使用过程中发现了任何问题,欢迎向我们提需求缺陷,我们会竭尽全力满足你的要求!

此外,我们也会继续努力在协议配置方面进行创新和提升,如果你有任何相关的需求或建议,也欢迎与我们分享。我们将认真评估每一个提出的需求,并将优秀的方案纳入我们的迭代计划中。

最后感谢大家的支持与信任,是你们的反馈与建议,让我们的产品不断进步。我们会继续努力,为大家提供更好的服务和体验。