Dooring-Saas低代碼技術詳解
hello, 大家好, 我是徐小夕, 今天和大家分享一下基于 H5-Dooring零代碼 開發的全新零代碼搭建平臺 Dooring-Saas 的技術架構和設計實現思路.
背景介紹
3年前我上線了第一版自研零代碼引擎 H5-Dooring, 至今已迭代了 300 多個版本, 主要目的是快速且批量化的生產業務/營銷過程中的復用頁面, 遠離 curd 循環. 比如我們在研發中常遇到的:
- H5可復用的業務模版
- 頁面通用能力封裝
- 頁面搭建上的靈活性和復用性
- 通用業務組件庫
- 動態表單復用性
- 圖表庫復用性
等問題, 為了實現這一目標, 需要系統的針對這些問題進行產品設計, 當時就想到了通過低代碼的模式來解決. 也就有了我們在 github 看到的解決方案: H5-Dooring 開源項目.
圖片
當時做了一個3年的規劃, 沒想到3年這么快就到了.
取得的一些成績
- github star : 7.8k+
- 線上累計注冊用戶: 10000+
- 線上頁面總數: 5000+
- 模版總數: 1000+
- 組件總數: 45+(持續生產中)
同時為了讓技術小伙伴更好的研究學習低代碼和零代碼, 我在掘金和趣談前端公眾號里也寫了10多篇低代碼的實現原理的文章, 后續也會隨著產品不斷迭代持續分享最新的技術實現.
正文
接下來我會從
- 編輯器設計架構
- 產品設計思路
- 入口工程設計架構
- 服務端技術思考
這幾個方面, 來和大家詳細介紹一下 Dooring-Saas 這款開箱即用的零代碼搭建平臺.
編輯器相關
圖片
Dooring-Saas 是一款功能強大，高可擴展的零代碼解決方案，致力于提供一套簡單方便、專業可靠、無限可能的頁面可視化搭建最佳實踐。
圖片
功能特點
- ?? 可擴展， Dooring 實現了較為完整的業務閉環，并使其模塊化，編輯器內部功能接口也全部可以對接不同服務端語言，實現了標準化接口。此外還支持自定義組件，二次開發，設計模板等能力，以滿足功能和跨領域的分層需求。
- ?? 開箱即用， Dooring 內置了表單渲染器、頁面渲染器、動態加載內核等，僅需一套源碼即可上手開發。并且還提供針對 React 的定制插件，內涵豐富的功能，可滿足日常 30%-60%的頁面制作需求。
- ?? 大量自研， 包含整個編輯器架構、組件設計、文檔、請求庫封裝，后臺管理系統等，滿足日常項目的周邊需求。
- ?? 與時俱進， 在滿足需求的同時，我們也不會停止對新技術的探索。比如更多營銷組件, 可視化組件, 功能組件等等。
1. 搭建協議設計
Dooring 可編輯組件 Schema 設計
Schema 分兩部分:
- editData 組件可編輯屬性的數組
- config 組件真正消費的數據
editData 詳解
editData 是 組件屬性可編輯項的數組, 每一項里面包含了如下字段:
- key 屬性名
- name: 屬性名的中文顯示
- type: 屬性的可編輯類型
- isCrop(可選)
- cropRate(可選)
- range(type 為'Radio'或'Select'時的選項數組)
- 后期可能會擴展(詳細結構可參考Dooring 開源版本)
key和name 都可以按照組件屬性的語義來定, 這里值得一提的是 type. 不同屬性的值類型不同, 所以我們編輯項的 type 也不同, 所有的類型如下:
- Upload 上傳組件
- Text 文本框
- RichText 富文本
- TextArea 多行文本
- Number 數字輸入框
- DataList 列表編輯器
- FileList 文件列表編輯器
- InteractionData 交互設置
- Color 顏色面板
- MutiText 多文本
- Select 選擇下拉框
- Radio 單選框
- Switch 開關切換
- CardPicker 卡片面板
- Table 表格編輯器
- Pos 坐標編輯器
- FormItems 表單設計器
更詳細的代碼可以參考私有化部署版的editor/src/core/FormComponents 目錄.
config 詳解
config 本質上是一個對象, 也就是組件所能暴露出來的屬性集合, 和 editData 數組每一項的key 一致, 如下:
{
cpName: 'Header',
logoText: '',
fontSize: 20,
color: 'rgba(47,84,235,1)',
height: 60,
fixTop: false,
menuList: [
{
id: '1',
title: '首頁',
link: '/'
},
{
id: '2',
title: '產品介紹',
link: '/'
},
]
}editData 和 config 構成了一個 Dooring 組件的 schema 結構, 所以我們可以發現, 每一個 dooring 組件都具備如下結構:
- index.tsx 組件主文件(可以集成任何第三方開源庫)
- index.less 組件的樣式文件
- schema.ts 組件的schema(組件描述協議)
- editData
- config
當然組件的 schema 也可以根據自己的需求來擴展, 如果在組件設計上有疑問的, 可以隨時和我溝通.
2. 組件物料開發
組件物料開發依賴于上一節說的搭建協議的設計, 在開發 Dooring 自定義組件時我們只需要按照通用的 react 組件開發模式來寫我們的組件即可, 唯一不同的就是每一個組件都需要定義自己的schema 文件, 這也是低代碼/零代碼組件開發的通用模式.
接下來我拿 Header 組件來和大家介紹一下如何開發自定義的低代碼組件.
Header組件的主文件開發
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內容
</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設計
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;在開發完組件后, 我們需要把組件導入到對應的組件分類入口, 比如基礎組件(BasicComponents),我們需要在BasicComponents/schema.ts 中導入并導出:
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;組件元信息定義
組件設計好之后在編輯器中還無法看到, 這是應該我們需要配置一下組件的初始化元信息, 比如從組件面板拖入畫布之后的組件大小, 組件的名稱等, 具體的定義路徑在:
- 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. 渲染器設計
渲染器主要包括搭建模式和渲染模式兩部分, 接下來具體介紹一下.
搭建模式
目前 Dooring-Saas 支持兩種搭建模式:
- 智能網格布局(二維空間排列, 空余空間自動補位)
- 自由布局(三維自由布局, 支持圖層, 元素自由疊加)
具體的實現模式可以參考私有化部署代碼的:
- editor/src/core/viewRender.tsx
渲染模式
Dooring-Saas 的組件均采用動態加載的方式來渲染, 也就是頁面在渲染的時候, 組件是異步加載的, 這樣可以提高首頻屏渲染性能, 我們采用的 import 來實現, 具體的動態加載模式路徑為:
- editor/src/DynamicEngine.tsx
圖片
對于每一個元素的位置, 我們采用如下結構來設計:
{
point: {
"w": 24, // 組件寬度
"h": 30, // 組件高度
"x": 0, // x坐標
"y": 26, // y坐標
"i": "wb3d1LFIX3", // 組件id
"moved": false,
"static": false,
"isBounded": true
}
}屬性動態配置面板
圖片
屬性動態面板主要是指組件右邊編輯區, 它可以基于組件 schema 的 editData 字段值, 基于表單渲染引擎來動態的渲染出來. 表單渲染引擎位置:
- editor/src/core/FormRender
這塊也是我們自研的一套機制, 私有化的企業可以基于這套模式做進一步擴展, 優化.
4. 預覽模塊設計與實現
圖片
預覽模塊分兩部分:
- 編輯器畫布的實時預覽
- 預覽頁面的預覽
編輯器畫布的實時預覽
編輯器畫布的實時預覽依賴于一套數據共享機制, 這里我們采用 dva 來實現全局狀態的管理, 具體路徑:
- src/pages/editor/models
我們可以在這里擴展編輯器項目的全局數據.
預覽頁面的預覽
預覽頁面的預覽來自于 entry 入口功能, 這塊在 文檔的全局入口 模塊會詳細介紹.
5. 出碼模塊設計
出碼模塊主要有:
- 生成編譯版本頁面代碼
- 生成小程序
- 生成頁面 json schema 文件
圖片
6. 數據源設計
圖片
有關數據源的分享我之前在《趣談前端》中做了詳細的介紹, 大家可以在我往期的文章中學習了解.
入口工程架構設計
目前入口工程我們主要采用 vue3 + vite 的技術方案, 包含如下部分:
- 入口頁面(用戶應用列表, 模版列表, 權益相關)
- 公共資源模塊(素材庫, 文件庫)
- 預覽頁面
之所以這么設計是為了降低系統的復雜性, 編輯器只負責編輯搭建模塊, 后面增加復雜度不會對整個工程造成性能和維護性的影響.
管理模塊
埋點分析:
圖片
數據大盤:
圖片
后端服務介紹
后臺服務主要采用的 nest + mysql + redis, 接口遵循 restful 規范, 并且提供了接口文檔，企業可以輕松基于此使用自己的后端語言來接入, 比如 java, python, go, php 等。
- tencentcloud-sdk 短信服務
- 七牛云 sdk 資源云儲存
- 微信 sdk 實現微信登錄，微信分享等功能
- puppeteer 實現 html 轉圖片，html 轉 pdf 等
- nodemailer-smtp-transport 實現郵件服務
