如何從零開發一個低代碼平臺,有哪些成熟技術元件可用

如何從零開發一個低代碼平臺,有哪些成熟技術元件可用

目前國內主流的低代碼開發平臺有:宜搭、雲程、簡道雲、明道雲、氚雲、夥伴雲、道一雲、JEPaaS、華炎魔方、搭搭雲、JeecgBoot 、RuoYi等。 這些平臺各有優劣勢,定位也不同,用戶可以根據自己需求選擇。 如果企業想自主可控,從零開發一個低代碼平臺,如何技術選型呢?

低代碼平臺至少包含表單建模、流程設計、報表可視化、代碼生成器、系統管理、前端UI等元件,我們沒必要重新造輪子,市場上已經有大量的成熟元件,選擇合適的元件進行集成和二次開發,即可自主開發一個低代碼平臺。 以下是以java + vue為開發技術的選型參考。

一、流程引擎選型

市場上比較有名的開源流程引擎有osworkflow、jbpm、activiti、flowable、camunda。 其中:Jbpm4、Activiti、Flowable、camunda四個框架同宗同源,祖先都是Jbpm4,開發者只要用過其中一個框架,基本上就會用其它三個。 開發低代碼平臺、OA系統、BPM軟體均需要流程可視化功能,而流程可視化核心是流程引擎和流程設計器,對於市場上如此多的開源流程引擎,哪個功能和性能好,該如何選型呢?

1、Osworkflow

Osworkflow是一個輕量化的流程引擎,基於狀態機機制,資料庫表很少,Osworkflow提供的工作流構成元素有:步驟(step)、條件(conditions)、迴圈(loops)、分支(spilts)、合併(joins)等,但不 支援會簽、跳轉、退回、加簽等這些操作,需要自己擴展開發,有一定難度,如果流程比較簡單,osworkflow是很號的選擇,筆者在2008年給某大型國企集團開發OA系統,就是基於Osworkflow,至今仍穩定運行,性能也很高。 官方網站: opensymphony.com/oswork

2、JBPM

JBPM由JBoss公司開發,目前最高版本JPBM7,不過從JBPM5開始已經跟之前不是同一個產品了,JBPM5的代碼基礎不是JBPM4,而是從Drools Flow重新開始,基於Drools Flow技術在國內市場上用的很少,所有不建議選擇jBPM5以後版本,jBPM4誕生的比較早,後來JBPM4創建者Tom Baeyens離開JBoss後,加入Alfresco後很快推出了新的基於jBPM4的開源工作流系統Activiti, 另外JBPM以hibernate作為數據持久化ORM也已不是主流技術。 筆者在2012年開發某集團BPM平臺時,選擇的就是JBPM4.4版本,也是4系列的最後一個版本,進行了大量的擴展開發,才實現臺灣特色的流程需求。 現在時間節點選擇流程引擎,JBPM不是最佳選擇。 官方網站: jbpm.org/

3、Activiti

activiti由Alfresco軟體開發,目前最高版本activiti 7。 activiti的版本比較複雜,有activiti5、activiti6、activiti7幾個主流版本,選型時讓人暈頭轉向,有必要先瞭解一下activiti這幾個版本的發展歷史。 activiti5和activiti6的核心leader是Tijs Rademakers,由於團隊內部分歧,在2017年時Tijs Rademakers離開團隊,創建了後來的flowable, activiti6以及activiti5代碼已經交接給了Salaboy團隊, activiti6以及activiti5的代碼官方已經暫停維護了, Salaboy團隊目前在開發activiti7框架,activiti7內核使用的還是activiti6,並沒有為引擎注入更多的新特性,只是在activiti之外的上層封裝了一些應用。 結論是activiti謹慎選擇。 官方網站: activiti.org/

4、flowable

