首頁 > web前端 > js教程 > 超越基本表單:為什麼企業級表單仍然是一個挑戰(以及 FormML 如何解決它)

超越基本表單:為什麼企業級表單仍然是一個挑戰(以及 FormML 如何解決它)

Barbara Streisand
發布: 2024-12-05 22:46:10
原創
578 人瀏覽過

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>
  )
}
登入後複製
登入後複製
登入後複製

開箱即用的動態行為支持

FormML 將動態行為視為一等公民。它透過 JavaScript 表達式類似 Excel 的公式 系統(WIP)直接在其 DSL 中支援即時計算。例如,根據上面範例中的輸入欄位計算稅費非常簡單,並且只需要很少的工作。

開箱即用的自動儲存和復原支持

FormML 也將自動保存和復原視為一等公民。它計劃支援狀態持久性、衝突解決、資料同步、進度追蹤和開箱即用的錯誤復原。

期待

雖然基本表單已經基本解決,但企業級表單仍面臨獨特的挑戰。 FormML 在解決這些長期存在的問題方面向前邁出了一步,提供了一個平衡功能、靈活性和易用性的全面解決方案。

無論您是在應對複雜的運算、動態行為或團隊之間的協作,FormML 都提供了專門針對企業級表單挑戰而設計的框架。

準備好應對您的企業表單挑戰了嗎?關注我在 X 或 Bluesky 上的帳戶,並在首次發布後嘗試!

以上是超越基本表單:為什麼企業級表單仍然是一個挑戰(以及 FormML 如何解決它)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板