GolemUI: 一個宣告式的 JSON 驅動表單引擎

GolemUI: 一個宣告式的 JSON 驅動表單引擎

GolemUI 是一個開源的宣告式表單引擎,旨在從 JSON 定義中生成動態使用者介面。透過將表單結構與渲染邏輯解耦,GolemUI 允許開發者在資料庫中或透過大型語言模型 (LLMs) 儲存、版本化並生成表單架構 (schemas),同時在不同的前端框架中保持一致的 UI。

核心架構與功能

GolemUI 使用 JSON 驅動的方法來生成表單,這使得表單的狀態與結構可以由資料定義而非硬編碼的組件來控制。

JSON 引擎與跨框架支援

核心引擎處理 JSON 定義以渲染 UI 組件。這種架構允許單一表單定義在多個環境中進行渲染,包括:

  • React
  • Angular
  • Vue
  • Lit
  • Vanilla JavaScript

無頭組件 (Headless Components) 與樣式設定

GolemUI 提供 28 個無頭組件,可以使用 CSS 變數進行樣式設定。為了確保靈活性,該函式庫提供了 API,允許開發者整合第三方組件函式庫,例如 Material UI、Shoelace 或自定義組件。

強型別開發層 (Typed Authoring Layer)

為了避免手動編寫原始 JSON 的繁瑣工作,GolemUI 包含一個強型別開發層。這個程式化介面允許開發者使用強型別 API 來構建表單,隨後生成底層的 JSON 定義,從而提升開發者體驗 (DX) 並減少語法錯誤。

透過 MCP 整合 LLM

GolemUI 包含一個確定性的 Model Context Protocol (MCP) 實作。這套工具集旨在幫助 LLMs 生成有效的 JSON 表單定義與程式碼,並提供驗證工具以確保 AI 回傳的輸出符合引擎的架構 (schema) 規範。

社群回饋與技術考量

在發布後,GolemUI 社群針對該函式庫的實作與長期維護提出了幾個技術問題與疑慮。

型別安全與欄位關係

部分使用者指出,JSON 定義中的欄位關係是以字串形式表示的。這引發了對於缺乏建置時語法檢查或自動完成功能來處理這些關係的疑慮,這在處理大型表單時可能會增加維護難度。

架構演進與遷移

關於 GolemUI 如何處理架構遷移 (schema migrations) 的問題也隨之提出。特別是對於在資料庫中儲存數千個 JSON 定義的使用者而言,社群要求澄清是否具備內建的版本化系統或遷移策略來處理組件 API 的變動。

與現有解決方案的比較

業界資深人士指出,「從資料結構生成表單」的概念並不新鮮,並引用了 JSONForms 等現有專案。這引發了關於 GolemUI 相對於於既有替代方案,是否能向市場提供足夠獨特的價值主張的辯論。

已回報的問題

早期採用者回報了特定的功能性錯誤 (bugs),例如日期範圍選擇器無法如預期運作,以及初始組件集中缺乏檔案輸入類型 (file input type)。

"所有欄位關係似乎都是以字串形式表示的。這暗示著你可能無法對它們使用自動完成或建置時的語法或型別檢查。"

"你如何處理架構遷移?如果有人在資料庫中儲存了數千個 JSON 表單定義,而組件 API 發生了變動,是否有內建的遷移策略或版本化系統?"

Sources