之前我一直在研究低程式碼視覺化相關的技術和產品, 也主導過很多視覺化搭建專案, 主要目的是降低企業研發成本和縮短產品交付週期, 隨著互聯網技術的發展也陸陸續續有很多優秀的技術產品問世, 接下來我就和大家分享幾款非常有價值的可視化搭建項目,協助企業數位轉型.
1. Formily—阿里巴巴統一前端表單解決方案
上面我們看到的就是Formily的編輯器的截圖, 它是由阿里技術團隊開發, 完全開源, 我們可以使用它製作自然流佈局的表單搭建應用, 如果你是技術人員, 還可以自訂自己想要的元件, 目前Formily 已經支援多個元件庫與框架,如下:
- antd
- element
- vant
- next
- semi
所以無論你是react框架開發者還是vue框架開發者,你都能用它來搭建自己的表單製作平台.
但是唯一的缺點是對非技術人員不夠友善, 例如它的拖曳是自然流佈局, 元素位置不能完全的自由移動, 所以說對於一些定制化或者自由度高的場景來說就不太適用了, 以下是它的架構圖:
##項目連結:
github.com/alibaba/des…
大家有興趣的可以學習參考一下.
2. Amis—百度前端低程式碼框架
amis 是一個低程式碼前端框架，它使用JSON 配置來產生頁面，可以減少頁面開發工作量，極大提升效率。
前端開發正變得越來越複雜，學習門檻也越來越高，要使用當下流行的
UI 元件庫，我們必須懂 npm、 yarn, webpack、react/vue等，必須熟悉ES6 語法，最好還得了解狀態管理，例如 Redux，如果沒接觸過函數式編程，光入門都很費勁，而入門之後會發現它還有巨大的生態，相關的庫有2347 個，很多功能相似，挑選成本高。
為了實現用最簡單方式來產生大部分頁面，
amis 的解決方案是基於JSON 來配置，它的獨特好處是：
- 不需要懂前端：在百度內部，大部分amis
使用者之前從來沒寫過前端頁面，也不會JavaScript，卻能做出專業且複雜的後台介面，這是所有其他前端UI 函式庫都無法做到的；
- 不受前端技術更新的影響：百度內部最老的amis
頁面是6 年多前創建的，至今還在使用，而當年的Angular/Vue/React 版本現在都廢棄了，當年流行的Gulp 也被Webpack 取代了，如果這些頁面不是用amis，現在的維護成本會很高；
- 可以完全使用視覺化頁面編輯器來製作頁面：一般前端視覺化編輯器只能用來做靜態原型，而amis
視覺化編輯器所做的頁面是可以直接上線的
專案連結:
github.com/baidu/amis
大家感興趣的也可以學習參考一下.
3. H5-Dooring——H5頁面搭建神器(人人都可傻瓜式製作頁面)
H5-Dooring 是一款由國內技術大佬開發的專業級可視化低程式碼專案, 製作H5頁面可以像搭積木一樣簡單, 輕鬆建立H5頁面, H5網站, PC端網站,LowCode平台.
同時編輯器
支援多國語言, 並支援多種渲染模式, 例如智慧網格佈局, 自由佈局, 非常適合非技術人員使用, 10分鐘搭建一個精美頁面, 技術架構如下:
值得注意的是我們在H5-Dooring 上透過視覺化建構的頁面, 能一鍵上線, 並且支援下載頁面代碼 , 這樣對於不懂技術的人員, 也能輕鬆將頁面部署到自己的伺服器上, 簡直是非技術人員的福音. 平台目前還在持續迭代, 打造更好的用戶體驗.
專案鏈接: github.com/MrXujiang/h…
#4. mometa－研發導向的低程式碼元程式編輯器
mometa 不是傳統主流的低程式碼平台（如amis/h5-dooring），mometa 是研發的、程式碼視覺設計編輯平台；它更像是dreamweaver、gui 可視編輯之於程式設計師。
它用於解決的問題有：
##對低程式碼平台不形成依賴，二次開發可以無縫進入程式碼開發模式- 同時支援所見即所得的可視編輯，用於提效，提升開發體驗
- 提供物料生態，可自訂物料，提升物料使用體驗，提升復用率
-
mometa 定位更多是基於程式設計師本地開發的模式，新增了視覺化編碼的能力（修改的也是本地的程式碼檔案本身）;
它更像是輔助編碼工具，而不是No-Code (amis/h5-dooring) 的平台方案.
專案連結:
github.com/imcuttle/mo…
更多功能介紹:
5. V6.Dooring－視覺化大螢幕製作工具
說到資料視覺化， 想必大家多多少少稍接觸過， 從技術層面談， 最直觀的就是前端視覺化框架， 例如:
echart- #antv
- Chart.js
- D3.js
- Vega
-
這些函式庫都能幫我們輕鬆製作視覺化圖表。
V6.Dooring 提供了一種設計方案, 可以將不同的可視化圖表通過拖拽的方式整合成一張數字化大屏, 極大的降低了開發成本和周期, 加速企業數字化轉型, 其技術架構如下:
為了實現產品的易用性,
V6.Dooring設計如下幾個核心模組:
拖曳器實作- 物料中心設計
- 動態渲染器實作
- #設定面板設計
- 控制中心
- 功能輔助設計
-
下面是它的編輯器:
#值得注意的是,
V6.Dooring 也是由H5-Dooring 作者主導研發的, 如果大家有興趣可以研究一下.
6. form-generator－基於Element UI表單設計及程式碼產生器
Element UI表單設計及程式碼產生器，可將產生的程式碼直接執行在基於Element的vue 專案中；也可匯出JSON表單，使用配套的解析器將JSON解析成真實的表單。
我覺得它和
Formily 有點相似, 都是技術側搭建專案.
專案連結:
github.com/JakHuang/fo…
總結
好啦, 今天的分享就到這啦, 後期會持續分享高價值的使用項目和技術實戰分享, 如果大家有好的建議也歡迎隨時回饋.
（學習影片分享：
程式設計基礎影片）
#
以上是GitHub專案分享：6個非常有價值的視覺化建置開源專案的詳細內容。更多資訊請關注PHP中文網其他相關文章！
