超越基本表單：為什麼企業級表單仍然是一個挑戰（以及 FormML 如何解決它）-js教程-PHP中文網

Beyond Basic Forms: Why Enterprise-Level Forms Remain a Challenge (and How FormML Solves It)

表單在數位世界中無處不在，從簡單的新聞通訊註冊到複雜的企業應用程式。雖然基本表單可以使用 Formik 或 React Hook Form 等流行工具輕鬆處理，但企業級表單仍然面臨著重大挑戰現有解決方案難以解決。

什麼是企業級表單？

企業級表單不只是簡單的輸入欄位和提交按鈕。它們是金融、銀行和保險等產業複雜工作流程的支柱。這些表單必須平衡進階功能、可擴充性和使用者體驗，使它們與簡單的對應形式有根本的不同。

企業級表單範例

貸款申請：動態計算利率、每月付款和債務收入比即時。他們必須根據信用評分和收入驗證要求執行監管合規規則，例如最高貸款金額。
稅務申報：多頁表格，可處理不同收入來源、扣除額和抵免。他們需要根據稅務機關規則進行驗證，支援在多個會話中保存草稿，並指導使用者完成複雜的工作流程，例如逐項扣除與標準扣除。
保險索賠
：根據索賠類型（汽車、房屋、人壽）和保單詳細資料進行調整的複雜表格。他們使用現有客戶資料預填字段，處理文件附件作為證據，實施複雜的驗證規則（例如，索賠金額不能超過保單限制），並在各種保險產品之間保持一致的品牌，以將其與競爭對手區分開來.

這種關鍵任務但成本高昂的表單就是我所說的「企業級表單」。

建構

企業級

表單的挑戰假設您是一家建立線上貸款申請表的金融公司。您可能面臨哪些挑戰？

非技術利益相關者的參與：貸款很複雜，涉及金融、會計和法律領域的專業知識——這些專業知識通常由非技術利益相關者掌握。這些利害關係人了解複雜的業務規則，例如「如果申請人的信用評分低於650，則需要共同簽署人」或「使用每月總收入除以計算債務與收入比率”每月總債務支付「。一個重大挑戰是使這些利害關係人能夠有效地領導表單設計，而無需花費過多的時間教導開發人員所有規則，同時確保處理邊緣情況的順利協作。
品牌 UI 和自訂 UX：開發人員也很重要！公司不想要千篇一律的表單設計。每個認真的企業都希望打造自己的品牌並提供獨特的使用者體驗，這些目標需要開發人員的專業知識才能實現。例如，銀行可能希望其貸款申請與其品牌顏色相符、使用自訂輸入組件或實現逐步嚮導介面，引導用戶完成「個人資訊」、「僱用詳情」和「貸款條款」。
計算、公式和動態行為：一份貸款申請表可能需要各種複雜的即時計算和動態行為。
- 財務計算：貸款金額、利率、每月付款等
- 條件邏輯：根據貸款類型顯示/隱藏欄位（例如，抵押貸款與個人貸款的不同欄位）
- 跨領域依賴關係：更新收入可能會影響最大貸款金額、債務收入比和利率
- 即時驗證：確保貸款金額維持在基於收入和信用評分的政策限額內
自動儲存和復原：複雜的表單可以有數百個欄位 - 使用者如果不小心關閉瀏覽器就不想重新開始。
其他技術挑戰：
- 效能：以流暢的 UI 回應能力高效處理數百個字段，確保快速計算和無縫渲染
- 驗證：全面的驗證策略，包括用於即時用戶回饋的即時用戶端驗證和用於資料完整性和安全性的強大伺服器端驗證
- 資料預先填充：從多個資料來源填充欄位

這些不是特定場景的小眾問題，而是企業在建立複雜表單時面臨的常見挑戰。業務複雜性、技術要求和使用者體驗需求的結合使得企業級表單的有效實施特別具有挑戰性。

現有工具的不足之處

雖然像 Formik 和 React Hook Form 這樣流行的表單庫非常適合處理基本表單，但它們並不是根據企業需求而建立的。在我們之前討論的挑戰的背景下檢查這些工具時，一些限制變得顯而易見：

挑戰 1：非技術利害關係人的參與

目前的表單庫以開發人員為中心，需要 JavaScript/TypeScript 知識來定義表單邏輯。

這增強了客製化能力，但顯著降低了交付包含複雜規則的表單的效率。例如：

當表單規則涉及複雜的計算時，利益相關者被迫用諸如「計算最高貸款金額為年收入的4倍」等口頭描述向開發者進行一步步解釋，如果信用評分低於700，則下調15%，並進一步降低現有每月債務支付佔月總收入的百分比，如果就業歷史低於700，則額外降低10% 2年”，儘管這些計算可能是其專業領域的常識。
當表單規則需要修改時，例如調整貸款限額，利害關係人仍需要依賴開發人員來實施更改，導致流程更長，交付時間延長。

