Sula - 可能是西湖区最好用的antd配置框架
2020/5/29 11:27:29
本文主要是介绍Sula - 可能是西湖区最好用的antd配置框架,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Sula是什么?
Sula是在蚂蚁金服多个项目沉淀出来的一套【产品级】配置框架,通过插件化的方式实现了配置的高扩展性与高灵活性,并且sula通过行为插件的引入,建立了渲染插件与用户行为的连接,实现了场景式的语义化配置。
【产品级】的概念是相较于「局部」产生的,例如只针对表单、表格的局部配置框架。
Sula的特点
-
配置模板组件
经过对大量生产项目的业务抽象,sula沉淀了4大配置模板组件,涵盖了CRUD绝大部分场景,由于配置模板组件继承了底层配置核心的能力,因此不用担心扩展能力的降低。
-
语义化场景配置
通过行为插件的引入,sula实现了 渲染插件 -> 响应用户事件 -> 触发行为链 的场景化语义配置。下面例子即表格行记录删除的语义化配置示例 超链接 -> 响应点击事件 -> (发起删除请求 -> 刷新表格)
Sula Form
基于antd4.0用心打造,内置丰富的表单布局 表单状态判断等逻辑,注入渲染插件 容器插件 关联插件 请求插件,实现表单开发配置化。
![image-20200528132507456](/upload/202005/29/202005291127228545.png)
表单新建/编辑/查看模式切换:
![表单不同模式-2](/upload/202005/29/202005291127231660.png)
响应式布局:
![响应式布局-2](/upload/202005/29/202005291127240117.png)
表单关联:
![image-20200528143806559](/upload/202005/29/202005291127246797.png)
Sula Table
将antd4.0 Table进行受控管理,分页 loading 行选择统一由sula内部控制。表格列 标题部分,接入渲染插件和行为插件,实现配置化。
![image-20200528143806559](/upload/202005/29/202005291127248311.png)
Sula模板
- 查询表格
![sula查询表格](/upload/202005/29/202005291127260089.png)
- 创建表单
![单列布局](/upload/202005/29/202005291127261427.png)
- 分步表单
![分步表单](/upload/202005/29/202005291127265724.png)
![image-20200528142256626](/upload/202005/29/202005291127267032.png)
- 分步表格
![image-20200528140607509](/upload/202005/29/202005291127269152.png)
行为插件
弹框表单:
![弹框表单](/upload/202005/29/202005291127277160.png)
抽屉表单:
![抽屉表单](/upload/202005/29/202005291127280148.png)
刷新和路由跳转:
![弹框表单](/upload/202005/29/202005291127283761.png)
Sula实践
通过antd组件封装,开发者基本都可以完成页面设计。那么,sula的优势在哪里呢?
- 开发时间短,降低重复劳动,同样的开发人员,使用antd开发的crud页面,使用sula只需要1/3时间。
- 交互优化,sula在loading动画,气泡和二次确认,防止重复操作等场景下进行了默认好用的优化。
- 后端持久化,所有配置都可以转成json,实现后端持久化存储,服务端驱动UI生成友好。
超出约定的需求怎么解决?
sula的核心特点是插件化,新功能可以通过自定义插件的方式实现。
sula-cooker
sula-cooker是sula提供的在线配置化工具,提供多套业务模板代码,开发提速神奇,避免无效加班,也可以帮助产品快速设计页面原型。
在线配置化代码,实时预览效果:
![image-20200528141641563](/upload/202005/29/202005291127285695.png)
鼠标划入表单 表格标题,按钮等位置,可以进行局部代码设置。
![image-20200528141658857](/upload/202005/29/202005291127287209.png)
局部代码设置中,提供可供选择的插件片段。
![image-20200528144201997](/upload/202005/29/202005291127288518.png)
还有各种表单 列表样式,丰富的插件,都可以在cooker中体验。
体验sula
![dingding](/upload/202005/29/202005291127289982.png)
- 源码地址: github ,期待star
- demo和文档: sula
- sula配置化体验工具: sula-cooker
欢迎试用sulajs,有不符合业务场景的地方,期待issue和pr。
这篇关于Sula - 可能是西湖区最好用的antd配置框架的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现