低代码之光！轻量级 GUI 的设计与实现

前言

每当提起低代码，很多人都会下意识的出现过激反应，吐槽低代码都是**，唯恐避之不及。可能大部分人觉得低代码就是替代手写代码，对于程序员来说这是不可接受的。其实低代码表述的含义非常宽泛，我相信很多人可能都在低代码平台中受益过，而且确实可以提升效率。像原型工具（
Figma
）、建站平台（
Webflow
、
Framer
）、BI 报表（
Power BI
、
Looker Studio
）、3D 模型搭建（
Spline
、
Womp
）、动画编辑器（
Rive
）等等，这些都是非常有名的一些在线工具。

言归正传，本文并不是为了介绍低代码平台，也不想评价低代码的好坏，只是想聊一聊低代码平台中 GUI 的设计思路和实现方式。

Acrodata GUI 是一款适用于低代码平台的轻量级 GUI 库，现已开源。

GitHub:
https://github.com/acrodata/gui
Playground:
https://acrodata.github.io/gui/playground

什么是 GUI

GUI 翻译为图形用户界面，是指采用图形方式显示的计算机操作用户界面。在前端编程中，我们一般很少使用 GUI 这样的描述，所以很多人会错误地认为 GUI = UI library。

那么到底什么是 GUI 呢？为了便于理解，我们可以参照前端项目中比较有名的 GUI 项目
dat.gui
。做过 3D 可视化或者熟悉 ThreeJS 的朋友一定非常熟悉这个库。dat.gui 的主要用途就是将配置项转换成图形化控件，方便调试参数。

除了
dat.gui
之外，还有其它几款 GUI 项目也做得不错，
tweakpane
、
lil-gui
、
leva
。

低代码平台中的配置栏

对于使用过低代码平台或者开发过类似产品的朋友来说，低代码平台的布局已经司空见惯，在布局的右侧通常都是配置栏。当然，我们使用的很多软件也是如此。随便贴几张主流工具的截图。

首先说一点，并不是每一款低代码产品都需要 GUI 生成配置，比如第一张截图 Webflow，它的所有组件的配置项都是一样的（全部是 CSS 的可视化配置），这种情况直接写一个公共组件可能更简单。

但是像第三张截图 Looker Studio 这样的产品，每一种图表组件的配置都不一样，同时还允许用户自定义组件，那么这类产品就非常需要一套灵活易用的 GUI 库了。

在 Acrodata GUI 的文档站首页，我用 GUI 创建了一个稍微复杂的
CSS 渐变生成器
，它和低代码平台中的配置栏非常类型，欢迎把玩尝试。