flowable基於activiti6衍生出來的版本,flowable目前最新版本是v6.6.0,開發團隊是從activiti中分裂出來的,修復了一眾activiti6的bug,並在其基礎上研發了DMN支援,BPEL支援等等,相對開源版,其商業版的功能會更強大。 以flowable6.4.1版本為分水嶺,大力發展其商業版產品,開源版本維護不及時,部分功能已經不再開源版發佈,比如表單生成器(表單引擎)、歷史數據同步至其他數據源、ES等。 Flowable 是一個使用 Java 編寫的輕量級業務流程引擎,使用 Apache V2 license 協定開源。 2016年10月,Activiti工作流引擎的主要開發者離開Alfresco公司並在Activiti分支基礎上開啟了 Flowable 開源專案。 基於 Activiti v6 beta4 發佈的第一個 Flowable release 版本為6.0。 Flowable 專案中包括 BPMN(Business Process Model and Notation)引擎、CMMN(Case Management Model and Notation)引擎、DMN(Decision Model and Notation)引擎、表單引擎(Form Engine)等模組。 官方網站:flowable.com/open-sourc

5、Camunda

Camunda基於activiti5,所以其保留了PVM,最新版本Camunda7.15,保持每年發佈2個小版本的節奏,開發團隊也是從activiti中分裂出來的,發展軌跡與flowable相似,同時也提供了商業版,不過對於一般企業應用,開源版本也足夠了,詳細見:blog.csdn.net/wxz258/ar。 官方網站:docs.camunda.org/manual。 筆者強烈推薦camunda流程引擎,並在雲程低代碼平臺中使用了camunda,功能和性能表現穩定。

選擇camunda的理由:

(1)通過壓力測試驗證Camunda BPMN引擎性能和穩定性更好。 詳細見:blog.csdn.net/wxz258/ar

(2)功能比較完善,除了BPMN,Camunda還支援企業和社區版本中的CMMN(案例管理)和DMN(決策自動化)。 Camunda不僅帶有引擎,還帶有非常強大的工具,用於建模,任務管理,操作監控和使用者管理,所有這些都是開源的。 詳細見:blog.csdn.net/wxz258/ar

二、流程設計器選型

對於低代碼平臺中的流程可視化,流程設計器是重要的支撐工具,目前市場上比較主流的流程設計器有bpmn-js、mxGraph、Activiti-Modeler、flowable-modeler、easy-flow、bpmn2-modeler外掛程式等。

1、bpmn-js

bpmn-js 是 BPMN 2.0 渲染工具包和 Web 模型。 bpmn-js 正在努力成為 Camunda BPM 的一部分。 bpmn-js 使用 Web 建模工具可以很方便的構建 BPMN 圖表,可以把 BPMN 圖表嵌入到你的專案中,容易擴展。 bpmn-js是基於原生js開發,支援集成到vue、react等開源框架中。

官方網站:bpmn.io/

2、mxGraph

mxGraph是一個強大的JavaScript流程圖前端庫,可以快速創建互動式圖表和圖表應用程式,國內外著名的ProcessOnedraw.io都是使用該庫創建的強大的在線流程圖繪製網站. 由於mxGraph是一個開放的js繪圖開發框架,我們可以開發出很炫的樣式,或者完全按照專案需求定製。 官方網站:jgraph.github.io/mxgrap

3、Activiti-Modeler

Activiti 開源版本中帶了web版流程設計器,在Activiti-explorer專案中有Activiti-Modeler,優點是集成簡單,開發工作量小,缺點是介面不美觀,用戶體驗差。

4、flowable-modeler

flowable開源版本中帶了web版流程設計器,展示風格和功能基本跟Activiti-Modeler一樣,優點是集成簡單,開發工作量小,缺點是介面不美觀,用戶體驗差。

5、easy-flow

碼雲上開源的流程設計器,沒有深入研究,感覺離真正的BPMN流程圖設計差距較大,不過至少有個框架。

gitee.com/xiaoka2017/ea

