react、vue、solid 实现低代码 ssr 页面渲染

项目做了个低代码平台，复盘下，本地实现一个丐版。主要是实现渲染部分，没有做设计器，也就是拖拉拽部分。

代码地址：brick-schema-ssr

对于低代码的一些想法

低代码 这个概念已经很久了，可能大家或多或少都做过类似的，很多公司也会去尝试自己内部自研。老实话，我感觉这玩意定制性挺强的，做到能开源或者通用平台真的不容易。放业界两个优秀的产品：lowcode-engine，mybricks。

个人觉得还是 schema 的设计，决定了设计器应该怎么交互。毕竟设计器最终就是为了产出相应的 schema。而且最复杂的其实是“动起来”。也就是界面拖拉拽拼接好后，怎么加上逻辑编排，让页面动起来。这是个麻烦活，设置简单了，功能不够强大。设置复杂了，上手难，还得了解怎么用。

可以从场景出发，一个是快速上新一些小的单页面活动页，减少重复工作。一个是可以交由设计师来直接制作页面，有点像以前的 Dreamweaver 啊。说白了都是快，为了提效。当然这里的快还包含了上线快，毕竟改了 schema 就可以生效了，不然直接拷贝代码也很快。其他的复杂页面，我认为还不如直接写代码，出问题还不好排查，甚至还不好维护。但如果写一大堆代码，那还叫低代码么。

工程介绍

工程使用了 pnpm + monorepo，打包工具用 vite，前端各自用 react、vue、solid，后端用 koa。

• packages
  • core
    • app：提供 App.tsx，给各个框架做入门组件使用。
    • components：各个组件的主要实现，包括 props、styles、classes 等处理，不多，就实现了五个做 demo。
    • library：一些需要外部注入的工具，比如一些 hooks，useState 等。
    • sdk：各框架渲染 sdk 的基类，就是实现一些公共方法，剩下的框架相关的各自去实现。
    • types：类型声明，其中的 dom.d.ts 声明，是从 vue3 抄过来的。
  • react：react 渲染 sdk，提供 createRoot、hydrate、renderToString 等功能，继承自 core 里的 sdk 基类，同时实现并注入框架相关的 hook。
  • vue： 同 react，引擎改为 vue。
  • solid：同 react，引擎改为 solid。
  • client：前端项目，react、vue、solid 三个框架结合各自 sdk，接受 schema 做 demo 展示，顺便提供打包后的 index 给后端做返回页面用。
  • server
    • render：使用 react、vue、solid 三个 sdk 提供的 renderToString 方法，加上编译处理，用于生产。
    • src：koa 服务，使用 render 文件夹导出的 renderToString 方法，返回不同框架的 schema ssr 页面。以及其他的接口支持。

对于逻辑编排的实现，我这里直接采用写代码的方式了。

后话

实际上我们还支持了 qwik.js，据说是个 ssr 很厉害的框架。同时还支持 react-native，就是把 html 的 dom 标签，替换成 rn 提供的原生组件。这个适配巨复杂，本来就是个原生应用，只是改成开发像前端。也写了相关几篇文章：《react-native ios 流水账》、《ios 原生应用集成 react-native》、《android 原生应用集成 react-native》。

其实也是为了适配而适配，真正用的就是一套就够了。而且组件库一般也不会从基础搭建起，都是使用现有的组件库，最多改点东西适配一下。

真的有这种适配多框架的需求，可以用这个「Mitosis」，用 jsx 写组件，可以编译成多个前端库的对应组件，包括：Angular, React, Qwik, Vue, Svelte, Solid, and React Native。也就是按照它要求的有一定约束的写法，就是写出一套适配多框架的组件库。