推薦20個開源的前端低程式碼專案

語言: CN / TW / HK

近幾年,在技術領域低程式碼是比較熱門的話題,比如阿里雲推出了易搭,通過簡單的拖拽、配置,即可完成業務應用的搭建,騰訊雲則是推出了微搭,通過行業化模板、拖放式元件和視覺化配置快速構建多端應用。

低程式碼是基於視覺化和模型驅動理念,結合雲原生與多端體驗技術,它能夠在多數業務場景下實現大幅度的提效降本,為專業開發者提供了一種全新的高生產力開發正規化。下面就來分享幾個值得學習和使用的低程式碼開源專案,更深入地瞭解什麼是低程式碼。

1,Appsmith

Appsmith 是一款開源低程式碼框架,主要用於構建管理面板、內部工具和儀表板等,允許拖放 UI 元件來構建頁面,通過連線到任何 API、資料庫或 GraphQL 源,並使用 JavaScript 語言編寫邏輯,可以在短時間內建立內部應用程式。

Build-UI.gif

專案連結:https://github.com/appsmithorg/appsmith

2,LowCodeEngine

LowCodeEngine 由阿里巴巴釘釘宜搭團隊開發的低程式碼框架,基於阿里雲的雲基礎設施和釘釘的企業數字化作業系統。使用者只需要基於低程式碼引擎便可以快速定製符合自己業務需求的低程式碼平臺。同時LowCodeEngine還提供了很多的基礎元件,可以幫助開發者快速的構建業務頁面。

image.png

專案連結:https://github.com/alibaba/lowcode-demo

3,Amis

Amis 是百度開源的一款前端低程式碼框架,通過 JSON 配置就能生成各種後臺頁面,包括資料獲取、表單提交及驗證等功能,同時,Amis內建 100+ 種 UI 元件,能夠滿足各種頁面元件展現的需求,極大減少開發成本,甚至可以不需要了解前端。

amis 在百度內部得到了廣泛使用,在 4 年多的時間裡建立了 3w 多頁面,從內容稽核到機器管理,從資料分析到模型訓練,amis 滿足了各種各樣的頁面需求。我們可以下載原始碼,然後使用如下的命令來體驗。

```

安裝專案 npm 依賴,在 node 12 下會有報錯但不影響正常使用。

npm i --legacy-peer-deps

啟動專案,等編譯結束後通過 http://127.0.0.1:8888/examples/pages/simple 訪問。

npm start ```

image.png  

專案連結:https://github.com/baidu/amis

4,tmagic-editor

tmagic-editor是一款由騰訊技術中心出品的一款開源低程式碼框架,能夠實現零程式碼/低程式碼生成頁面 , 可以快速搭建視覺化頁面生產平臺,讓非技術人員可以通過拖拽和配置,自助生成H5頁面、PC頁面、TV頁面,大大降低頁面生產成本 。

image.png

專案連結:https://gitee.com/webapp_qsr/tmagic-editor

5,dooring-electron-lowcode

dooring-electron-lowcode是一款功能強大,專業可靠的視覺化頁面配置解決方案,致力於提供一套簡單方便、專業可靠、無限可能的H5落地頁最佳實踐。技術棧以react和typescript為主, 後臺採用nodejs開發, electron作為桌面端基礎方案。

image.png

和它一樣的還有H5-Dooring,H5-Dooring是一款功能強大、專業可靠的H5視覺化頁面配置解決方案,致力於提供一套簡單方便、專業可靠、無限可能的H5落地頁最佳實踐。技術棧以 React 和 TypeScript 為主,後臺採用nodejs開發。除了 H5 版,還提供了 PC 版。

image.png

6,vite-vue3-lowcode

vite-vue3-lowcode 是一款基於Vite2.x + Vue3.x + TypeScript技術框架的的H5 低程式碼平臺。目前只是一個簡單的模板,支援資料配置的匯入和匯出,配置的修改和刪除操作,用到的技術有sandbox 中執行自定義邏輯、monaco-editor 自定義程式碼補全、vue3 createRenderer 自定義渲染器等。

68747470733a2f2f7a332e617831782e636f6d2f323032312f30372f30372f52486642626e2e676966.gif

7,shida

shida是一個影片視覺化搭建專案,開發者可以通過拖拽就可以快速地生產一個短影片,使用方式就像易企秀或百度 H5 等 h5 低程式碼平臺一樣。shida的後端影片合成部分是基於FFCreator進行開發的,FFCreator 是一個基於 node.js 的輕量、靈活的短影片加工庫,只需要新增幾張圖片或影片片段再加一段背景音樂,就可以快速生成一個很酷的影片短片。

demo.gif 專案連結:https://github.com/tnfe/shida

8,quark-h5