6、Eclipse外掛程式bpmn2-modeler

C/S版本的流程設計器,如果沒有強調基於瀏覽器設計流程圖,也可以考慮Eclipse外掛程式版流程設計器bpmn2-modeler。 官方位址: eclipse.org/bpmn2-model

結論:推薦大家使用camunda(流程引擎)+bpmn-js(流程設計器)組合,筆者在雲程BPM中實戰驗證,功能比flowable、activiti流程引擎強大,性能和穩定性更好,體驗系統:http://www.yunchengxc.com

三、表單設計器選型

1、form-generator

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

官方位址:gitee.com/mrhj/form-gen

2、vue-form-making

vue-form-making基於 vueelement-ui 實現的可視化表單設計器,使用了最新的前端技術棧,內置了 i18n 國際化解決方案,可以讓表單開發簡單而高效。

gitee.com/gavinzhulei/v

3 、k-form-design

k-form-design設計器布局參考form-generator專案,基於vue和ant-design-vue實現的表單設計器,樣式使用less作為開發語言,主要功能是能通過簡單操作來生成配置表單,生成可保存的JSON數據,並能將JSON還原成表單,使表單開發更簡單更快速

gitee.com/kcz66/k-form-

四、vue框架選型

1、ElementUI

Element,一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫

element.eleme.cn/#

2、Ant Design Vue

螞蟻金服出品,Ant Design 作為一門設計語言面世,經歷過多年的反覆運算和積累,它對UI的設計思想已經成為一套事實標準,受到眾多前端開發者及企業的追捧和喜愛,也是React開發者手中的神兵利器。 希望 ant-design-vue 能夠讓 Vue 開發者也享受到 Ant Design 的優秀設計。

ant-design-vue 是 Ant Design 的 Vue 實現,元件的風格與 Ant Design 保持同步,元件的 html 結構和 css 樣式也保持一致,真正做到了樣式 0 修改,元件 API 也盡量保持了一致。 Ant Design Vue 致力於提供給程式師愉悅的開發體驗。

antdv.com/docs/vue/intr

3、Vue Antd Admin

Ant Design Pro 的 Vue 實現版本,開箱即用的中後台前端/設計解決方案。 開源免費用。

gitee.com/iczer/vue-ant

4、vue-admin-beautiful

採用vue + element-ui 前後端分離開發模式、面向全螢幕尺寸的回應式適配能力(相容電腦、手機、平板),有vue2和vue3兩個版本,分開源版本和付費版,適合正在以及想使用 element-ui/element-plus 開發,前端開發經驗 1 年+,熟悉 Vue.js 技術棧,使用它開發過幾個實際項目的團隊。

官方位址:github.com/chuzhixin/vu

5、Avue.js

Avue.js2.0是基於現有的element-ui庫進行的二次封裝,簡化一些繁瑣的操作,核心理念為數據驅動視圖,主要的元件庫針對table表格和form表單場景,同時衍生出更多企業常用的元件,達到高複用,容易維護和擴展的框架,同時內置了豐富了數據展示元件,讓開發變得更加容易,avue-cli是後台模組。 企業版本收費。

官方網站:https://avuejs.com

五、系統管理元件選型

1、若依RuoYi-Vue

基於SpringBoot,Spring Security,JWT,Vue & Element 的前後端分離許可權管理系統,目前是碼雲開源裡很火的一個框架,優點是提供了系統管理常用的功能,比如:組織管理、角色管理、日誌管理等,設計比較簡單,功能比較聚焦,代碼好讀懂,缺點是電子錶單、流程引擎收費。

gitee.com/y_project/Ruo

2、jeecg-boot

JeecgBoot 是一款基於代碼生成器的 低代码 開發平臺! 前後端分離架構 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,JWT,支援微服務。 優點是提供了組織管理、角色管理、日誌管理等系統管理常用的功能,元件比ruoyi多,涉及面比較廣,代碼生成器功能比較強大,但代碼比ruoyi複雜,完全讀懂可維護有難度,缺點是電子表單、流程引擎收費。

