Dooring-Saas低代碼技術(shù)詳解

技術(shù) 2023-08-06 23:25

聲明：該文章來(lái)自（趣談前端）版權(quán)由原作者所有，K2OS渲染引擎提供網(wǎng)頁(yè)加速服務(wù)。

hello, 大家好, 我是徐小夕, 今天和大家分享一下基于?H5-Dooring零代碼?開(kāi)發(fā)的全新零代碼搭建平臺(tái)?Dooring-Saas?的技術(shù)架構(gòu)和設(shè)計(jì)實(shí)現(xiàn)思路.

背景介紹

3年前我上線了第一版自研零代碼引擎?H5-Dooring, 至今已迭代了?300?多個(gè)版本, 主要目的是快速且批量化的生產(chǎn)業(yè)務(wù)/營(yíng)銷過(guò)程中的復(fù)用頁(yè)面, 遠(yuǎn)離?curd?循環(huán). 比如我們?cè)谘邪l(fā)中常遇到的:

H5可復(fù)用的業(yè)務(wù)模版頁(yè)面通用能力封裝頁(yè)面搭建上的靈活性和復(fù)用性通用業(yè)務(wù)組件庫(kù)動(dòng)態(tài)表單復(fù)用性圖表庫(kù)復(fù)用性

等問(wèn)題, 為了實(shí)現(xiàn)這一目標(biāo), 需要系統(tǒng)的針對(duì)這些問(wèn)題進(jìn)行產(chǎn)品設(shè)計(jì), 當(dāng)時(shí)就想到了通過(guò)低代碼的模式來(lái)解決. 也就有了我們?cè)?github?看到的解決方案:?H5-Dooring 開(kāi)源項(xiàng)目.

當(dāng)時(shí)做了一個(gè)3年的規(guī)劃, 沒(méi)想到3年這么快就到了.

取得的一些成績(jī)

github star : 7.8k+線上累計(jì)注冊(cè)用戶: 10000+線上頁(yè)面總數(shù): 5000+模版總數(shù): 1000+組件總數(shù): 45+(持續(xù)生產(chǎn)中)

同時(shí)為了讓技術(shù)小伙伴更好的研究學(xué)習(xí)低代碼和零代碼, 我在掘金和趣談前端公眾號(hào)里也寫了10多篇低代碼的實(shí)現(xiàn)原理的文章, 后續(xù)也會(huì)隨著產(chǎn)品不斷迭代持續(xù)分享最新的技術(shù)實(shí)現(xiàn)

接下來(lái)我會(huì)從編輯器設(shè)計(jì)架構(gòu)產(chǎn)品設(shè)計(jì)思路入口工程設(shè)計(jì)架構(gòu)服務(wù)端技術(shù)思考這幾個(gè)方面, 來(lái)和大家詳細(xì)介紹一下?Dooring-Saas?這款開(kāi)箱即用的零代碼搭建平臺(tái).

編輯器相關(guān)

Dooring-Saas 是一款功能強(qiáng)大，高可擴(kuò)展的零代碼解決方案，致力于提供一套簡(jiǎn)單方便、專業(yè)可靠、無(wú)限可能的頁(yè)面可視化搭建最佳實(shí)踐。

功能特點(diǎn)

可擴(kuò)展， Dooring 實(shí)現(xiàn)了較為完整的業(yè)務(wù)閉環(huán)，并使其模塊化，編輯器內(nèi)部功能接口也全部可以對(duì)接不同服務(wù)端語(yǔ)言，實(shí)現(xiàn)了標(biāo)準(zhǔn)化接口。此外還支持自定義組件，二次開(kāi)發(fā)，設(shè)計(jì)模板等能力，以滿足功能和跨領(lǐng)域的分層需求。
開(kāi)箱即用， Dooring 內(nèi)置了表單渲染器、頁(yè)面渲染器、動(dòng)態(tài)加載內(nèi)核等，僅需一套源碼即可上手開(kāi)發(fā)。并且還提供針對(duì) React 的定制插件，內(nèi)涵豐富的功能，可滿足日常 30%-60%的頁(yè)面制作需求。
大量自研，包含整個(gè)編輯器架構(gòu)、組件設(shè)計(jì)、文檔、請(qǐng)求庫(kù)封裝，后臺(tái)管理系統(tǒng)等，滿足日常項(xiàng)目的周邊需求。
與時(shí)俱進(jìn)，在滿足需求的同時(shí)，我們也不會(huì)停止對(duì)新技術(shù)的探索。比如更多營(yíng)銷組件, 可視化組件, 功能組件等等。