挑戰 2：品牌 UI 和客製化 UX

兩個現有庫在這方面都表現出色（由於它們以開發人員為中心性質），提供了強大的定制功能。例如，React Hook Form 提供了一個 Controller 元件來適應受控輸入元件。

挑戰 3：計算、公式與動態行為

現有的函式庫提供了「just-works」的運算能力，但缺乏複雜運算的抽象化和組織能力。

考慮在 React Hook Form 中實作貸款計算器：

function LoanForm() {
  const { watch, setValue } = useForm()

  const [loanAmount, interestRate, term] = watch([
    'loanAmount',
    'interestRate',
    'term',
  ])

  useEffect(() => {
    if (loanAmount && interestRate && term) {
      const monthlyRate = interestRate / 100 / 12
      const months = term * 12
      const payment =
        (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
        (Math.pow(1 + monthlyRate, months) - 1)
      setValue('monthlyPayment', payment.toFixed(2))
    }
  }, [loanAmount, interestRate, term, setValue])

  return (
    <form>
      {/* ... */}
      <input type="number" {...register('monthlyPayment')} />
      {/* ... */}
    </form>
  )
}

登入後複製

這種方法有幾個缺點：

用 JavaScript 寫：它拒絕非技術利害關係人和開發人員之間的協作。
手動維護欄位依賴: watch(['loanAmount', 'interestRate', 'term'])
欄位定義與賦值分離：本例中，monthlyPayment 註冊在 return 語句中，但賦值在 useEffect 中
額外的樣板代碼：watch、setValue、useEffect
手動效能最佳化

挑戰 4：自動儲存與恢復

這些庫中沒有用於自動保存和恢復的內建解決方案。實現自動保存功能需要大量的自訂程式碼。開發人員必須處理：

高效率的狀態持久化
解決衝突
資料同步
進度追蹤
錯誤回復

這些限制為企業應用程式帶來了巨大的開發開銷、更長的上市時間和更高的維護成本。雖然有解決方法，但它們通常會導致複雜、脆弱的解決方案，難以維護和擴展。

FormML 透過其專為企業級表單設計的特定領域語言和架構來解決這些挑戰，我們將在下一節中探討。

FormML 解決方案

FormML，是表單建模語言的縮寫，發音為“正式”，是一個新的開源框架，專門為解決企業級表單的挑戰而設計。以下是它如何彌補其他工具留下的空白：

賦予非技術利害關係人權力

如其全名「表單建模語言」所示，FormML 引入了一種直觀且非開發人員友好的領域特定語言 (DSL)。其簡單的結構、最少的語法和自然的術語使財務專家、法律專業人士和其他非技術利益相關者能夠在不需要程式設計技能的情況下對表單進行建模。

要建立一個最簡單的可運行報稅表，無需任何程式設計知識的熟練會計師只需 5 分鐘即可完成：

function LoanForm() {
  const { watch, setValue } = useForm()

  const [loanAmount, interestRate, term] = watch([
    'loanAmount',
    'interestRate',
    'term',
  ])

  useEffect(() => {
    if (loanAmount && interestRate && term) {
      const monthlyRate = interestRate / 100 / 12
      const months = term * 12
      const payment =
        (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
        (Math.pow(1 + monthlyRate, months) - 1)
      setValue('monthlyPayment', payment.toFixed(2))
    }
  }, [loanAmount, interestRate, term, setValue])

  return (
    <form>
      {/* ... */}
      <input type="number" {...register('monthlyPayment')} />
      {/* ... */}
    </form>
  )
}

登入後複製

完全可自訂的使用者體驗

FormML 採用了強大的模型視圖分離架構，可以將表單邏輯與 UI 呈現徹底解耦。領域專家使用 FormML DSL 在 .fml 檔案中定義表單的結構、類型和行為（「模型」）。

這種分離使開發人員能夠完全專注於打造精美的自訂 UI 體驗（「視圖」），並具有與其他表單庫相同的靈活性，而無需擔心底層業務邏輯。

function LoanForm() {
  const { watch, setValue } = useForm()

  const [loanAmount, interestRate, term] = watch([
    'loanAmount',
    'interestRate',
    'term',
  ])

  useEffect(() => {
    if (loanAmount && interestRate && term) {
      const monthlyRate = interestRate / 100 / 12
      const months = term * 12
      const payment =
        (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
        (Math.pow(1 + monthlyRate, months) - 1)
      setValue('monthlyPayment', payment.toFixed(2))
    }
  }, [loanAmount, interestRate, term, setValue])

  return (
    <form>
      {/* ... */}
      <input type="number" {...register('monthlyPayment')} />
      {/* ... */}
    </form>
  )
}

登入後複製