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

作者：徐小夕 2023-07-26 08:24:49

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

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è)?nbsp;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)里也寫(xiě)了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)銷組件, 可視化組件, 功能組件等等。

1. 搭建協(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í)和我溝通.

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

組件物料開(kāi)發(fā)依賴于上一節(jié)說(shuō)的搭建協(xié)議的設(shè)計(jì), 在開(kāi)發(fā) Dooring 自定義組件時(shí)我們只需要按照通用的 react 組件開(kāi)發(fā)模式來(lái)寫(xiě)我們的組件即可, 唯一不同的就是每一個(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)該我們需要配置一下組件的初始化元信息, 比如從組件面板拖入畫(huà)布之后的組件大小, 組件的名稱等, 具體的定義路徑在:

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'  // 組件的上層分類
        }
    ],
}

3. 渲染器設(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 
    }
}