搭建協(xié)議設(shè)計(jì)Dooring

可編輯組件 Schema 設(shè)計(jì)

Schema 分兩部分:

editData 組件可編輯屬性的數(shù)組
config 組件真正消費(fèi)的數(shù)據(jù)

editData 詳解

editData?是組件屬性可編輯項(xiàng)的數(shù)組, 每一項(xiàng)里面包含了如下字段:

key 屬性名
name: 屬性名的中文顯示
type: 屬性的可編輯類型
isCrop(可選)
cropRate(可選)
range(type 為'Radio'或'Select'時(shí)的選項(xiàng)數(shù)組)
后期可能會(huì)擴(kuò)展(詳細(xì)結(jié)構(gòu)可參考Dooring 開(kāi)源版本)

key和name?都可以按照組件屬性的語(yǔ)義來(lái)定, 這里值得一提的是?type. 不同屬性的值類型不同, 所以我們編輯項(xiàng)的?type?也不同, 所有的類型如下:

Upload 上傳組件
Text 文本框
RichText 富文本
TextArea 多行文本
Number 數(shù)字輸入框
DataList 列表編輯器
FileList 文件列表編輯器
InteractionData 交互設(shè)置
Color 顏色面板
MutiText 多文本
Select 選擇下拉框
Radio 單選框
Switch 開(kāi)關(guān)切換
CardPicker 卡片面板
Table 表格編輯器
Pos 坐標(biāo)編輯器
FormItems 表單設(shè)計(jì)器

更詳細(xì)的代碼可以參考私有化部署版的editor/src/core/FormComponents?目錄.

config 詳解

config?本質(zhì)上是一個(gè)對(duì)象, 也就是組件所能暴露出來(lái)的屬性集合, 和?editData?數(shù)組每一項(xiàng)的key?一致, 如下:

{????cpName:?'Header',????logoText:?'',????fontSize:?20,????color:?'rgba(47,84,235,1)',????height:?60,????fixTop:?false,????menuList:?[??????{????????id:?'1',????????title:?'首頁(yè)',????????link:?'/'??????},??????{????????id:?'2',????????title:?'產(chǎn)品介紹',????????link:?'/'??????},????]??}

editData?和?config?構(gòu)成了一個(gè)?Dooring?組件的?schema?結(jié)構(gòu), 所以我們可以發(fā)現(xiàn), 每一個(gè)?dooring?組件都具備如下結(jié)構(gòu):

index.tsx 組件主文件(可以集成任何第三方開(kāi)源庫(kù))
index.less 組件的樣式文件
schema.ts 組件的schema(組件描述協(xié)議)

editData
config

當(dāng)然組件的?schema?也可以根據(jù)自己的需求來(lái)擴(kuò)展, 如果在組件設(shè)計(jì)上有疑問(wèn)的, 可以隨時(shí)和我溝通.

組件物料開(kāi)發(fā)

組件物料開(kāi)發(fā)依賴于上一節(jié)說(shuō)的搭建協(xié)議的設(shè)計(jì), 在開(kāi)發(fā)?Dooring?自定義組件時(shí)我們只需要按照通用的?react?組件開(kāi)發(fā)模式來(lái)寫我們的組件即可, 唯一不同的就是每一個(gè)組件都需要定義自己的schema?文件, 這也是低代碼/零代碼組件開(kāi)發(fā)的通用模式.

接下來(lái)我拿?Header?組件來(lái)和大家介紹一下如何開(kāi)發(fā)自定義的低代碼組件.

Header組件的主文件開(kāi)發(fā)