quark-h5是一個使用Vue + Koa的前端低程式碼框架,和大多數的前端低程式碼框架一樣,採用的是編輯器生成頁面JSON資料,服務端負責存取JSON資料,渲染時從服務端取資料JSON交給前端模板處理。

image.png

專案連結:https://github.com/huangwei9527/quark-h5

9,gods-pen

碼良是一個線上生成 H5 頁面並提供頁面管理和頁面編輯的平臺,用於快速製作 H5 頁面。使用者無需掌握複雜的程式設計技術,通過簡單拖拽、少量配置即可製作精美的頁面,可用於營銷場景下的頁面製作。同時,也為開發者提供了完備的程式設計接入能力,通過指令碼和元件的形式獲得強大的元件行為和互動控制能力。

image.png

專案連結:https://github.com/ymm-tech/gods-pen

10,luban-h5

魯班H5是基於Vue2.0開發的支援拖拽方式來快速生成頁面的低程式碼平臺,功能基本類似於易企秀、Maka、百度等H5平臺。

image.png

專案連結:https://github.com/ly525/luban-h5

11,mometa

mometa 並不是傳統主流的低程式碼平臺(如 amis),mometa 是面向研發、程式碼可視設計編輯平臺,更像是 dreamweaver、gui的可視編輯 工具。藉助它,我們可以獲得所見即所得的可視編輯開發體驗。

mometa-insert-material.gif  專案連結:https://github.com/imcuttle/mometa

12,h5-factory

h5-factory是專題頁面視覺化編輯工具,可以通過拖拽來設計頁面,並且指出一鍵生成html檔案。

image.png

專案連結:https://github.com/xuhaiqing/h5-factory

13,steedos-platform

steedos-platform是 Salesforce 低程式碼平臺的開源替代方案,使用視覺化工具進行模型設計, 頁面設計, 流程設計, 報表設計,只需點選滑鼠,就能快速建立應用程式,實現敏捷開發的新高度。在技術實現細節上,steedos-platform使用元資料定義物件,欄位,配置,程式碼,邏輯和頁面佈局,並基於這些元資料自動生成系統的資料結構以及Steedos應用程式的使用者介面和自動化邏輯。

image.png

不過,steedos-platform是一整套的低程式碼解決方案,如果需要單獨開發或者部署需要同時具備前後端架構的能力。

專案連結:https://github.com/steedos/steedos-platform/

14,lz-h5-edit

lz-h5-edit是一個H5低程式碼編輯平臺,支援拖拽、縮放、旋轉、動畫、撤銷、重做、組合元素等方式來建立H5頁面。

image.png

專案連結:https://github.com/lzuntalented/lz-h5-edit

15,tefact

星搭開源無程式碼編輯器,使用圖形化介面生成 網站、H5和表單,無需任何程式碼即可生成應用程式。

show.gif

專案連結:https://github.com/staringos/tefact/

16,fast-poster

fast-poster是一款使用Python+Vue開發的通用海報生成器,可以用來快速的生成海報。使用時知需要經過三步即可生成所需要的海報:啟動服務 > 編輯海報 > 生成程式碼。

image.png

專案連結:https://gitee.com/vitojc/fast-poster

17,openDataV

OpenDataV 是一款基於Vue3 + vite + TypeScript開發前端視覺化低程式碼平臺。支援拖拽式、視覺化、低程式碼資料視覺化開發,你可以用它自由的拼接成各種炫酷的大屏,同時支援接入開發者自己開發的元件接入平臺。

2.gif

專案連結:https://github.com/AnsGoo/openDataV

18,mall-cook

Mall-Cook 是一個基於 vue 開發的視覺化商城搭建平臺,包括多頁面視覺化構建、Json Schema 生成器(視覺化搭建物料控制面板),實現元件流水線式標準接入平臺。最新版本使用 uni-app 重構物料、模板專案,支援生成 H5、小程式多端商城。

MallCook-Build.gif

專案連結:https://github.com/wangyuan389/mall-cook

19,form-generator

form-generator是一個基於Element UI表單設計及程式碼生成器,可將生成的程式碼直接執行在基於Element的vue專案中,也可匯出JSON表單,使用配套的解析器將JSON解析成真實的表單。

image.png

專案連結:https://github.com/JakHuang/form-generator

20,vjdesign

vjdesign是一款支援任何 vue 專案中的元件,不需要二次開發就可以定義支援的元件以及元件的屬性,並且對元件的屬性和資料的關係以及表單的互動行為也可以通過設計器配置實現。

image.png

專案連結:https://github.com/fyl080801/vjdesign

除了上面部分開源的低程式碼平臺外,還有很多是不開源的,具體參考下面的連結:https://github.com/taowen/awesome-lowcode

本文正在參加「金石計劃 . 瓜分6萬現金大獎」