Sunmao：一个真正可扩展的低代码UI框架

元素，监听事件，修改元素的高亮样式来实现这个功能。但是这种实现有很多缺点，比如增加DOM节点的数量，防止组件被配置为内联，添加隐式嵌套关系，这些都是孙茂无法接受的。虽然我们花了更多时间来找到避免上述所有陷阱的实现，但我们相信这是值得的。因为只有这样才能发挥代码的力量，赢得开发者的认可。3.多层次的可扩展性孙茂包含核心规范、运行时和编辑器三个层次。组件和应用程序模式在核心规范中定义。除了常规字段，用户还可以通过添加注解的方式注入额外的信息，并在运行时或编辑器中使用。我们多次提到的组件也是可扩展的。组件开发人员可以为组件定义各种参数并与其他组件进行交互。下面，我们将介绍另一种组件间共享扩展能力的方式：traits。在可视化编辑器中，用户还可以在编辑器中配置各个组件参数的显示和输入方式。4.专注而不是发散我们没有选择开发全栈低代码方案，而是专注于UI部分，目前只有WebUI。因为我们相信当今的后端技术日新月异，一个UI低代码的方案可以更灵活的接入各种后端服务，从而给用户带来最大的灵活性。孙猫WebUI开发的工作原理已经相当成熟，所以孙猫在此基础上只增加了少量低代码场景下的必要能力，即：响应式事件和方法槽以及样式槽类型trait可视化编辑器响应最新的。状态响应性是指当应用程序状态发生变化时，所有依赖于该状态的UI都会自动重写渲染。Sunmao实现了一个高性能的响应式状态中心，所有组件都可以同步它们的状态并访问其他组件的状态。比如我们想让demo按钮渲染demo输入框的值，只需要填写{{input.value.length}}：按钮可以响应输入的变化实时渲染盒子！组件间的交互现代UI框架往往强调状态驱动和声明式的概念，但在低代码场景下过度追求这两点可能会适得其反。例如，当你想实现点击主题按钮切换到深色主题的功能时，最直观的方式就是为按钮提供onClick事件，触发主题组件的changeTheme方法。在三猫中，可以在组件的规范中声明对外发送的事件和一组可以对外调用的命令式方法。在此基础上，任何组件都可以通过事件与方法和其他组件进行交互。下面是一个监听事件和执行方法的例子：LayoutandStyles当我们开发应用程序时，我们通常最终会将组件组合成一个嵌套结构，比如浏览器中的DOM树。在三茂的应用架构中，我们使用平面数组结构来记录所有的组件信息，使得修改和存储更加高效。因此，我们引入槽的概念来表示嵌套结构。可以通过将一个组件放置在另一个组件的插槽中来实现和声明一个组件具有哪些插槽：另一个给想象空间留下很大空间的特性是自定义组件的样式。如果组件开发者能够暴露定义组件样式的能力，那么组件的复用性将会大大提高。同样，我们引入样式槽的概念来实现自定义样式的功能。您可以通过以下方式实现和声明一个组件有哪些样式槽：在样式槽中自定义样式：类型安全在低代码场景下，类型安全可以大大提升开发体验和应用构建速度。所以在商猫我们大量使用typescript和JSONschema来实现一个优秀的类型系统。如果组件开发者使用typescript进行开发，孙茂可以从组件的JSONschema定义中推断出typescript类型，从而帮助组件开发者编写出类型安全的代码。我们的类型系统还在构建应用程序的过程中提供了自动完成和验证等功能。在组件之间重用代码许多组件需要通用的功能，例如数据获取和事件节流。我们上面多次提到的traits就是针对这个需求而设计的。试想一下，如果每个组件都实现dataUrl（获取数据的URL）、hidden（可见）、handlers（事件回调）等属性，显然是非常多余的。对于这样的需求，trait系统提供了很好的抽象，帮助开发者以trait的形式实现通用的能力，并在多个组件中复用，保证组件实现的简单性。可扩展的可视化编辑器孙猫的可视化编辑器读取所有组件的规范，并根据它们定义的JSON模式自动生成表单。如果需要自定义部分表单，组件开发人员可以实现自定义编辑器小部件。扩展可视化编辑器的设计可以在这个设计文档中进一步阅读。保持开放Sunmao从第一天起就以开源方式开发。但是，当我们说“开放”时，我们不仅仅局限于在Apache-2.0许可下提供所有源代码。虽然Sunmao是一个从SmartX内部发起的项目，但我们在开发过程中选择将所有提案、讨论和设计决策放在公共Github存储库中，而不是其他内部渠道。因为我们相信“保持开放”是孙茂发展的基石，我们也将能使用孙茂构建自己的低代码解决方案视为开发者最大的荣幸。如果您对sunamo-ui感兴趣，欢迎访问我们的Github存储库或加入我们的slack频道以与社区保持联系。