gitee.com/jeecg/jeecg-b

3、OPSLI

該平臺自帶了功能表管理、角色管理、組織機構、租戶管理、字典管理、配置管理、系統設置等系統管理常用模組。

官方位址:demo.opsli.arcinbj.com/#

六、可視化圖表選型

相比於傳統手工定製的圖表與數據儀錶盤,圖表可視化製作平台的出現,可以打破抵消的定製開發, 數據分散的問題,通過數據採集、清洗、分析到直觀實時的數據可視化展現,能夠多方位、多角度、全景展現各項指標,實時監控,動態一目了然。

可視化圖表庫技術選型,目前筆者調研的已知主流可視化庫有:

  • echart 一個基於 JavaScript 的老牌開源可視化圖表庫
  • D3.js 一個數據驅動的可視化庫, 可以不需要其他任何框架獨立運行在現代瀏覽器中,它結合強大的可視化元件來驅動 DOM 操作
  • antv 包含一套完整的可視化元件體系
  • Chart.js 基於 HTML5 的 簡單易用的 JavaScript 圖表庫
  • metrics-graphics 建立在D3之上的可視化庫, 針對可視化和布置時間序列數據進行了優化
  • C3.js 通過包裝構造整個圖表所需的代碼,使生成基於D3的圖表變得容易

我們使用以上任何一個庫都可以實現我們的可視化大屏搭建的需求, 各位可以根據喜好來選擇.

七、其它常用後端技術棧

l Java EE 8+ (軟體構建、運行需要)

l Apache Maven 3.x (軟體構建需要)

l Redis 3.2+ (軟體運行需要)

l nginx 1.20 (Http服務,部署前端需要)

l Mysql 5.7+ (軟體運行需要)

l Spring Boot 2.3.x (主框架)

l Mybatis-plus 3.3.x (持久化)

l Druid 1.1.x(資料庫連接池)

l Apache Shiro 1.7 (許可權)

l JWT 3.7.0 (登錄驗證加密token)

l Quartz 2.3.x(定時任務)

l Easypoi 4.2.x(Excel導入導出)

l Swagger2(在線API)

l Slf4j (日誌介面)

l WebSocket (即時通訊)

l Freemarker 2.3.30 (範本引擎)

l camunda 7.11 (流程引擎)

l minio 4.x (分散式文件存儲)

1 Maven 項目構建依賴管理

Maven 翻譯為"專家"、"內行",是 Apache 下的一個純 Java 開發的開源專案。 基於項目物件模型(縮寫:POM)概念,Maven利用一個中央訊息片斷能管理一個專案的構建、報告和文檔等步驟。

Maven 是一個專案管理工具,可以對 Java 專案進行構建、依賴管理。 本系統採用Maven來管理專案,並且建立的是多模組專案,讓每個模塊獨立,高內聚,低耦合. 不同模組之間保持自己的完整性。 可以互相不干擾. 方便以後的維護開發。

2 Redis 緩存

Redis是一個開源的使用ANSI C語言編寫、遵守BSD協議、支持網路、可基於記憶體亦可持久化的日誌型、Key-Value資料庫,並提供多種語言的API。

它的優點如下:速度快,完全基於記憶體,使用C語言實現,網路層使用epoll解決高併發問題,它的單線程模型避免了不必要的上下文切換及競爭條件。

3 Ngnix Http服務和反向代理服務

什麼是Nginx? Nginx是一個高性能的HTTP和反向代理伺服器,也是一個IMAP/POP3/SMTP這些郵件協定的代理伺服器,高可靠性,支援高併發性,低系統資源消耗性。 簡單來說,當一台伺服器的單位時間內的訪問量越大時,伺服器壓力就越大,大到超過自身承受能力時,伺服器就會崩潰。 為了避免伺服器崩潰,讓使用者有更好的體驗,以可使用Ngnix負載均衡來分擔伺服器壓力。

