手寫程式碼的網頁表單已成過去！GolemUI 用 JSON 自動生成，迎接未來

導言

每次在線上輸入資訊時，您是否曾好奇那些會員註冊頁面、問卷調查、複雜的申請表單是如何製作出來的？對開發者而言，逐一編寫這些表單的程式碼，就像親手雕刻樂高積木一樣，是一項耗時費力的重複性工作。

然而，現在一個能徹底革新這種枯燥重複工作的全新工具已經登場。它就是 GolemUI。GolemUI 讓開發者不再需要親自編寫表單的「外觀（長什麼樣子）」程式碼，而是只需透過簡單的設定檔（JSON Schema）定義「內容和結構（需要包含什麼）」，就能像魔法般自動生成完美的表單，這是一項 JavaScript 函式庫。一個令人驚訝的消息是，網頁表單開發的範式正因此而發生根本性的改變 來源: 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 Schema」。

什麼是宣告式方法？ 通常在建立網頁表單時，開發者會直接透過程式碼指示一連串的「過程 (How)」，例如「在這裡建立一個輸入框，旁邊加上『姓名』兩個字，使用者輸入文字時這樣回應」。這被稱為「指令式 (Imperative)」方法。

相反地，GolemUI 則只需透過 JSON Schema (Schema，一種定義數據結構和規則的藍圖) 宣告「需要什麼 (What)」，例如「這個表單需要『姓名』欄位，以及需要以電子郵件格式輸入的『電子郵件』欄位」來源: GolemUI - The Declarative Form Engine。 這樣比喻會更容易理解：就像廚師只要有食譜 (JSON Schema)，無論在哪個廚房 (框架) 都能依食譜烹飪 (生成表單) 一樣。GolemUI 就像一位聰明的廚師，能讀取食譜，自動找出所需的食材 (UI 組件) 並組裝起來 來源: GolemUI - The Declarative Form Engine。

用 JSON Schema 創建表單的魔法 GolemUI 透過扮演「食譜」角色的 JSON Schema 來建構表單 來源: Installation | GolemUI。這個 Schema 不僅定義了數據類型，還能包含每個輸入欄位的類型（字串、數字等）、最小長度，以及是否需要遵循特定格式（例如電子郵件或密碼的驗證）等規則。

舉例來說，想像您要建立一個「用戶註冊表單」。 開發者可以編寫以下 JSON Schema：

{
  "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 Schema 傳遞給 GolemUI，它會自動建立「使用者名稱」輸入欄位、「電子郵件地址」輸入欄位、「密碼」輸入欄位，並在螢幕上顯示一個已應用各欄位為必填項目且需達到特定長度等驗證規則的表單。開發者完全無需手動編寫 HTML 程式碼或使用 JavaScript 編寫驗證邏輯。

支援多種框架 更令人驚訝的是，透過這樣建立的一個 JSON Schema，就能在 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 Schema，也能親自設計和建構複雜的表單。這將有助於 No-Code/Low-Code (幾乎或完全無需編碼即可開發軟體的方式) 平台的發展，並幫助更多人建立數位服務。

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