Sula - 可能是西湖区最好用的antd配置框架

2,934 阅读3分钟

Sula是什么?

Sula是在蚂蚁金服多个项目沉淀出来的一套【产品级】配置框架,通过插件化的方式实现了配置的高扩展性与高灵活性,并且sula通过行为插件的引入,建立了渲染插件与用户行为的连接,实现了场景式的语义化配置。

【产品级】的概念是相较于「局部」产生的,例如只针对表单、表格的局部配置框架。

Sula的特点

  1. 配置模板组件

    经过对大量生产项目的业务抽象,sula沉淀了4大配置模板组件,涵盖了CRUD绝大部分场景,由于配置模板组件继承了底层配置核心的能力,因此不用担心扩展能力的降低。

    image.png

  2. 语义化场景配置

    通过行为插件的引入,sula实现了 渲染插件 -> 响应用户事件 -> 触发行为链 的场景化语义配置。下面例子即表格行记录删除的语义化配置示例 超链接 -> 响应点击事件 -> (发起删除请求 -> 刷新表格)

    image.png

Sula Form

基于antd4.0用心打造,内置丰富的表单布局 表单状态判断等逻辑,注入渲染插件 容器插件 关联插件 请求插件,实现表单开发配置化。

image-20200528132507456

表单新建/编辑/查看模式切换:

表单不同模式-2

响应式布局:

响应式布局-2

表单关联:

image-20200528143806559

Sula Table

antd4.0 Table进行受控管理,分页 loading 行选择统一由sula内部控制。表格列 标题部分,接入渲染插件行为插件,实现配置化。

image-20200528143806559

Sula模板

  1. 查询表格
sula查询表格
  1. 创建表单
单列布局
  1. 分步表单
分步表单
image-20200528142256626
  1. 分步表格
image-20200528140607509

行为插件

弹框表单:

弹框表单

抽屉表单:

抽屉表单

刷新和路由跳转:

弹框表单

Sula实践

通过antd组件封装,开发者基本都可以完成页面设计。那么,sula的优势在哪里呢?

  1. 开发时间短,降低重复劳动,同样的开发人员,使用antd开发的crud页面,使用sula只需要1/3时间。
  2. 交互优化,sula在loading动画,气泡和二次确认,防止重复操作等场景下进行了默认好用的优化。
  3. 后端持久化,所有配置都可以转成json,实现后端持久化存储,服务端驱动UI生成友好。

超出约定的需求怎么解决?

sula的核心特点是插件化,新功能可以通过自定义插件的方式实现。

sula-cooker

sula-cookersula提供的在线配置化工具,提供多套业务模板代码,开发提速神奇,避免无效加班,也可以帮助产品快速设计页面原型。

在线配置化代码,实时预览效果:

image-20200528141641563

鼠标划入表单 表格标题,按钮等位置,可以进行局部代码设置。

image-20200528141658857

局部代码设置中,提供可供选择的插件片段。

image-20200528144201997

还有各种表单 列表样式,丰富的插件,都可以在cooker中体验。

体验sula

dingding
  1. 源码地址: github ,期待star
  2. demo和文档: sula
  3. sula配置化体验工具: sula-cooker

欢迎试用sulajs,有不符合业务场景的地方,期待issue和pr。