我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Dooring-Saas低代码技术详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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/class="lazy" data-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内容
); }); 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: 'https://www.528045.com/file/upload/202411/30/agqgljs3kbb.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/class="lazy" data-src/components/BasicShop/template.ts

具体定义介绍:

{
    base: [
        {
            type: 'Header',   // 组件类型
            h: 66,  // 组件初始高度px
            w: 375, // 组件宽度px
            displayName: '页头组件',  // 组件展示信息
            icon: 'https://www.528045.com/file/upload/202411/30/404gwlqfqhw.png',  // 组件展示icon
            category: 'base'  // 组件的上层分类
        }
    ],
}

3. 渲染器设计

渲染器主要包括搭建模式和渲染模式两部分, 接下来具体介绍一下.

搭建模式

目前 Dooring-Saas 支持两种搭建模式:

  • 智能网格布局(二维空间排列, 空余空间自动补位)
  • 自由布局(三维自由布局, 支持图层, 元素自由叠加)

具体的实现模式可以参考私有化部署代码的:

  • editor/class="lazy" data-src/core/viewRender.tsx
渲染模式

Dooring-Saas 的组件均采用动态加载的方式来渲染, 也就是页面在渲染的时候, 组件是异步加载的, 这样可以提高首频屏渲染性能, 我们采用的 import 来实现, 具体的动态加载模式路径为:

  • editor/class="lazy" data-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/class="lazy" data-src/core/FormRender

这块也是我们自研的一套机制, 私有化的企业可以基于这套模式做进一步扩展, 优化.

4. 预览模块设计与实现

图片

预览模块分两部分:

  • 编辑器画布的实时预览
  • 预览页面的预览
编辑器画布的实时预览

编辑器画布的实时预览依赖于一套数据共享机制, 这里我们采用 dva 来实现全局状态的管理, 具体路径:

  • class="lazy" data-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 实现邮件服务

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Dooring-Saas低代码技术详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Dooring-Saas低代码技术详解

后台服务主要采用的 nest + mysql + redis, 接口遵循 restful 规范, 并且提供了接口文档,企业可以轻松基于此使用自己的后端语言来接入, 比如 java, python, go, php 等。

Dooring低代码v2.9.8版技术更新复盘

像传统的搭建平台, 属性面板大部分时是固定在右侧的, 对于H5搭建平台来说, 固定模式完全够用, 也不会影响用户搭建效率, 但是对于PC端页面搭建来说, 因为画布尺寸相对比较大, 并且对于小屏幕设备, 如果进行画布等比例缩放, 不太利于用户

低代码开发平台技术方案

随着云计算和人工智能技术的快速发展,企业对应用开发的需求也日益增加。然而,传统的应用开发方式需要大量的编码工作量和高昂的人力成本。为了解决这一问题,低代码开发平台应运而生。本文将介绍低代码开发平台的技术方案,探讨其优势和应用场景。详细说明:1.概念定义低代码开发平台是一种基于图形化界面的开发工具,它提供了一系列的
低代码开发平台技术方案
2024-01-17

低代码,要怎么低?一文详解和低代码有关的十大问题

这两年低代码忽然开始受到关注,不少公司在开发这方面的产品。本文将谈谈我对低代码的理解,尝试回答这个 10 问题。

钉钉低代码收费准详解

钉钉作为一款办公协作平台,以其强大的功能和便利的操作受到广大企业的欢迎。钉钉低代码是其推出的一项服务,能够帮助企业快速开发和管理业务流程,提高工作效率。然而,对于许多企业来说,使用钉钉低代码是否需要付费呢?这篇文章将详细介绍钉钉低代码的收费标准。正文:一、钉钉低代码是什么?钉钉低代码是一种基于低代码平台的开发工具
钉钉低代码收费准详解
2023-12-17

低代码赛道技术变革与产业机遇

随着信息技术的快速发展,低代码开发已经成为一种重要的软件开发方式。低代码开发平台可以提供预定义的模板、可视化界面和数据模型等,使开发人员能够快速构建应用程序,从而减少开发时间和成本。本文将探讨低代码赛道的现状和未来发展趋势,并分析其对企业和个人的影响。低代码开发平台的优势低代码开发平台的出现极大地简化了软件开发的
低代码赛道技术变革与产业机遇
2024-01-17

Android语音识别技术详解及实例代码

今天从网上找了个例子实现了语音识别,个人感觉挺好玩的,就把代码贴出来与大家分享下: Android中主要通过RecognizerIntent来实现语音识别,其实代码比较简单,但是如果找不到设置,就会抛出异常Activ
2022-06-06

React基于路由的代码分割技术详解

这篇文章主要为大家介绍了React基于路由的代码分割技术详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-12-23

详解DevOps、低代码和RPA的优缺点

人们需要了解DevOps和低代码方法面临的挑战和具有的优势,并着眼于为企业提供更有效的解决方案。
DevOps开发IT2024-12-14

风口上的低代码,技术人需要考虑哪些?

低代码平台采用可视化的声明性技术,而不是传统的编程方式,开发人员和非开发人员都使用这些技术,并显著减少了交付应用程序和自动化过程的时间和精力。
低代码2024-12-02

java多线程编程技术详解和实例代码

java多线程编程技术详解和实例代码1. Java和他的API都可以使用并发。可以指定程序包含不同的执行线程,每个线程都具有自己的方法调用堆栈和程序计数器,使得线程在与其他线程并发地执行能够共享程序范围内的资源,比如共享内存,这种能力
2023-05-31

低代码开发平台,是技术创新还是束缚?

近年来,随着数字化转型的步伐加快,企业对于快速开发和部署应用程序的需求不断增长。在这样的背景下,低代码(Low-Code)平台应运而生,并迅速成为推动业务创新的一大助力。

若依低代码开发让技术更简单、更高效

若依低代码开发是一种基于图形化编程的开发方式,它可以让非编程人员通过拖拽和配置的方式快速构建应用程序,大大提高了开发效率。本文将详细说明若依低代码开发的基本概念、优势以及应用领域。若依低代码开发的基本概念:若依低代码开发是一种基于图形化编程的开发方式,它通过拖拽和配置的方式,让非编程人员也能构建应用程序。这种开发
若依低代码开发让技术更简单、更高效
2023-12-15

推荐!表单&试卷零代码搭建平台技术详解

通过这种方式, 我们只需要根据业务需求实现自己的组件, 编写组件可配置的属性json, 即可通过配置引擎来动态生成组件的可编辑面板, 从而让非技术人员轻松编辑组件.

详解C/C++中低耦合代码的设计实现

这篇文章主要为大家详细介绍了C/C++ 相关低耦合代码的设计实现,文中的示例代码讲解详细,对我们学习C++有一定的帮助,感兴趣的小伙伴可以了解一下
2023-01-30

白天不懂夜的黑,就像低代码不懂零代码如何带着技术小白起飞

在近几年里,将“低代码(low-Code)”技术和“零代码(no-Code)”技术相提并论的现象已经司空见惯了,就好像它们是一个概念——具有同一种改变公司的技术的功能,并可以以同样低的成本实现。

JS分层架构低代码跨iframe拖拽示例详解

这篇文章主要为大家介绍了JS分层架构低代码跨iframe拖拽示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-02-16

热门标签

编程热搜

编程资源站

目录