之前我一直在研究低代碼可視化相關(guān)的技術(shù)和產(chǎn)品, 也主導(dǎo)過(guò)很多可視化搭建項(xiàng)目, 主要目的是降低企業(yè)研發(fā)成本和縮短產(chǎn)品交付周期, 隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展也陸陸續(xù)續(xù)有很多優(yōu)秀的技術(shù)產(chǎn)品問(wèn)世, 接下來(lái)我就和大家分享幾款非常有價(jià)值的可視化搭建項(xiàng)目, 助力企業(yè)數(shù)字化轉(zhuǎn)型.

(相關(guān)資料圖)

1. Formily——阿里巴巴統(tǒng)一前端表單解決方案

上面我們看到的就是Formily的編輯器的截圖, 它是由阿里技術(shù)團(tuán)隊(duì)開發(fā), 完全開源, 我們可以使用它制作自然流布局的表單搭建應(yīng)用, 如果你是技術(shù)人員, 還可以定制自己想要的組件, 目前Formily已經(jīng)支持多個(gè)組件庫(kù)和框架,如下:

antdelementvantnextsemi

所以無(wú)論你是react框架開發(fā)者還是vue框架開發(fā)者, 你都能使用它搭建自己的表單制作平臺(tái).

但是唯一的缺點(diǎn)是對(duì)非技術(shù)人員不夠友好, 比如它的拖拽是自然流布局, 元素位置不能完全的自由移動(dòng), 所以說(shuō)對(duì)于一些定制化或者自由度高的場(chǎng)景來(lái)說(shuō)就不太適用了, 以下是它的架構(gòu)圖:

項(xiàng)目鏈接: github.com/alibaba/des…

大家感興趣的可以學(xué)習(xí)參考一下.

2. Amis——百度前端低代碼框架

amis是一個(gè)低代碼前端框架，它使用 JSON配置來(lái)生成頁(yè)面，可以減少頁(yè)面開發(fā)工作量，極大提升效率。

前端開發(fā)正變得越來(lái)越復(fù)雜，學(xué)習(xí)門檻也越來(lái)越高，要使用當(dāng)下流行的 UI組件庫(kù)，我們必須懂 npm、yarn, webpack、react/vue等，必須熟悉 ES6語(yǔ)法，最好還得了解狀態(tài)管理，比如 Redux，如果沒(méi)接觸過(guò)函數(shù)式編程，光入門都很費(fèi)勁，而入門之后會(huì)發(fā)現(xiàn)它還有巨大的生態(tài)，相關(guān)的庫(kù)有 2347個(gè)，很多功能相似，挑選成本高。

為了實(shí)現(xiàn)用最簡(jiǎn)單方式來(lái)生成大部分頁(yè)面，amis的解決方案是基于 JSON來(lái)配置，它的獨(dú)特好處是：

不需要懂前端：在百度內(nèi)部，大部分 amis用戶之前從來(lái)沒(méi)寫過(guò)前端頁(yè)面，也不會(huì) JavaScript，卻能做出專業(yè)且復(fù)雜的后臺(tái)界面，這是所有其他前端 UI庫(kù)都無(wú)法做到的；不受前端技術(shù)更新的影響：百度內(nèi)部最老的 amis頁(yè)面是 6 年多前創(chuàng)建的，至今還在使用，而當(dāng)年的 Angular/Vue/React版本現(xiàn)在都廢棄了，當(dāng)年流行的 Gulp也被 Webpack取代了，如果這些頁(yè)面不是用 amis，現(xiàn)在的維護(hù)成本會(huì)很高；可以完全使用可視化頁(yè)面編輯器來(lái)制作頁(yè)面：一般前端可視化編輯器只能用來(lái)做靜態(tài)原型，而 amis可視化編輯器做出的頁(yè)面是可以直接上線的

項(xiàng)目鏈接: github.com/baidu/amis

大家感興趣的也可以學(xué)習(xí)參考一下.

3. H5-Dooring——H5頁(yè)面搭建神器(人人都可傻瓜式制作頁(yè)面)

H5-Dooring是一款由國(guó)內(nèi)技術(shù)大佬開發(fā)的專業(yè)級(jí)可視化低代碼項(xiàng)目, 制作H5頁(yè)面可以像搭積木一樣簡(jiǎn)單, 輕松搭建H5頁(yè)面, H5網(wǎng)站, PC端網(wǎng)站,LowCode平臺(tái).

