GitHub專案分享：6個非常有價值的視覺化建置開源專案

之前我一直在研究低程式碼視覺化相關的技術和產品, 也主導過很多視覺化搭建專案, 主要目的是降低企業研發成本和縮短產品交付週期, 隨著互聯網技術的發展也陸陸續續有很多優秀的技術產品問世, 接下來我就和大家分享幾款非常有價值的可視化搭建項目,協助企業數位轉型.

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中文網其他相關文章！