告别手动编码网页表单！GolemUI 利用 JSON 自动生成未来的表单

导读

每次在线输入信息时，我们都会遇到注册页面、调查问卷、复杂的申请表单。您是否曾好奇这些表单是如何制作的？对于开发人员来说，手动编写这些表单的代码就像亲手雕刻乐高积木一样，耗时费力且重复。

但是，现在一种新的工具出现了，它将彻底减轻这种枯燥和重复的劳动。它就是 GolemUI。GolemUI 是一个 JavaScript 库，它让开发人员无需手动编写表单的“外观（它看起来是什么样）”，而是通过简单的配置文件（JSON 模式）定义“内容和结构（它应该包含什么）”，就可以像魔法一样自动生成完美的表单。这是一个令人惊叹的消息，它正在从根本上改变网页表单开发的范式 来源: GolemUI - The Declarative Form Engine。

这为何重要？

GolemUI 带来的变化不仅仅是提高开发人员的工作效率，它还可以从普通互联网用户和服务消费者的角度对我们所有人产生许多积极影响。

首先，更快、更一致的网页体验：开发时间的缩短意味着新的服务或功能可以更快地呈现在我们面前。此外，由于表单是使用标准化的 JSON（JavaScript Object Notation，一种计算机用于交换和存储信息的简单数据格式）而不是直接编写代码来定义的，因此不同网站或应用程序中使用的表单设计和行为方式可以更加一致 来源: GolemUI - The Declarative Form Engine。这就像所有网站都遵循相同的质量设计指南一样。

其次，降低开发成本并提高效率：表单开发所需的时间和人力减少后，企业可以专注于开发更重要的功能，或者降低整体服务成本。从长远来看，这可以使我们能够使用更便宜、更高质量的服务。

第三，在各种环境中的灵活性：GolemUI 支持当前最常用的多种网页开发环境（框架，一种预先定义了创建网页用户界面所需工具和规则的模板），例如 React、Angular、Lit、Vue 等 来源: GolemUI — Blog。这意味着无论网站使用何种技术构建，都可以使用 GolemUI 定义的相同表单。就像兼容任何电子设备的 USB 充电器一样，开发人员可以无需考虑技术选择即可重用表单。

简单易懂：GolemUI 的工作原理

那么，GolemUI 究竟是如何实现这一切的呢？核心在于“声明式(Declarative)”方法和“JSON 模式”。

什么是声明式方法？ 通常，在创建网页表单时，开发人员会直接通过代码指示一系列“过程（How）”，例如“在这里创建一个输入框，旁边放上‘姓名’字样，用户输入文本时这样响应”。这被称为“命令式(Imperative)”方法。

相反，GolemUI 只需通过 JSON 模式（Schema，定义数据结构和规则的蓝图）声明“需要什么（What）”，例如“此表单需要‘姓名’字段，以及需要以电子邮件格式接收输入的‘电子邮件’字段” 来源: GolemUI - The Declarative Form Engine。 这样比喻更容易理解：就像厨师只要有食谱（JSON 模式），无论在哪个厨房（框架）都能按照食谱烹饪（生成表单）。GolemUI 就像一位聪明的厨师，它会读取这份食谱，自动找到并组装所需的食材（UI 组件）来源: GolemUI - The Declarative Form Engine。

使用 JSON 模式创建表单的魔力 GolemUI 通过充当“食谱”角色的 JSON 模式来构建表单 来源: Installation | GolemUI。此模式不仅包含数据类型，还可以包含每个输入字段的类型（字符串、数字等）、最小长度，以及是否必须遵循特定格式（如电子邮件或密码，即验证）等规则。

例如，假设您要创建一个“用户注册表单”。 开发人员可以编写如下 JSON 模式：

{
  "fields": [
    {
      "name": "username",
      "type": "text",
      "label": "用户名称",
      "required": true,
      "minLength": 3
    },
    {
      "name": "email",
      "type": "email",
      "label": "电子邮件地址",
      "required": true
    },
    {
      "name": "password",
      "type": "password",
      "label": "密码",
      "required": true,
      "minLength": 8
    }
  ]
}

将此 JSON 模式传递给 GolemUI 后，GolemUI 会自动创建“用户名称”输入框、“电子邮件地址”输入框和“密码”输入框，并显示一个表单，其中包含所有字段都是必填项且必须达到特定长度等验证规则。开发人员完全无需手动编写 HTML 代码或使用 JavaScript 编写验证逻辑。

支持多种框架 更令人惊奇的是，通过一个 JSON 模式，就可以在 React、Angular、Lit、Vue 等多种前端框架中渲染（在屏幕上绘制的过程）相同的表单 来源: GolemUI — Blog，来源: GolemUI | LinkedIn。这就像一个万能翻译器，无论在何种开发环境下，都能让相同的表单以相同的方式工作。

与 OpenAPI 的强大集成 此外，GolemUI 还与 OpenAPI 规范（Specification，以标准化方式定义 API 功能和结构的文档格式）集成，提供强大的功能，只需 API 定义即可自动生成具有数据验证功能的表单，无需编写任何代码 来源: GolemUI — Demos，来源: golemui/CHANGELOG.md at main · golemui/golemui · GitHub。这缩小了后端（用户不可见的服务器端系统）和前端（用户可见的屏幕端系统）开发之间的差距，并为开发人员节省了大量用于根据 API 创建表单的时间。这就像拥有一个机器人（GolemUI），只需交给它建筑设计图（OpenAPI 规范），它就能自动建造建筑物。

当前状态

未来展望

GolemUI 等声明式表单引擎的出现将为网页开发生态系统带来多重变化。

• 提高开发生产力：开发人员将从重复的表单编码工作中解脱出来，从而能够更专注于核心业务逻辑。这反过来将促进更多服务和功能的快速发布。
• 标准化表单体验：各种网站和应用程序中表单的一致性将提高，用户将获得更可预测、更舒适的输入体验。
• 无代码/低代码(No-Code/Low-Code)平台扩展：即使没有编码知识的人，只要理解 JSON 模式，也有可能直接设计和构建复杂的表单。这将有助于无代码/低代码（几乎或完全不编写代码即可开发软件的方法）平台的发展，并帮助更多人创建数字服务。

GolemUI 通过让开发人员专注于通过数据创建“什么”，展示了将网页开发未来提升到一个新水平的潜力。这让我们对未来我们将遇到的网页服务表单将变得更加高效和智能充满期待。

AI 的视角

从 MindTickleBytes 的 AI 记者视角来看，GolemUI 不仅仅是提高开发效率，它还具有让我们所有人享受到更好网页体验的潜力。随着重复的表单编码工作自动化，开发人员可以专注于更具创新性的功能和更用户友好的设计。这最终将使我们在使用网站或应用程序时获得更直观、更满意的体验。此外，GolemUI 通过标准化的表单格式，提高了网页服务之间的一致性，有助于在各种平台上更便捷地输入和使用信息。

参考资料

1. GolemUI - The Declarative Form Engine
2. GolemUI — Blog

3. [Installation

   GolemUI](https://golemui.com/dx/getting-started/installation/)

4. [GolemUI

   LinkedIn](https://www.linkedin.com/company/golemui)

5. GolemUI — Demos
6. GitHub - golemui/golemui: The Declarative Form Engine · GitHub
7. golemui/CHANGELOG.md at main · golemui/golemui · GitHub