4 mysql資料庫

MySQL是一個關係型資料庫管理系統,由瑞典MySQL AB 公司開發,屬於 Oracle 旗下產品。 MySQL 是最流行的關係型資料庫管理系統之一,在 WEB 應用方面,MySQL是最好的 RDBMS (Relational Database Management System,關係資料庫管理系統) 應用軟體之一。

MySQL是一種關係型資料庫管理系統,關係資料庫將數據保存在不同的表中,而不是將所有數據放在一個大倉庫內,這樣就增加了速度並提高了靈活性。

MySQL所使用的 SQL 語言是用於存取資料庫的最常用標準化語言。 MySQL 軟體採用了雙授權政策,分為社區版和商業版,由於其體積小、速度快、總體擁有成本低,尤其是開放源碼這一特點,一般中小型網站的開發都選擇 MySQL 作為網站資料庫。

5 SpringBoot框架

SpringBoot是由Pivotal團隊提供的全新框架,其設計目的是用來簡化新Spring應用的初始搭建以及開發過程。 該框架使用了特定的方式來進行配置,從而使開發人員不再需要定義樣板化的配置。 通過這種方式,Spring Boot致力於在蓬勃發展的快速應用開發領域(rapid application development)成為領導者。

SpringBoot的核心就是簡化配置,快速開發,非常符合我們公司的開發理念。 讓開發人員只關心業務的實現而無需擔心開發時繁瑣的配置問題,在搭配上代碼生成器,即使不懂代碼也能開發出自己想要的功能。 SpringBoot框架有很好的拓展性,可以將SpringBoot專案拆分為SpringCloud微服務。

6 Mybatis-Plus 數據持久化框架

Mybatis是當前最火熱的java持久層框架之一,它不僅是一款優秀的持久層框架,還支援定製化 SQL、存儲過程以及高級映射。 Mybatis避免了幾乎所有的JDBC代碼和手動設置參數以及獲取結果集。 Mybatis可以使用簡單的 XML或注解來配置和映射原生訊息,將介面和Java的POJOs(Plain Ordinary Java Object,普通的Java物件)映射成資料庫中的記錄。

Mybatis-Plus 在 Mybatis 的基礎上進行擴展,只做增強不做改變,引入 Mybatis-Plus 不會對您現有的 Mybatis 構架產生任何影響,而且 MP 支援所有 Mybatis 原生的特性。

7 Druid資料庫連接池

Druid是一款開源的JDBC連接池、監控元件。 可以監控資料庫訪問性能,Druid內置提供了一個功能強大的StatFilter外掛程式,能夠詳細統計SQL的執行性能,這對於線上分析資料庫訪問性能有説明。

8 Shiro 許可權控制

Apache Shiro是一個強大且易用的Java安全框架,執行身份驗證、授權、密碼和會話管理。 使用Shiro的易於理解的API,您可以快速、輕鬆地獲得任何應用程式,從最小的移動應用程式到最大的網路和企業應用程式。 使用Shiro可以控制頁面按鈕許可權、功能表訪問許可權、後台服務介面許可權。 在前後端分離架構中,可以和jwt配合使用。

9 JWT 登錄token

