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工具函数代码
Feb 17 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
Vue退出登录时清空缓存的实现
Nov 12 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
Python实现CET查分的方法
2015/03/10 Python
Django中使用locals()函数的技巧
2015/07/16 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
详解Python3注释知识点
2019/02/19 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
如何使用PHP session
2015/04/21 面试题
办公室主任主任岗位责任制
2014/02/11 职场文书
村级换届选举方案
2014/05/10 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript