低代码引擎

我现在在写的一个低代码工具(或者说平台？)主要来自于一个“偷”的项目，当时感觉拖拽这些东西太麻烦，就用了个现成的，在逐步开发的过程中遇到了如下问题：

1. 原项目只考虑了拖拽移动，以及图层层深改变，如果这么做，导出的无论是代码还是真实渲染，本质和 ps 差不多，全部是绝对定位，一旦对方设备尺寸不对，大事不妙，也基本不可能做什么改动
2. 原项目只考虑了基本的小粒度组件，多根节点的组件以及非常规的，如 dialog 组件没有考虑
3. 原项目只假设存在一个固定不变的容器，和属性固定的组件 ... 虽然通过一些办法，利用了原项目的缺点来做了更有意思的一些效果，但这样显然不能作为经验

我先假设存在基础需求如下，也就是所有低代码体系一定会有的东西 1，基础的拖拽移动，辅助线，范围选择等 2，属性更改，尤其是样式属性的更改 3，画布上的渲染(相当于开发时)，以及代码导出或真实渲染(相当于生产时)

可能还有进一步的需求？

1，栅格系统，布局系统，撤回(界面/操作) 2，调整动画属性，或是 vif vfor 的属性(属性) 3，当在不同设备上的，实时渲染效果(渲染) ......

我总结一下，主体功能大体三类，一是面向操作和界面，二是面向属性，三是面向渲染。

(无论是导出代码，画布渲染，还是真实渲染，本质都是一份数据结构在某个环境下的表现，其实区别不大，这里姑且称为渲染吧)

(有文章说低代码工具主要是物料区，画布区，属性区，这主要是针对页面布局来说的，不过这也确实存在一些关系)

好吧，很多低代码平台其实已经实现了很多复杂的效果。 (不同的工具/平台侧重不同，我有见过用 electron 从而使本地文件实时更改的，有见过用特殊拖拽去做效果更好的遮罩的，有见过 vscode 插件直接导出文件的有见过结合云平台即时部署的，) 但实际上低代码使用依然冷门(我是指在关键项目上)，仅仅停留在一些广告页面搭建。我使用了一些项目以后，感觉大多存在如下的问题

1. 极度复杂的属性，如果算 input 可能有数百个，先不提性能，会 css 的找属性找的费劲，不会 css 的大概还是看不懂
2. 有限的物料库，来来回回就是几个基本组件
3. 导出代码怪异，无法二次开发 ...

我细想了一下，大部分项目的问题不是开发者做的不好，而是没有明确用户群体:这个东西究竟是给零基础的人用？给设计师用？还是给前端用？

零基础的话，基本只能准备固定的组件，和一些最基本的样式属性，给设计师的话，我觉得还不如弄个 figma 插件(好像已经有相应的，直接操作 dom 的设计工具了)，这两类我就不提了

如果要给前端用的话，至少要考虑这几个地方 1 要符合 html 的结构，要存在兄弟关系，父子关系等等，不能是扁平的结构 2 要可以在一个输入框中操作样式，而不是给一大堆属性 3 导出代码，要和正常编写的代码没区别 4 要能利用现成组件 5 要能操作 prop 的数据， 6 要符合布局习惯，哪些应该是 flex，哪些应该是 absolute，哪些应该是 px/vw 7 容易上手 ... 这意味着这几个点 1 要准备控制样式的方案，用什么行内样式的话上面的需求估计毙掉了一半，因为样式可能受拖拽影响，也可能受属性框影响，那意味着还要解决样式冲突，而且得要写起来容易的，如果要做真实渲染，还要考虑怎么导出需要用的样式，怎么预览不同尺寸的设备(我的方案比较取巧，用的是 tailwindcss，这个后面再说) 2 操作不需要多功能，我看别人有什么旋转啊这些的，真没必要，平时没机会用 3 考虑各种组件，在 vue 体系里面，至少要考虑多根结点组件(如何调整它的宽高)，内部溢出组件(如 teleport,遮罩)等等 ...

第几次总结了？不记得了

不记得那就是第一次，当我想要设计一个低代码引擎，以后拿来可以开箱即用，可以轻松改造，结构如下 1 界面基础，以及操作部分(拖拽)，这个已经分析过了，不算重要，而且定制化需求较多，也没办法做很灵活的封装，我这部分主要就写死了，如果有需求简单可以直接用，不简单就只能自己弄一个 (唯一特殊的是撤回这个功能，它主要依赖一个作用的历史记录栈，这个可以灵活复用) 2 一些工具，比如存储/恢复，样式信息的转换等等， 3 渲染引擎，这个本质是一个类，通过 h 函数创造 vnode，在这个类的子类上加新的方法接着操作 vnode，最后根据需求导出就好，可以组件原样导出，也可以包在某个 dom 中出来(导出代码的话就不是操作 vnode 而是操作一个字符串，大差不差) 4 一个全局的状态，也就是整个系统的数据，另一个是特殊的状态。如容器状态，组件状态，比如此时在操作哪个 block，此时容器状态是 mobile 还是 pc。(状态，本质上要是一个单例模式，还要是响应式，不然界面不受状态影响可就尴尬了) (此外，这个全局状态转成 json 如何上传到服务器，如何通知线上项目导入动态路由或异步组件从而“部署”组件，如何搭建一个注册中心通知相关人员某某项目中更新了一个低代码组件，如何测试等等，这些都不难，不过就不放在这里面写了) 有点困了，就说这么多吧，写了一千多就困得要死，嗝，凑个整就下班