import styles from './index.less';import React, { memo, useState } from 'react';import { IHeaderConfig } from './schema';const Header = memo((props: IHeaderConfig) => { ?const { cpName, bgColor, logo, height } = props; ?return ( ? ?<header className={styles.header} style={{ backgroundColor: bgColor, height: height + 'px' }}> ? ? ?<div className={styles.logo}> ? ? ? ?你的自定義的header內(nèi)容 ? ? ?</div> ? ?</header> ?);});export default Header;

Header樣式文件

.header { ? ?box-sizing: content-box; ? ?padding: 3px 12px; ? ?background-color: #000; ? ?.logo { ? ? ?max-width: 160px; ? ? ?overflow: hidden; ? ? ?img { ? ? ? ?height: 100%; ? ? ? ?object-fit: contain; ? ? ?} ? ?} ?}

Header的Schema設(shè)計(jì)

const?Header?=?{??????editData:?[????????...baseConfig,????????{??????????key:?'bgColor',??????????name:?背景色,??????????type:?'Color',????????},????????{??????????key:?'height',??????????name:?高,??????????type:?'Number',????????},????????{??????????key:?'logo',??????????name:?'logo',??????????type:?'Upload',??????????isCrop:?false,??????????cropRate:?1000?/?618,????????}??????],??????config:?{????????...baseDefault,????????bgColor:?'rgba(245,245,245,1)',????????logo:?[??????????{????????????uid:?'001',????????????name:?'image.png',????????????status:?'done',????????????url:?'http://cdn.dooring.cn/dr/logo.ff7fc6bb.png',??????????},????????],????????height:?50,??????},????};????????export?default?Header;

在開(kāi)發(fā)完組件后, 我們需要把組件導(dǎo)入到對(duì)應(yīng)的組件分類入口, 比如基礎(chǔ)組件(BasicComponents),我們需要在BasicComponents/schema.ts?中導(dǎo)入并導(dǎo)出:

import?Carousel?from?'./Carousel/schema';import?Form?from?'./Form/schema';import?Header?from?'./Header/schema';import?WhiteTpl?from?'./WhiteTpl/schema';import?Icon?from?'./Icon/schema';import?Image?from?'./Image/schema';import?Shape?from?'./Shape/schema';import?LongText?from?'./LongText/schema';import?Notice?from?'./Notice/schema';import?Qrcode?from?'./Qrcode/schema';import?Text?from?'./Text/schema';import?Title?from?'./Title/schema';const?basicSchema?=?{??Carousel,??Form,??Header,??Icon,??Image,??LongText,??Title,??//?...其他組件};export?default?basicSchema;

組件元信息定義

組件設(shè)計(jì)好之后在編輯器中還無(wú)法看到, 這是應(yīng)該我們需要配置一下組件的初始化元信息, 比如從組件面板拖入畫布之后的組件大小, 組件的名稱等, 具體的定義路徑在:

editor/src/components/BasicShop/template.ts

具體定義介紹:

{????base:?[????????{????????????type:?'Header',???//?組件類型????????????h:?66,??//?組件初始高度px????????????w:?375,?//?組件寬度px????????????displayName:?'頁(yè)頭組件',??//?組件展示信息????????????icon:?'http://cdn.dooring.cn/dr/header.png',??//?組件展示icon????????????category:?'base'??//?組件的上層分類????????}????],}

渲染器設(shè)計(jì)

渲染器主要包括搭建模式和渲染模式兩部分, 接下來(lái)具體介紹一下.

搭建模式

目前?Dooring-Saas?支持兩種搭建模式:

智能網(wǎng)格布局(二維空間排列, 空余空間自動(dòng)補(bǔ)位)自由布局(三維自由布局, 支持圖層, 元素自由疊加)

具體的實(shí)現(xiàn)模式可以參考私有化部署代碼的:

editor/src/core/viewRender.tsx渲染模式

Dooring-Saas?的組件均采用動(dòng)態(tài)加載的方式來(lái)渲染, 也就是頁(yè)面在渲染的時(shí)候, 組件是異步加載的, 這樣可以提高首頻屏渲染性能, 我們采用的?import?來(lái)實(shí)現(xiàn), 具體的動(dòng)態(tài)加載模式路徑為:

editor/src/DynamicEngine.tsx

對(duì)于每一個(gè)元素的位置, 我們采用如下結(jié)構(gòu)來(lái)設(shè)計(jì):

{????point:?{????"w":?24,???//?組件寬度????"h":?30,???//?組件高度????"x":?0,????//?x坐標(biāo)????"y":?26,???//?y坐標(biāo)????"i":?"wb3d1LFIX3",??//?組件id????"moved":?false,????"static":?false,?????"isBounded":?true?????}}

屬性動(dòng)態(tài)配置面板

屬性動(dòng)態(tài)面板主要是指組件右邊編輯區(qū), 它可以基于組件?schema?的?editData?字段值, 基于表單渲染引擎來(lái)動(dòng)態(tài)的渲染出來(lái). 表單渲染引擎位置:

editor/src/core/FormRender

這塊也是我們自研的一套機(jī)制, 私有化的企業(yè)可以基于這套模式做進(jìn)一步擴(kuò)展, 優(yōu)化.

預(yù)覽模塊設(shè)計(jì)與實(shí)現(xiàn)

預(yù)覽模塊分兩部分:

編輯器畫布的實(shí)時(shí)預(yù)覽預(yù)覽頁(yè)面的預(yù)覽編輯器畫布的實(shí)時(shí)預(yù)覽

編輯器畫布的實(shí)時(shí)預(yù)覽依賴于一套數(shù)據(jù)共享機(jī)制, 這里我們采用?dva?來(lái)實(shí)現(xiàn)全局狀態(tài)的管理, 具體路徑:

src/pages/editor/models

我們可以在這里擴(kuò)展編輯器項(xiàng)目的全局?jǐn)?shù)據(jù).

預(yù)覽頁(yè)面的預(yù)覽

預(yù)覽頁(yè)面的預(yù)覽來(lái)自于?entry?入口功能, 這塊在文檔的全局入口?模塊會(huì)詳細(xì)介紹.

5. 出碼模塊設(shè)計(jì)

出碼模塊主要有:

生成編譯版本頁(yè)面代碼生成小程序生成頁(yè)面 json schema 文件6. 數(shù)據(jù)源設(shè)計(jì)

有關(guān)數(shù)據(jù)源的分享我之前在《趣談前端》中做了詳細(xì)的介紹, 大家可以在我往期的文章中學(xué)習(xí)了解.

入口工程架構(gòu)設(shè)計(jì)

目前入口工程我們主要采用?vue3 + vite?的技術(shù)方案, 包含如下部分:

入口頁(yè)面(用戶應(yīng)用列表, 模版列表, 權(quán)益相關(guān))公共資源模塊(素材庫(kù), 文件庫(kù))預(yù)覽頁(yè)面

之所以這么設(shè)計(jì)是為了降低系統(tǒng)的復(fù)雜性, 編輯器只負(fù)責(zé)編輯搭建模塊, 后面增加復(fù)雜度不會(huì)對(duì)整個(gè)工程造成性能和維護(hù)性的影響.

管理模塊

埋點(diǎn)分析:

數(shù)據(jù)大盤:

后端服務(wù)介紹

后臺(tái)服務(wù)主要采用的 nest + mysql + redis, 接口遵循 restful 規(guī)范, 并且提供了接口文檔，企業(yè)可以輕松基于此使用自己的后端語(yǔ)言來(lái)接入, 比如 java, python, go, php 等。

tencentcloud-sdk 短信服務(wù)七牛云 sdk 資源云儲(chǔ)存微信 sdk 實(shí)現(xiàn)微信登錄，微信分享等功能puppeteer 實(shí)現(xiàn) html 轉(zhuǎn)圖片，html 轉(zhuǎn) pdf 等nodemailer-smtp-transport 實(shí)現(xiàn)郵件服務(wù)

后續(xù)會(huì)持續(xù)對(duì)后臺(tái)業(yè)務(wù)流程架構(gòu)做一些分享, 如果有感興趣的方向也可以隨時(shí)溝通反饋.