[[405792]]

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

低代碼平臺(tái)解決的問題

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

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

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

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

其基本流程如下:

數(shù)據(jù)源

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

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

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

如下圖所示:

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

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

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

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

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

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

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

基于以上的概念, 我來帶大家介紹一下H5-Dooring的數(shù)據(jù)源實(shí)現(xiàn).

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

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

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

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

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

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

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

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

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

最后

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

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