【不容錯過】FormRender 表單渲染的開源發展

、做者：吶薩複製代碼

易用的跨組件體系的表單渲染引擎 - 經過 JSON Schema 快速生成自定義表單配置界面 - github.com/alibaba/for…html

FormRender（下面一概簡稱 FR）起源於 2017 年飛豬互動平臺的模板表單生成方案，經歷 2 年在飛豬內部以及集團兄弟 BU 各個場景的落地和打磨，於 2019.09.30 月開源，當前 star 1.1k, fork 110, npm 月下載量 2k。前端

FR 目前覆蓋了飛豬內部玩法平臺、互動平臺、搭建、投放、批量智能生產、衆多頻道管理等小二平臺、並在開源期間支持了集團內阿里雲團隊，淘寶社區團隊，淘寶新零售團隊，阿里人工智能實驗室，安全智能部下 10+個 BU，20+個場景的搭建、配置後臺和投放系統。本文旨在簡述：react

什麼是 form-render，它解決了哪些問題
開源的半年咱們作了些什麼以及 form-render 將來的規劃和發展

期待讓大夥更瞭解他，以及有對應表單配置場景可使用上他，有建議和優化點歡迎一塊兒交流討論。git

由來 & 構想

後臺系統中表單配置場景層出不窮，這些高重複度但也不盡相同的需求，佔用了前端開發同窗大量的時間。如何產出一個簡潔、提效、靈活和高擴展的表單解決方案一直是困擾小夥伴們的一個問題。github

表單場景具備如下幾個特色：npm

手寫有必定的複雜度，且複雜度在 form 內部（校驗、聯動、狀態）
與外界系統相對獨立、解耦，接點明確（表單信息）
有大量的重複性

這些特性致使了表單自然適合走配置類方案。基於上述構想，FR 的設計方案分爲以下 3 層：編程

協議層定義協議（schema）配置，展現層控制協議的渲染，工具層提供上下游的進一步支持。在此之上，FR 遵循以下的 api 設計：json

基於JSON schema的協議規範。JSON schema 做爲 JSON 數據校驗表述的國際標準，主要用於表單數據的服務端校驗。已經接入JSON Schema標準的團隊能夠幾乎無縫接入 FRapi
極簡的組件 api: FormRender 使用上相似一個單獨的可控的 input：安全
```
// 可控的input
<input value={value} onChange={onChange} />
// form-render, 只多了schema，用於描述 Form 長什麼樣
<FormRender formData={value} onChange={onChange} schema={schema} />
複製代碼
```
這樣的設計下，FR 只負責管理和改動表單數據/時時校驗，而將具體如何使用表單數據和校驗信息乃至提交的方式全權交給了使用者自由書寫。

支持複雜聯動: schema 的大部分屬性都支持函數表達式，實現了靈活但強大的聯動效果。更多示例見在線 demo - 複雜聯動

"showMore": {
  "title": "顯示更多",
  "type": "boolean"
},
"input1": {
  "title": "輸入框1",
  "type": "string",
  "ui:hidden": "{{rootValue.showMore === false}}" // 當showMore值爲false時，隱藏
}
複製代碼

4.支持個性化擴展：當出現現有表單元素沒法知足需求的場景，FR 使用自定義組件的方式，讓用戶自由擴展 FR 的組件庫。

// 寫自定義組件
const MyInput = ({ value, onChange }) => {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
};
// 傳入自定義組件
<FormRender {...props} widgets={{ myInput: MyInput }} />;
複製代碼

協議上只需指明"ui:widget": "MyInput"，便可使用對應的組件來渲染：

someText: {
  title: "問候",
  type: "string",
  "ui:widget": "myInput"
}
複製代碼

一句話總結，基於 JSON schema 的協議確保了 FR 的規範性，可控組件的模型確保了外層 api 的簡潔和解耦，聯動&自定義組件的 api 確保了對大量複雜的場景的很好支持。

下面就談談小夥伴們最關心的實際使用體感吧。

使用體驗 & 流程

經過使用 schema 編輯器，生成一個表單的流程很是簡單，有興趣的同窗能夠按下面示例在線嘗試一下，體會它的強大性：

使用在線 schema 編輯器搭建表單，導出 schema
將 schema 做爲 props傳入 <FormRender {...schema} />組件（在線 demo中替換 schema.json 文件內容便可）

如上圖，一個簡易的表單開發只須要要 5 分鐘就完成啦。

生態圈介紹

github.com/form-render

proptypes-to-json-schema：是一個方便地將 react 的 props 轉換成 schema 的 npm 包

form-render-snippets：輔助使用者快速和正確地在 vscode 中書寫 schema（商店搜索「formrender」）
可視化 schema 編輯器 做爲上下游建設的核心，目前支持
- 導入導出。現有 schema 的快速調整
- 表單塊存儲功能。定製化需求的快速搭建
- 佈局的自由可視化定製
- 最後，此編輯器也是 FR 的 schema 很好的在線文檔
form-render-widgets：將會做爲具備必定普適性的自定義組件的沉澱中心，這塊做爲開源的一個入口歡迎各位同窗 PR。

場景落地

form-render 的使用者也遍佈了阿里巴巴集團的搭建、配置後臺和投放系統，包括有

飛豬團隊的玩法優惠平臺、互動平臺、搭建、投放、靜態數據平臺、智能頁面生產、頻道管理、模塊生產平臺等，飛豬側小二平臺已經統一使用 form-render 做爲表單開發方案。支持了 2w+玩法活動配置，1w+的頁匠頁面搭建。
阿里雲團隊的開放平臺、ROS 編排平臺
淘寶社區團隊的淘寶洋淘/躺平/閒魚魚塘，船塢投放後臺，社區運營工做臺
淘寶技術部的 智能運營、 互動與搭建、 行業與工做臺、 智能場景等團隊下的資源投放平臺圖靈、魔石平臺模塊可視化，新零售團隊的政務搭投、拍賣頻道配置平臺、全鏈路故障診斷系統、LF 可視化編程平臺等
阿里商旅團隊的數字化運營平臺，商家小二平臺等
阿里人工智能實驗室的精靈頁面搭建平臺
安全智能部中臺的表單配置，Bsearch 後臺管理
亞博科技營銷平臺表單配置等

從各個 bu 的小夥伴也獲得了一些確實解決問題的反饋：

「動態表單這塊從 3 月份上線到如今已經支撐了 100 多個資源位，上千個計劃頁面" 「主要是 FormRender 設計合理，接入方便」「動態表單靈活支撐各類動態配置，這個太靈活了，這塊確實解決不少咱們的業務痛點」

以後規劃

與設計師合做、更加美化的表單展現、更多可用的自定義組件
支持 step、modal、tabs 等複雜且不少用戶訴求的展現模式
簡化開發和參與流程，以自定義組件爲口子鼓勵更多的開源參與者，維護好開源社區
FR 2.0 正在開發中，目前進度 80%（schema 編輯器的內核用的是 FR 2.0 的簡化版）。不只更小更快性能有巨大提高，還支持動態校驗、服務端校驗傳入、全屬性聯動配置等一直的老大難問題
schema 編輯器接入涉及到 schema 配置業務系統（目前已經在和內部靜態數據平臺接入），改變現有手動配置的情況。最終造成將來用戶接入 schema 編輯器 + FR 的最佳實踐。
列表、card、chart 等更多場景的協議生成探索（x-render），以及低代碼搭建的最終實現

Q & A

form-render 和formily的關係是什麼？

相信有很多集團內的同窗想問這個問題。form-render 是 2 年多前，貼合飛豬運營平臺場景，沉澱出的一套表單解決方案，和 formily 算是相對獨立，各自有各自的場景。最近咱們也和 formily 團隊在包括協議和編輯器上進行共建。將來有望提供方便的轉換函數，實現兩側協議的互通。schema 編輯器與集團合做，打算實現統一的 schema 生產工具。

一些資源連接

github： github.com/alibaba/for…
官網： alibaba.github.io/form-render…
在線 demo： alibaba.github.io/form-render…
codeSandbox： codesandbox.io/s/form-rend…
生態圈： github.com/form-render
在線 schema 編輯器： form-render.github.io/schema-gene…

釘釘羣：

Last but not lease

阿里巴巴飛豬部門正在招聘前端，目前咱們在 Serverless 、微前端運營工做臺、端渲染、互動營銷、招選投搭、智能化、體驗技術、數據度量有很多建設，歡迎有能力同窗進來落地技術產生業務價值，想帶人同窗過來直接帶一個方向也是能夠的，歡迎關注飛豬前端團隊公衆號直接聊天聯繫便可！

本文使用 mdnice 排版