Json web token (JWT), 是為了在網路應用環境間傳遞聲明而執行的一種基於JSON的開放標準((RFC 7519).該token被設計為緊湊且安全的,特別適用於分散式網站的單點登錄(SSO)場景。 JWT的聲明一般被用來在身份提供者和服務提供者間傳遞被認證的使用者身份訊息,以便於從資源伺服器獲取資源,也可以增加一些額外的其它業務邏輯所必須的聲明訊息,該token也可直接被用於認證,也可被加密。 在前後端分離架構中,可以和shiro配合使用。

10 Quartz 定時任務

Quartz框架是一個全功能、開源的任務調度服務,可以集成幾乎任何的java應用程式—從小的單片機系統到大型的電子商務系統。 Quartz可以執行上千上萬的任務調度。 雲程平臺集成了任務調度功能,開發了可視化介面,用簡單的操作來實現自己所需要的任務調度。

11 EasyPoi office文檔處理

雲程平臺office文件處理採用了EasyPoi 這個POI 工具類來做檔的快速導入導出,讓一個沒見接觸過poi的人員 就可以方便的寫出Excel匯出,Excel範本導出,Excel導入,Word範本導出,通過簡單的注解和範本 語言(熟悉的表達式語法),完成以前複雜的寫法。 也非常匹配簡單、快速開發的理念。

此外,使用OpenOffice來做文檔的預覽功能,OpenOffice是一個開源辦公套件,它的文件處理可以實現office系列文檔ppt,pptx,xls,xlsx,doc, docx都能夠在線預覽。

12 Swagger2 在線API

Swagger2是一個規範和完整的框架,用於生成、描述、調用和可視化Restful風格的web服務。

現如今,前後端分離已經逐漸成為互聯網專案一種標準的開發方式,前端與後端交給不同的人員開發,但是項目開發中的溝通成本也隨之升高,這部分溝通成本主要在於前端開發人員與後端開發人員對WebAPI介面的溝通,Swagger2 就可以很好地解決,它可以動態生成Api介面文檔,降低溝通成本,促進專案高效開發。 可以使用 Swagger2 +knife4j-ui進行API發佈和管理。

13 Slf4j 日誌介面

Slf4j是一個日誌介面,自己沒有具體實現日誌系統,只提供了一組標準的調用api,這樣將調用和具體的日誌實現分離,使用Slf4j后有利於根據自己實際的需求更換具體的日誌系統。

比如,之前使用的具體的日誌系統為log4j,想更換為logback時,只需要刪除log4j相關的jar,然後加入logback相關的jar和日誌配置檔即可,而不需要改動具體的日誌輸出方法,試想如果沒有採用這種方式,當你的系統中日誌輸出有成千上萬條時,你要更換日誌系統將是多麼龐大的一項工程。

如果你開發的是一個面向公眾使用的元件或公共服務模組,那麼一定要使用Slf4j的這種形式,這有利於別人在調用你的模組時保持和他系統中使用統一的日誌輸出。

14 WebSocket 即時通訊

雲程平臺即時通訊採用WebSocket協定,它是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協定。 簡單來說,使用WebSocket使得用戶端和伺服器之間的數據交換變得更加簡單,並且能有效節約伺服器資源和頻寬。 WebSocket也為本系統在web端、app端、小程式端、H5端都實現了消息即時互通,即時推送功能。

15 Freemarker範本引擎

FreeMarker 是一款範本引擎: 即一種基於範本和要改變的數據, 並用來生成輸出文字(HTML網頁,電子郵件,配置檔,原始程式碼等)的通用工具。 它不是面向最終使用者的,而是一個Java類庫,是一款程式師可以嵌入他們所開發產品的元件。 範本編寫為FreeMarker Template Language (FTL)。

低代碼平臺可以採用Freemarker範本引擎來進行代碼生成器範本的開發,集成了前後端範本,支援全頁面操作生成自己想要的功能,包括單表的增刪改查,多表關聯的開發,還有工作流程表單的開發以及移動端的介面功能生成。 有效降低軟體開發投入成本,使開發變得簡單。

16 camunda流程引擎

Camunda流程引擎分社區版和企業版,社區版實際上是開源版,是Apache2.0協議,企業版實際上是商業收費版本,需要購買授權才能使用。 Camunda是一個基於Java的框架,支持用於工作流和流程自動化的BPMN、用於案例管理的CMMN和用於業務決策管理的DMN。 Camunda包括了流程設計器(Modeler)、流程引擎(Engine)、API介面(REST/Java API)、任務清單(TaskList)、流程管理控制台(Cockpit)、系統管理工具(Admin)。 在Camunda商業產品中還包括了流程監控預警工具(Optimize)、流程協同設計工具(Cawemo)。 Camunda流程設計器,支援兩種模式,一種是富用戶端的流程建模工具Camunda Modeler,需要在用戶端安裝;另一種是基於瀏覽器的流程設計器bpmn.io,這兩款軟體均開源。 雲程平臺沒有重複發明輪子,對業界主流的開源流程引擎osworkflow、jbpm、activiti、flowable、camunda等進行了對比驗證,發現camunda在功能和性能方面都比較優秀,最終選擇了camunda流程引擎。

詳細參考:blog.csdn.net/wxz258/ar

17 minio 分散式文件存儲

Minio是一個開源的物件存儲服務元件,非常適合存儲大量非結構後的數據,比如圖片、視頻、文檔等。 Minio相容Amason的S3分散式物件存儲專案,採用Golang實現,客戶端支援Java,Python,Javacript, Golang語言。 對於中小型企業,如果不選擇存儲上雲,那麼 Minio 是個不錯的選擇,麻雀雖小,五臟俱全。 當然 Minio 除了直接作為物件存儲使用,還可以作為雲上物件存儲服務的閘道層,無縫對接到 Amazon S3、MicroSoft Azure。

八、其它常用前端技術棧

l vue 2.6.x (vue主框架)

l ant-design-vue 1.7.x (vue元件)

l less 3.9.x (css管理工具)

l Webpack 4.x (前端工程構建打包)

l Node 8.9.x (前端工程開發運行環境)

l Npm 3.x (前端工程包管理員)

l Yarn (前端工程包管理員)

l AntV (圖表元件)

l Vant 2.11.x(移動端框架)

l Uni-app (小程式框架)

1 Vue框架

Vue.js是一套構建使用者介面的漸進式框架。 與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。 Vue的核心庫只關注視圖層,並且非常容易學習,非常容易與其它庫或已有專案整合。 另一方面,Vue 完全有能力驅動採用單檔元件和Vue生態系統支援的庫開發的複雜單頁應用。

cn.vuejs.org/

2 Ant Design Vue

Ant Design Vue 是使用 Vue 實現的遵循 Ant Design 設計規範的高品質 UI 元件庫,用於開發和服務於企業級中後台產品。

antdv.com/docs/vue/intr

3 less css管理工具

Less 是一門 CSS 預處理語言,它擴展了 CSS 語言,增加了變數、Mixin、函數等特性,使 CSS 更易維護和擴展。 Less 可以運行在 Node 或瀏覽器端。

lesscss.cn/

4 Webpack 前端構建工具

Webpack 是一個前端資源載入和打包工具。 所謂的模組就是在平時的前端開發中,用到一些靜態資源,如JavaScript、CSS、圖片等檔,webpack就將這些靜態資源文件稱之為模組。 webpack支援AMD和CommonJS,以及其他的一些模塊系統,並且相容多種JS書寫規範,可以處理模組間的依賴關係,所以具有更強大的JS模組化的功能,它能對靜態資源進行統一的管理以及打包發佈。

5 Node.js 前端開發運行環境

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。 Node.js 的包管理器 npm,是全球最大的開源庫生態系統。 Vue開發需要安裝node環境。

nodejs.cn/

6 npm js包管理器

npm 為你和你的團隊打開了連接整個 JavaScript 天才世界的一扇大門。 它是世界上最大的軟體註冊表,每星期大約有 30 億次的下載量,包含超過 600000 個 包(package) (即,代碼模組)。 來自各大洲的開源軟體開發者使用 npm 互相分享和借鑒。 包的結構使您能夠輕鬆跟蹤依賴項和版本。

npmjs.cn/

7 yarn js包管理器

Yarn就是一個類似於npm的包管理工具,它是由facebook推出並開源。
與npm相比,yarn有著眾多的優勢,主要的優勢在於:速度快、離線模式、版本控制。

npm用下來比較強的一個痛點就是:當包的依賴層次比較深時,版本控制不夠精確。 會出現相同package.json,但不同人的電腦上安裝出不同版本的依賴包,出現類似我的電腦上可以運行,別的電腦上不行的bug很難查找。 可以使用npm-shrinkwrap來實現版本固化,版本訊息會寫入 npm-shrinkwrap.json檔中,但它畢竟不是npm的標準配置。

yarn天生就能實現版本固化。 會生成一個類似npm-shrinkwrap.json的yarn.lock檔,而檔內會描述包自身的版本號,還會鎖定所有它依賴的包的版本號,yarn.lock存儲著每個包的確切依賴版本,能確保從本地開發到生產環境,所有機器上都有精確相同的依賴版本。

8 AntV 數據可視化元件

AntV 是一個數據可視化專案,也是一個團隊,螞蟻金服數據可視化團隊,一群有愛有夢的人,懷揣「讓人們在數據世界里獲得視覺化思考能力」的夢想前行, 希望成就智慧時代全球領先的數據可視化解決方案,滿足與日俱增的數據洞察需求。
AntV 目前覆蓋了統計圖表、移動端圖表、圖可視化、地理可視化、2D 繪圖引擎和智慧可視化多個領域,主要包含 G2、G6、F2、L7 以及一套完整的圖表使用和設計規範。 得益於豐富的業務場景和使用者需求挑戰,AntV 經歷多年積累與不斷打磨,已支撐起阿裡集團內外 20000+ 業務系統,通過了日均千萬級 UV 產品的嚴苛考驗,是阿裡經濟體數據可視化最重要的基礎設施。

gitee.com/antv

9 uni-app 小程序開發框架

uni-app 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼,可發佈到iOS、Android、H5、以及各種小程式(微信/支付寶/百度/頭條/QQ/釘釘/淘寶)、快應用等多個平臺。

10 Vant h5開發框架

Vant 是讚前端團隊維護的移動端元件庫,提供了一整套 UI 基礎元件和業務元件。 輕量、可靠的移動端 Vue 元件庫,採用 MIT 開源協定, 目前github star 數9k+,是有讚的一套開源元件庫。 通過 Vant,可以快速搭建出風格統一的頁面,提升開發效率。 目前已有近 60+ 個元件,這些元件被廣泛使用於有讚的各個行動端業務中。 缺點是不支援小程式。

九、總結

自主開發低代碼平臺的難點是技術元件眾多,如何掌握並有效集成是難點,尤其是流程引擎和表單引擎技術難度較大,沒有從事過BPM開發的團隊很難搞定,開發失敗的風險比較大。 更合理的捷徑是採購市場上成熟的低代碼平臺源碼,再進行二次開發完善,難度和風險比從頭自主開發小很多。

雲程是一款基於SpringBoot+VUE的雲原生低代碼開發平臺。 採用微服務、前後端分離架構,基於可視化流程建模、表單建模、報表建模工具,零代碼快速構建雲端業務應用 ,平臺即可當地語系化部署,也可基於K8S雲原生部署。 雲程平臺也是一款專業的BPM軟體,即可獨立部署,支撐企業級端到端流程落地,也可嵌入到您的OA、ERP等系統中,作為流程引擎元件使用。

體驗環境:雲端程低代碼平台體驗環境 yunchengxc.com

雲程平臺研發團隊核心成員有10年以上的軟體研發經驗,聚焦於低代碼平臺和流程引擎等中間件產品研發,可交付原始碼,也可定製開發。

What do you think?

Written by marketer

低代碼不是行業毒瘤,你才是!

程式員在大廠和小廠做代碼開發,區別有多大