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

背景介紹

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

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

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

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

取得的一些成績(jī)

github star : 7.8k+線上累計(jì)注冊(cè)用戶: 10000+線上頁面總數(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)

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

編輯器相關(guān)

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

功能特點(diǎn)

• 可擴(kuò)展， Dooring 實(shí)現(xiàn)了較為完整的業(yè)務(wù)閉環(huán)，并使其模塊化，編輯器內(nèi)部功能接口也全部可以對(duì)接不同服務(wù)端語言，實(shí)現(xiàn)了標(biāo)準(zhǔn)化接口。此外還支持自定義組件，二次開發(fā)，設(shè)計(jì)模板等能力，以滿足功能和跨領(lǐng)域的分層需求。

• 開箱即用， Dooring 內(nèi)置了表單渲染器、頁面渲染器、動(dòng)態(tài)加載內(nèi)核等，僅需一套源碼即可上手開發(fā)。并且還提供針對(duì) React 的定制插件，內(nèi)涵豐富的功能，可滿足日常 30%-60%的頁面制作需求。

• 大量自研， 包含整個(gè)編輯器架構(gòu)、組件設(shè)計(jì)、文檔、請(qǐng)求庫封裝，后臺(tái)管理系統(tǒng)等，滿足日常項(xiàng)目的周邊需求。

• 與時(shí)俱進(jìn)， 在滿足需求的同時(shí)，我們也不會(huì)停止對(duì)新技術(shù)的探索。比如更多營銷組件, 可視化組件, 功能組件等等。

搭建協(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 開源版本)

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

• Upload 上傳組件

• Text 文本框

• RichText 富文本

• TextArea 多行文本

• Number 數(shù)字輸入框

• DataList 列表編輯器

• FileList 文件列表編輯器

• InteractionData 交互設(shè)置

• Color 顏色面板

• MutiText 多文本

• Select 選擇下拉框

• Radio 單選框

• Switch 開關(guān)切換

• CardPicker 卡片面板

• Table 表格編輯器

• Pos 坐標(biāo)編輯器

• FormItems 表單設(shè)計(jì)器

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

config 詳解

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

{????cpName:?'Header',????logoText:?'',????fontSize:?20,????color:?'rgba(47,84,235,1)',????height:?60,????fixTop:?false,????menuList:?[??????{????????id:?'1',????????title:?'首頁',????????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 組件主文件(可以集成任何第三方開源庫)

• index.less 組件的樣式文件

• schema.ts 組件的schema(組件描述協(xié)議)

• editData

• config

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

組件物料開發(fā)

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

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

Header組件的主文件開發(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;

在開發(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ì)好之后在編輯器中還無法看到, 這是應(yīng)該我們需要配置一下組件的初始化元信息, 比如從組件面板拖入畫布之后的組件大小, 組件的名稱等, 具體的定義路徑在:

editor/src/components/BasicShop/template.ts

具體定義介紹:

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

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

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

搭建模式

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

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

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

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

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

editor/src/DynamicEngine.tsx

對(duì)于每一個(gè)元素的位置, 我們采用如下結(jié)構(gòu)來設(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?字段值, 基于表單渲染引擎來動(dòng)態(tài)的渲染出來. 表單渲染引擎位置:

editor/src/core/FormRender

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

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

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

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

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

src/pages/editor/models

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

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

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

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

出碼模塊主要有:

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

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

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

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

入口頁面(用戶應(yīng)用列表, 模版列表, 權(quán)益相關(guān))公共資源模塊(素材庫, 文件庫)預(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è)可以輕松基于此使用自己的后端語言來接入, 比如 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í)溝通反饋.

展望

AI + NoCodeCoding Engine DesignProcess Engine

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場(chǎng)：https://www.ijiandao.com/