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

用户头像
开远
关注
发布于: 2020 年 06 月 03 日
Sula - 可能是西湖区最好用的antd配置框架

sula是什么?



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



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



sula的特点



  1. 配置模板组件

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



  1. 语义化场景配置

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



sula Form



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





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





响应式布局:



表单关联:





sula Table



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



sula模板



  1. 查询表格



  1. 创建表单



  1. 分步表单





  1. 分步表格



行为插件

  1. 弹框表单

  1. 抽屉表单

  1. 刷新和路由跳转



sula实践



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



  1. 开发时间短,降低重复劳动,同样的开发人员,使用antd开发的crud页面,使用sula只需要1/3时间。

  2. 交互优化,sula在loading动画,气泡和二次确认,防止重复操作等场景下进行了默认好用的优化。

  3. 后端持久化,所有配置都可以转成json,实现后端持久化存储,服务端驱动UI生成友好。



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



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



sula-cooker



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



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





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



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



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

视频教程



  1. 表单快速配置



Sula 五分钟 - 表单快速配置(1)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com



2. 查询表格快速配置



Sula 五分钟 - 查询表格快速配置(2)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com



3. sula-cooker使用

Sula 五分钟 - Cooker 的使用(3)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com



体验sula





  1. 源码地址: github ,期待star

  2. demo和文档: sula

  3. sula配置化体验工具: sula-cooker



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

用户头像

开远

关注

前端 2020.06.02 加入

还未添加个人简介

评论

发布
暂无评论
Sula - 可能是西湖区最好用的antd配置框架