同時(shí)編輯器支持多國(guó)語(yǔ)言, 并支持多種渲染模式, 比如智能網(wǎng)格布局, 自由布局, 非常適合非技術(shù)人員使用, 10分鐘搭建一個(gè)精美頁(yè)面, 技術(shù)架構(gòu)如下:

值得注意的是我們?cè)?strong>H5-Dooring上通過(guò)可視化搭建的頁(yè)面, 能一鍵上線, 并且支持下載頁(yè)面代碼, 這樣對(duì)于不懂技術(shù)的人員, 也能輕松將頁(yè)面部署到自己的服務(wù)器上, 簡(jiǎn)直是非技術(shù)人員的福音. 平臺(tái)目前還在持續(xù)迭代, 打造更好的用戶體驗(yàn).

項(xiàng)目鏈接: github.com/MrXujiang/h…

4. mometa——面向研發(fā)的低代碼元編程編輯器

mometa不是傳統(tǒng)主流的低代碼平臺(tái)（如 amis/h5-dooring），mometa是面向研發(fā)的、代碼可視設(shè)計(jì)編輯平臺(tái)；它更像是 dreamweaver、gui可視編輯之于程序員。

它用于解決的問(wèn)題有：

對(duì)低代碼平臺(tái)不形成依賴，二次開發(fā)可以無(wú)縫進(jìn)入代碼開發(fā)模式同時(shí)支持所見(jiàn)即所得的可視編輯，用于提效，提升開發(fā)體驗(yàn)提供物料生態(tài)，可自定義物料，提升物料使用體驗(yàn)，提升復(fù)用率

mometa定位更多是 基于程序員本地開發(fā)的模式，新增了可視化編碼的能力（修改的也是本地的代碼文件本身）;它更像是輔助編碼工具，而不是 No-Code(amis/h5-dooring) 的平臺(tái)方案.

項(xiàng)目鏈接: github.com/imcuttle/mo…

更多特性介紹:

5. V6.Dooring——可視化大屏制作工具

說(shuō)到數(shù)據(jù)可視化， 想必大家多多少少稍接觸過(guò)， 從技術(shù)層面談， 最直觀的就是前端可視化框架， 比如:

echartantvChart.jsD3.jsVega

這些庫(kù)都能幫我們輕松制作可視化圖表。V6.Dooring提供了一種設(shè)計(jì)方案, 可以將不同的可視化圖表通過(guò)拖拽的方式整合成一張數(shù)字化大屏, 極大的降低了開發(fā)成本和周期, 加速企業(yè)數(shù)字化轉(zhuǎn)型, 其技術(shù)架構(gòu)如下:

為了實(shí)現(xiàn)產(chǎn)品的易用性, V6.Dooring設(shè)計(jì)了如下幾個(gè)核心模塊:

拖拽器實(shí)現(xiàn)物料中心設(shè)計(jì)動(dòng)態(tài)渲染器實(shí)現(xiàn)配置面板設(shè)計(jì)控制中心功能輔助設(shè)計(jì)

下面是它的編輯器:

值得注意的是, V6.Dooring也是由 H5-Dooring作者主導(dǎo)研發(fā)的, 如果大家感興趣可以研究一下.

6. form-generator——基于Element UI表單設(shè)計(jì)及代碼生成器

Element UI表單設(shè)計(jì)及代碼生成器，可將生成的代碼直接運(yùn)行在基于Element的vue項(xiàng)目中；也可導(dǎo)出JSON表單，使用配套的解析器將JSON解析成真實(shí)的表單。

我覺(jué)得它和 Formily有點(diǎn)相似, 都是技術(shù)側(cè)搭建項(xiàng)目.

項(xiàng)目鏈接: github.com/JakHuang/fo…

總結(jié)

好啦, 今天的分享就到這啦, 后期會(huì)持續(xù)分享高價(jià)值的使用項(xiàng)目和技術(shù)實(shí)戰(zhàn)分享, 如果大家有好的建議也歡迎隨時(shí)反饋.

（學(xué)習(xí)視頻分享：編程基礎(chǔ)視頻）

以上就是GitHub項(xiàng)目分享：6款非常有價(jià)值的可視化搭建開源項(xiàng)目的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞：