導(dǎo)語: 低代碼(lowcode)平臺是近兩年討論比較火熱的話題，其通過自動代碼生成和可視化編程，使得使用者只需要編寫少量代碼，即可快速搭建各種應(yīng)用，滿足了很多技術(shù)和非技術(shù)人員的需求。最近作者也一直在研究低代碼相關(guān)的產(chǎn)品設(shè)計(jì)和技術(shù)方案，持續(xù)完善可視化編輯器H5-Dooring。接下來將圍繞低代碼平臺以及數(shù)據(jù)源設(shè)計(jì)來展開分析, 希望對大家有所幫助.

低代碼平臺解決的問題

低代碼平臺屬于APaaS（應(yīng)用平臺即服務(wù)），其解決的是企業(yè)內(nèi)部應(yīng)用協(xié)調(diào)和人效成本的問題. 隨著計(jì)算機(jī)技術(shù)諸如云服務(wù)等的發(fā)展, 傳統(tǒng)軟件服務(wù)已無法滿足數(shù)字化浪潮的壓力, 筆者對企業(yè)迫切需要解決的問題做了如下總結(jié):

• 企業(yè)數(shù)據(jù)孤島(應(yīng)用間數(shù)據(jù)共享,互通困難)
• 企業(yè)定制化需求日益增加(不同行業(yè)賦能不同的應(yīng)用場景, 千“客”千面)
• IT人才供不應(yīng)求
• 溝通成本,研發(fā)成本, 研發(fā)周期吃緊
• 產(chǎn)品迭代和響應(yīng)性遲緩

所以我們迫切需要諸如低代碼/零代碼這樣的方案, 來解決上述問題.

當(dāng)然lowcode平臺很早就已經(jīng)出現(xiàn)了, 國外的西門子(SAP), 微軟, 谷歌已經(jīng)有非常成熟的方案, 國內(nèi)也不在少數(shù), 但是形成跨行業(yè)通用解決方案, 還有很長的路要走(比如如何解決國內(nèi)各大平臺的小程序搭建化).

其基本流程如下:

image.png

數(shù)據(jù)源

上面介紹了低代碼的基本概念和解決的痛點(diǎn), 下面我們繼續(xù)分析一下低代碼的組成和數(shù)據(jù)源設(shè)計(jì).

低代碼基本包含如下部分:

• 用戶端編輯器
• 管理終端
  • 數(shù)據(jù)源
  • 頁面(應(yīng)用)管理
  • 模版管理
  • 組件管理
  • 資源庫管理(圖片, 字體, 自有sdk, 插件等)
  • 角色管理(非必需)

如下圖所示:

image.png

用戶端編輯器部分主要是設(shè)計(jì)拖拽, 組件渲染相關(guān)的技術(shù)基建, 這部分筆者在這之前文章中也做過大量分享, 比如智能網(wǎng)格布局拖拽模式, 自然流拖拽搭建模式, 自由布局模式等. 詳細(xì)可參考源碼:

• H5-Dooring | 智能網(wǎng)格拖拽搭建平臺
• H5-Stream | 自然流排序搭建平臺
• V6.Dooring | 自由布局可視化搭建平臺

本文的重心在數(shù)據(jù)源設(shè)計(jì), 接下來我們開始數(shù)據(jù)源的分析.

什么是數(shù)據(jù)源呢? 筆者的理解就是 數(shù)據(jù)的來源，是提供某種所需要數(shù)據(jù)的母體。在數(shù)據(jù)源中存儲了所有建立數(shù)據(jù)庫連接的信息, 通過提供正確的數(shù)據(jù)源名稱，我們可以找到相應(yīng)的數(shù)據(jù)資產(chǎn)。

image.png

低代碼的產(chǎn)物, 有純靜態(tài)的頁面, 也有需要對接動態(tài)數(shù)據(jù)的動態(tài)頁面, 低代碼平臺的數(shù)據(jù)源主要就是為動態(tài)頁面(業(yè)務(wù)系統(tǒng))設(shè)計(jì)的. 低代碼平臺使用人員可以選擇或者創(chuàng)建數(shù)據(jù)源, 變量, 函數(shù), 自定義事件等來供頁面和組件實(shí)現(xiàn)數(shù)據(jù)對接和頁面交互, 通過這種方式可以進(jìn)一步降低數(shù)據(jù)對接復(fù)雜度并提高研發(fā)效能.

image.png

對于數(shù)據(jù)源的設(shè)計(jì), 根據(jù)實(shí)際的業(yè)務(wù)需求, 我們可以分為靜態(tài)數(shù)據(jù)源和動態(tài)數(shù)據(jù)源. 靜態(tài)數(shù)據(jù)源是用戶可以通過可視化的方式在低代碼平臺上創(chuàng)建的, 比如編輯數(shù)據(jù)表格等.

image.png

動態(tài)數(shù)據(jù)源是指用戶可以自定義的請求第三方的數(shù)據(jù)服務(wù), 組件消費(fèi)數(shù)據(jù)源完全是動態(tài)調(diào)用的, 類似于我們傳統(tǒng)開發(fā)時使用的ajax請求.

image.png

基于以上的概念, 我來帶大家介紹一下

H5-Dooring的數(shù)據(jù)源實(shí)現(xiàn).

image.png

數(shù)據(jù)源編輯界面:

image.png

首先Dooring的每個用戶都有獨(dú)立的數(shù)據(jù)源倉庫, 可以配置不同的數(shù)據(jù)源供組件消費(fèi), 數(shù)據(jù)源會保存在對應(yīng)的用戶下, 用戶可以讓不同的頁面/組件消費(fèi)數(shù)據(jù)源.如下:

[數(shù)據(jù)源模式]

1. 靜態(tài)數(shù)據(jù)源實(shí)現(xiàn)

靜態(tài)數(shù)據(jù)源即用戶在平臺自己創(chuàng)建的數(shù)據(jù)源, 我們將此類數(shù)據(jù)源存放在公共狀態(tài)中讓組件消費(fèi), 比如redux或者vuex中, 同時對其進(jìn)行數(shù)據(jù)庫存儲. 具體流程如下:

image.png

從代碼層面, 我們只需要把從服務(wù)器獲取的靜態(tài)數(shù)據(jù)源, 存儲到客戶端全局狀態(tài)中, 對于用戶自己創(chuàng)建的數(shù)據(jù)源, 我們提供數(shù)據(jù)庫的CURD操作即可.
如下圖:

image.png

2. 動態(tài)數(shù)據(jù)源

動態(tài)數(shù)據(jù)源設(shè)計(jì)需要一套組件數(shù)據(jù)協(xié)定, 需要約定第三方接口遵循低代碼平臺數(shù)據(jù)規(guī)范來返回?cái)?shù)據(jù), 后者手動通過編程的模式來對應(yīng)字段和組件數(shù)據(jù)的映射關(guān)系.

image.png

具體方案類似于我在可視化組件中實(shí)現(xiàn)的第三方數(shù)據(jù)接入的方案:

image.png

這樣, 組件既可以消費(fèi)靜態(tài)數(shù)據(jù), 也可以動態(tài)加載第三方數(shù)據(jù), 進(jìn)而實(shí)現(xiàn)了低代碼動態(tài)頁面的搭建.

最后

最近H5-Dooring可視化搭建平臺也在持續(xù)推迭代, 數(shù)據(jù)源已基本搭建完成, 后續(xù)還會按照更智能化的方向. 一下即是最近的更新日志:

1. 優(yōu)化編輯器加載性能
2. iframe容器組件添加邊框等屬性
3. 富文本組件添加背景色配置
4. 修復(fù)真機(jī)預(yù)覽時空數(shù)據(jù)還能顯示二維碼bug
5. 優(yōu)化頁面高度適配問題, 添加高度適配器
6. 優(yōu)化組件交互時空鏈接點(diǎn)擊出現(xiàn)message bug
7. 更新dooring文檔

國內(nèi)lowcode平臺仍然有很長的路要走, 期待大家一起努力??!

github地址: H5-Dooring可視化搭建平臺

更多 低代碼 / 可視化 相關(guān)的技術(shù)分享和實(shí)現(xiàn), 歡迎 搜 趣談前端 學(xué)習(xí)探索.