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

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

背景介紹

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

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

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

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

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

取得的一些成績

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

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

正文

接下來我會從

編輯器設(shè)計架構(gòu)
產(chǎn)品設(shè)計思路
入口工程設(shè)計架構(gòu)
服務(wù)端技術(shù)思考

這幾個方面, 來和大家詳細(xì)介紹一下 Dooring-Saas 這款開箱即用的零代碼搭建平臺.

編輯器相關(guān)

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

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

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

dooring

功能特點

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

1. 搭建協(xié)議設(shè)計

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

Schema 分兩部分:

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

editData 詳解

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

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

key和name 都可以按照組件屬性的語義來定, 這里值得一提的是 type. 不同屬性的值類型不同, 所以我們編輯項的 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è)計器

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

config 詳解

config 本質(zhì)上是一個對象, 也就是組件所能暴露出來的屬性集合, 和 editData 數(shù)組每一項的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)成了一個 Dooring 組件的 schema 結(jié)構(gòu), 所以我們可以發(fā)現(xiàn), 每一個 dooring 組件都具備如下結(jié)構(gòu):

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

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

2. 組件物料開發(fā)

組件物料開發(fā)依賴于上一節(jié)說的搭建協(xié)議的設(shè)計, 在開發(fā) Dooring 自定義組件時我們只需要按照通用的 react 組件開發(fā)模式來寫我們的組件即可, 唯一不同的就是每一個組件都需要定義自己的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è)計

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)入到對應(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è)計好之后在編輯器中還無法看到, 這是應(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' // 組件的上層分類 } ],}

3. 渲染器設(shè)計

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

搭建模式

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

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

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

editor/src/core/viewRender.tsx

渲染模式

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

editor/src/DynamicEngine.tsx

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

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

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