共计 3118 个字符，预计需要花费 8 分钟才能阅读完成。
Sunmao：一个真正可扩大的低代码 UI 框架
只管当初越来越多的人开始对低代码开发感兴趣，但已有低代码计划的一些局限性依然让大家有所保留。其中最常见的担心莫过于低代码不足灵活性以及容易被厂商锁定。
显然这样的担心是正当的，因为大家都不心愿在实现特定性能的时候才发现低代码平台无奈反对，也不心愿从某个厂商的低代码平台迁出时发现利用须要彻底的重写。
一些已有产品机智地将低代码的应用场景限定在了特定畛域中，例如外部工具或者是官网，因为在这些场景中用户更关怀开发效率而不是灵活性与定制能力。但当咱们心愿应用低代码在更多场景中晋升效率时，这类产品就不能满足需要了。
因而，咱们开始开发 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}}：
按钮就可能响应输入框的变动实时渲染！
组件间交互
古代 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 构建本人的低代码计划为最大的光荣。
如果你对 sunamo-ui 感兴趣，欢送拜访咱们的 Github 仓库或者退出咱们 slack 频道，与社区保持联系。