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 的一部分用户。
为什么需要 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>
</>
);
};
- 渲染效果
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',
},
...
];
- 渲染效果
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);
- 渲染效果
核心升级
FormRender
更好的性能
1.0 版本中单个表单项数据发生改变会导致表单全量更新,这在复杂的大表单场景会有严重的性能问题,2.0 我们对性能这块做了专项治理,通过对 form-render 底层重构,接入 Antd Form 来实现表单的数据收集、管控。性能方面有了明显的提升。
全新的设计
2.0 我们对内置组件 UI 做了全新的升级,整体视觉更显大气
增加 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 表单项内部布局
增加了查询表单
国际化 & Antd 5
-
国际化支持:内置中英文语言包,英文版 locale: 'en-US'
-
Antd V5: 兼容 antd V5 版本,无需额外配置,根据宿主项目自动适配
其它特性更新
-
List 嵌套组件
- 支持配置是否默认展示一条数据
- 支持配置新增、删除、复制等自定义方法
-
Object 嵌套组件
- 新增四种嵌套组件,包括折叠、卡片等等
- 支持嵌套组件自定义
TableRender
2.0 对 TableRender 进行了重构,主要解决的是组件易用性的问题,抛弃了原来的多个实例组合拼接的方式,改用单实例属性聚合的方式。出于这么考虑的原因是:
- 导出多个实例对象,本身在使用上就有一定的使用成本
- API 属性在设计上存在问题,不应该和 Search 捆绑,这导致在没有查询条件的场景比较尴尬
简化了使用方式
在 table-render 的使用方式上进行了调整,通过属性聚合、减少实例导出从而降低使用新增
增加了多种数据展示模版
后续规划
-
form-render-moblie(预计 4 月底发布)
- 接入 antd-mobile 输入类型控件,作为内置控件
- 支持 card、collapse、list 嵌套模式
-
表单设计器 fr-generator 全面升级
- 更全面的表单配置内容
- 更加灵活的插件机制,提升配置定制化能力
- 支持自定义组件灵活接入
-
协议方面:后续会在协议方面深度耕耘,提升协议配置能力和易用性,例如:
- 提升在 List、Object 嵌套组件的定制化的易用性
- 支持 Bind 属性在 list 场景使用
写在最后
虽然我们的XRender 2.0已经面世,但它还有很多待完善的地方,我们会根据用户的反馈,不断优化产品体验,修复和完善产品功能。如果你在使用过程中发现了任何问题,欢迎向我们提需求和缺陷,我们会竭尽全力满足你的要求!
此外,我们也会继续努力在协议配置方面进行创新和提升,如果你有任何相关的需求或建议,也欢迎与我们分享。我们将认真评估每一个提出的需求,并将优秀的方案纳入我们的迭代计划中。
最后感谢大家的支持与信任,是你们的反馈与建议,让我们的产品不断进步。我们会继续努力,为大家提供更好的服务和体验。