前言
每当提起低代码，很多人都会下意识的出现过激反应，吐槽低代码都是**，唯恐避之不及。可能大部分人觉得低代码就是替代手写代码，对于程序员来说这是不可接受的。其实低代码表述的含义非常宽泛，我相信很多人可能都在低代码平台中受益过，而且确实可以提升效率。像原型工具（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 渐变生成器，它和低代码平台中的配置栏非常类型，欢迎把玩尝试。
