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

引言

当前，低代码开发模式受到广泛关注，但现有方案在灵活性和厂商锁定方面的局限性仍让用户心存顾虑。

这种担忧合情合理，开发者不愿在实现特定功能时发现平台不支持，也不希望在迁移平台时面临应用彻底重写的困境。

部分现有产品将低代码场景限制在内部工具或官网等对灵活性要求较低、更看重开发效率的领域。然而，当低代码需要应用于更多复杂场景时，这类产品便难以满足需求。

为此，我们启动了 Sunmao 项目，在开源基础上，专注于打造具有高拓展性的低代码 UI 框架。

设计原则

Sunmao 之名取自中文“榫卯”，这是一种历史悠久且以精巧稳固著称的木结构技术。我们喜爱此名，因为它完美契合了我们将各类构建单元组合成稳固应用的核心理念。

在开发过程中，我们严格遵循以下设计原则，以确保抽象方式的正确性与一致性。

1. 明确不同角色的职责

Sunmao 将使用者划分为组件开发者与应用构建者两大角色，这一划分是后续设计的核心基础。

组件开发者需聚焦于代码质量、性能及用户体验，以此标准创建可复用组件。当他们以熟悉的方式开发出新组件后，可将其封装为 Sunmao 组件并注册至组件库。

应用构建者则利用已有组件，专注于实现业务逻辑。借助组件与 Sunmao 平台特性，构建者能更高效地完成任务。

角色划分的必要性在于：应用开发频繁，而组件迭代相对缓慢。通过 Sunmao，企业可将组件开发交由少数高级前端工程师负责，而将应用搭建工作分配给初级前端、后端工程师甚至无代码经验的人员。

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

Sunmao 不限制用户仅使用按钮、输入框等基础组件，而是允许组件开发者注册各类复杂、特定领域的组件，以覆盖应用需求并延续视觉设计体系。

开发过程中，我们投入大量精力确保实现方式不对用户应用造成限制。

许多低代码工具的可视化编辑器在组件悬浮时提供高亮效果，通常做法是在每个组件外包裹一个 <div> 元素，并监听该元素的事件以修改高亮样式。但这种实现增加了 DOM 节点数量，导致组件无法配置 inline 样式，并引入隐式嵌套关系，这些均为 Sunmao 所不可接受。

尽管找到避免上述缺陷的实现方式耗费了更多时间，但我们认为此举值得。唯有如此，才能充分发挥代码威力，赢得开发者认可。

3. 各个层面的可扩展性

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

组件与应用的 schema 均在核心规范中定义。除常规字段外，用户还可通过添加注解（annotations）注入额外信息，供运行时或编辑器使用。

组件本身也是可扩展的，开发者可为其定义各类参数及与其他组件交互的行为。下文还将介绍另一种组件间共享扩展能力的方式：trait。

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

4. 专注而不是发散

Sunmao 未选择开发全栈低代码解决方案，而是聚焦于 UI 部分，目前仅限 Web UI。

鉴于后端技术日新月异，UI 低代码方案若能灵活对接各类后端服务，将为使用者带来最大灵活性。

Sunmao 的工作原理

Web UI 开发已相当成熟，Sunmao 仅在此基础上增加低代码场景必备的能力，即：

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

响应最新的状态

响应式指当应用状态变化时，所有依赖该状态的 UI 自动重新渲染。Sunmao 实现了高性能的响应式状态中心，所有组件均可将状态同步至其中或从中访问其他组件状态。

例如，若想让 demo 按钮渲染 demo 输入框中的值，只需填写 {{ input.value.length }}：

按钮即可响应输入框变化实时渲染！

组件间交互

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

例如，实现点击主题按钮切换至暗色主题的功能，最直观的方式是按钮提供一个 onClick 事件并触发主题组件的 changeTheme 方法。

在 Sunmao 中，开发者可在组件规范中声明其对外发送的事件及可供外部调用的一组命令式方法。基于此，任意组件均可通过事件与方法与其他组件交互。

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

布局与样式

开发应用时，最终通常将组件组合成嵌套结构，如浏览器中的 DOM 树。

Sunmao 应用 schema 采用扁平数组结构记录所有组件信息，以提高修改与存储效率。因此，我们引入插槽概念来表示嵌套结构。

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

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

另一个极具想象空间的功能是自定义组件样式。若组件开发者能对外暴露定义组件样式的能力，组件的可复用性将大幅提升。

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

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

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

类型安全

在低代码场景中，类型安全能极大提升开发体验与应用搭建速度。因此，Sunmao 重度使用 typescript 与 JSON schema 来实现卓越的类型系统。

若组件开发者使用 typescript 开发，Sunmao 能从组件的 JSON schema 定义中推断 typescript 类型，从而辅助开发者编写类型安全的代码。

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

在组件间复用代码

许多组件需获取数据、事件节流等通用能力，前文多次提到的 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的资料请关注本站其它相关文章！