JS前端可扩展的低代码UI框架Sunmao使用详解


Posted in Javascript onJuly 23, 2022

引言

尽管现在越来越多的人开始对低代码开发感兴趣,但已有低代码方案的一些局限性仍然让大家有所保留。其中最常见的担忧莫过于低代码缺乏灵活性以及容易被厂商锁定。

显然这样的担忧是合理的,因为大家都不希望在实现特定功能的时候才发现低代码平台无法支持,也不希望从某个厂商的低代码平台迁出时发现应用需要彻底的重写。

一些已有产品机智地将低代码的使用场景限定在了特定领域中,例如内部工具或者是官网,因为在这些场景中用户更关心开发效率而不是灵活性与定制能力。但当我们希望使用低代码在更多场景中提升效率时,这类产品就不能满足需求了。

因此,我们开始开发 Sunmao 这个项目,在开源开发的基础之上,我们专注于这个低代码 UI 框架的拓展性。

设计原则

Sunmao 的命名来源于中文榫卯,它是一种从古至今一直被使用的木结构技术,以精巧、稳固著称。我们非常喜欢这个名字,因为榫卯结构与我们将各类构建单元组合成一个稳固的应用的方式十分相似。

在开发的过程中,我们始终遵循以下设计原则,从而确保我们的抽象方式正确且一致。

1. 明确不同角色的职责

在开发 Sunmao 的过程中,我们首先将使用者划分为了组件开发者与应用构建者两个角色,角色的划分是我们后续设计中最重要的概念。

组件开发者应该更加关注代码质量、性能以及用户体验等部分,并以此为标准创造出可复用的组件。当组件开发者以他们趁手的方式开发了一个新的组件,他们就可以将该组件封装为一个 Sunmao 组件并注册到组件库中。

应用构建者则选用已有的组件,并实现应用相关的业务逻辑。结合组件与 Sunmao 的平台特性,应用构建者可以更高效地完成这一工作。

之所以将角色进行划分,是因为每时每刻都有应用被开发,但组件迭代的频率则低得多。所以在 Sunmao 的帮助下,用户可以将组件开发的任务交给少量高级前端工程师完成,而将应用搭建的工作交由初级前端工程师、后端工程师、甚至是无代码开发经验的人完成。

2. 发挥代码的威力,而不是限制

如之前所说,Sunmao 并不将用户局限于只能使用按钮、输入框等基础组件开发应用,而是可以由组件开发者注册各类复杂、适用于特定领域的组件,以此覆盖应用需求以及延续已有的视觉设计体系。

在开发 Sunmao 的过程中,我们也投入了大量的精力来保证我们的实现不会给用户的应用带来限制。

举个例子来说,许多低代码工具的可视化编辑器都提供了悬浮在组件上时进行高亮的效果。相当一部分编辑器在实现这个功能时都是通过在每个组件之外包裹一个 <div> 元素,并对该元素进行事件的监听与高亮样式的修改。但这样的实现方式有诸多弊端,例如增加了 DOM 节点数量、使组件无法被配置 inline 样式以及增加了隐式的嵌套关系,这些对于 Sunmao 来说都是不可接受的。

尽管我们花费了更多时间才找到一个避免以上所有缺陷的实现方式,但我们相信这样的付出是值得的。因为只有这样,我们才能做到发挥代码的威力,赢得开发者的认可。

3. 各个层面的可扩展性

Sunmao 包含三个层级,分别是核心规范、运行时以及编辑器。

组件与应用的 schema 都在核心规范中进行定义。除去常规的字段之外,用户还可以通过添加注解(annotations)的方式注入额外信息,并在运行时或编辑器中使用。

我们多次提到的组件本身也是可扩展的,组件开发者为组件可以定义各类参数以及与其他组件交互的行为。在下文中我们还会介绍另一种在组件间共享扩展能力的方式:trait。

在可视化的编辑器中,用户也可以配置每个组件参数在编辑器中的展示方式与输入方式。

4. 专注而不是发散

我们没有选择开发一个全栈的低代码解决方案,而是聚焦于 UI 部分,并且目前仅限 Web UI。

因为我们认为现如今的后端技术日新月异,一个 UI 低代码方案可以更灵活的与各类后端服务对接,这样才能够为使用者带来最大的灵活性。

Sunmao 的工作原理

Web UI 开发已经相当成熟,所以 Sunmao 只是在此基础之上增加少量低代码场景中必备的能力,即:

  • 响应式
  • 事件与方法
  • 插槽与样式插槽
  • 类型
  • trait
  • 可视化编辑器

响应最新的状态

响应式指的是当应用状态发生变化时,所有依赖该状态的 UI 都自动重写渲染。Sunmao 实现了一个高性能的响应式状态中心,所有组件都可以将自己的状态同步至其中以及从中访问其他组件的状态。

例如,当我们想让 demo 按钮渲染 demo 输入框中的值,只需要填写 {{ input.value.length }}

JS前端可扩展的低代码UI框架Sunmao使用详解

按钮就能够响应输入框的变化实时渲染!

JS前端可扩展的低代码UI框架Sunmao使用详解

组件间交互

现代 UI 框架往往强调状态驱动与声明式的概念,但在低代码场景中过份追求这两点可能适得其反。

例如当你希望实现点击一个主题按钮并切换至暗色主题的功能,最符合直觉的方式就是按钮提供一个 onClick 事件并触发主题组件的 changeTheme 方法。

在 Sunmao 中,你可以在组件的规范中声明它会对外发送的事件以及可以供外部调用的一组命令式方法。在此基础上,任意组件都可以通过事件与方法和其他组件进行交互。

以下是一个监听事件并执行方法的示例:

JS前端可扩展的低代码UI框架Sunmao使用详解

布局与样式

当我们开发应用时,最终通常都会将组件组合成一个嵌套结构,例如浏览器中的 DOM 树。

在 Sunmao 的应用 schema 中,我们采用的是一个扁平的数组结构记录所有的组件信息,这样使得修改与存储的时候可以更加高效。也因此,我们引入了插槽的概念来表示嵌套结构。

通过以下方式可以实现并声明一个组件有哪些插槽:

JS前端可扩展的低代码UI框架Sunmao使用详解

将一个组件放入另一个组件的插槽中:

JS前端可扩展的低代码UI框架Sunmao使用详解

另一个有极大想象空间的功能是自定义组件的样式。如果组件开发者能够将定义组件样式的能力对外暴露,组件的可复用性就将大大提升。

类似地,我们引入了样式插槽的概念实现自定义样式的功能。

通过以下方式可以实现并声明一个组件有哪些样式插槽:

JS前端可扩展的低代码UI框架Sunmao使用详解

在样式插槽中自定义样式:

JS前端可扩展的低代码UI框架Sunmao使用详解

类型安全

在低代码场景中,类型安全可以极大地提升开发体验与应用搭建速度。所以在 Sunmao 中我们重度使用 typescript 与 JSON schema 来实现极佳的类型系统。

如果组件开发者使用 typescript 进行开发,Sunmao 能够从组件的 JSON schema 定义中推断 typescript 的类型,从而帮助组件开发者编写类型安全的代码。

我们的类型系统也会在搭建应用的过程中提供自动补全与校验等功能。

JS前端可扩展的低代码UI框架Sunmao使用详解

在组件间复用代码

许多组件都需要获取数据、事件节流等通用能力,我们在上文中多次提到的 trait 就是为这一需求而设计的。

试想一下,如果每个组件都自行实现 dataUrl(获取数据的 URL)hidden(是否可见)handlers(事件回调) 等属性,显然是十分冗余的。对于这类需求,trait 系统提供了很好的抽象,帮助开发者将通用的能力以 trait 形式实现并复用于多个组件,从而保证组件实现的简洁。

可扩展的可视化编辑器

Sunmao 的可视化编辑器读取所有组件的规范并基于其定义的 JSON schema 自动生成表单。

如果一部分表单需要定制,组件开发者可以实现自定义的编辑器 widget。关于扩展可视化编辑器的设计可以进一步阅读这一设计文档

保持开放

从第一天起,Sunmao 就以开源的方式进行开发。但当我们说到“开放”时,我们并不仅仅局限于以 Apache-2.0 协议开放所有的源代码。

尽管 Sunmao 是从 SmartX 内部发起的项目,我们在开发过程中还是选择将所有的提案、讨论与设计决策放在公开的 Github 仓库中进行,而不是其他的内部频道。因为我们相信“保持开放”是 Sunmao 发展的基石,并且我们也视开发者使用 Sunmao 构建自己的低代码方案为最大的荣耀。

以上就是JS前端可扩展的低代码UI框架Sunmao使用详解的详细内容,更多关于JS前端UI框架Sunmao的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
Javascript实现的鼠标经过时播放声音
May 18 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
Vue.js对象转换实例
Jun 07 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 #Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 #Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 #Javascript
vue递归实现树形组件
Jul 15 #Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
javascript进阶篇深拷贝实现的四种方式
Jul 07 #Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 #Javascript
You might like
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python直接访问私有属性的简单方法
2016/07/25 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python实现教务管理系统
2018/03/12 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python3 mmh3安装及使用方法
2019/10/09 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python 使用shutil复制图片的例子
2019/12/13 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
行政人员工作职责
2013/12/05 职场文书
法院授权委托书范文
2014/08/02 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript