分享六款yyds的可視化搭建開源項目
之前我一直在研究低代碼可視化相關的技術和產品, 也主導過很多可視化搭建項目, 主要目的是降低企業研發成本和縮短產品交付周期, 隨著互聯網技術的發展也陸陸續續有很多優秀的技術產品問世, 接下來我就和大家分享幾款非常有價值的可視化搭建項目, 助力企業數字化轉型.
1、Formily——阿里巴巴統一前端表單解決方案
上面我們看到的就是Formily的編輯器的截圖, 它是由阿里技術團隊開發, 完全開源, 我們可以使用它制作自然流布局的表單搭建應用, 如果你是技術人員, 還可以定制自己想要的組件, 目前Formily 已經支持多個組件庫和框架,如下:
- antd
- element
- vant
- next
- semi
所以無論你是react框架開發者還是vue框架開發者, 你都能使用它搭建自己的表單制作平臺.
但是唯一的缺點是對非技術人員不夠友好, 比如它的拖拽是自然流布局, 元素位置不能完全的自由移動, 所以說對于一些定制化或者自由度高的場景來說就不太適用了, 以下是它的架構圖:
項目鏈接: https://github.com/alibaba/designable。
大家感興趣的可以學習參考一下。
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 可視化編輯器做出的頁面是可以直接上線的
項目鏈接: https://github.com/baidu/amis。
大家感興趣的也可以學習參考一下。
3、H5-Dooring——H5頁面搭建神器(人人都可傻瓜式制作頁面)
H5-Dooring 是一款由國內技術大佬開發的專業級可視化低代碼項目, 制作H5頁面可以像搭積木一樣簡單, 輕松搭建H5頁面, H5網站, PC端網站,LowCode平臺。
同時編輯器支持多國語言, 并支持多種渲染模式, 比如智能網格布局, 自由布局, 非常適合非技術人員使用, 10分鐘搭建一個精美頁面, 技術架構如下:
值得注意的是我們在H5-Dooring 上通過可視化搭建的頁面, 能一鍵上線, 并且支持下載頁面代碼, 這樣對于不懂技術的人員, 也能輕松將頁面部署到自己的服務器上, 簡直是非技術人員的福音. 平臺目前還在持續迭代, 打造更好的用戶體驗.
項目鏈接: https://github.com/MrXujiang/h5-Dooring
4、mometa——面向研發的低代碼元編程編輯器
mometa 不是傳統主流的低代碼平臺（如 amis/h5-dooring），mometa 是面向研發的、代碼可視設計編輯平臺；它更像是 dreamweaver、gui 可視編輯之于程序員。
它用于解決的問題有：
- 對低代碼平臺不形成依賴，二次開發可以無縫進入代碼開發模式。
- 同時支持所見即所得的可視編輯，用于提效，提升開發體驗。
- 提供物料生態，可自定義物料，提升物料使用體驗，提升復用率。
mometa 定位更多是 基于程序員本地開發的模式，新增了可視化編碼的能力（修改的也是本地的代碼文件本身）; 它更像是輔助編碼工具，而不是 No-Code (amis/h5-dooring) 的平臺方案。
項目鏈接: https://github.com/imcuttle/mometa。
更多特性介紹:
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 有點相似, 都是技術側搭建項目。
項目鏈接: https://github.com/JakHuang/form-generator。
總結
好啦, 今天的分享就到這啦, 后期會持續分享高價值的使用項目和技術實戰分享。
