低代码平台前端的设计与实现(一)渲染模块的基本实现

这两年低代码平台的话题愈来愈火,一眼望去全是关于低代码开发的概念,鲜有关于低代码平台的设计实现。本文将以实际的代码入手,逐步介绍如何打造一款低开的平台。

低开概念我们不再赘述,但对于低开的前端来说,至少要有以下3个要素:

1.使用能被更多用户(甚至不是开发人员)容易接受的DSL(领域特定语言),用以描述页面结构以及相关UI上下文。
2.内部具有渲染引擎,用以渲染DSL JSON到实际页面元素。
3.提供设计器(Designer)支持以拖拉拽方式来快速处理DSL,方便用户快速完成页面设计。

本文我们首先着眼于如何进行渲染,后面的文章我们再详细介绍设计器的实现思路。

DSL

对于页面UI来说,我们总是可以将界面通过树状结构进行描述:

1. 页面
 1-1. 标题 1-1-1. 文字1-2. 内容面板 1-2-1. 一个输入框 

如果采用xml来描述,可以是如下的形式:

<page><title>标题文字</title><content><input></input></content>
</page> 

当然,xml作为DSL有以下的两个问题:

1.内容存在较大的信息冗余(page标签、title标签,都有重复的字符)。
2.前端需要引入单独处理xml的库

自然,我们很容易想到另一个数据描述方案:JSON。使用JSON来描述上述的页面,我们可以如下设计:

{"type": "page","children": [{"type": "title","value": "标题文字"},{"type": "content","children": [{"type": "input"}]}]
} 

初看JSON可能觉得内容比起xml更多,但是在前端我们拥有原生处理JSON的能力,这一点就很体现优势。

回顾一下JSON的方案,我们首先定义一个基本的数据结构:元素节点(ElementNode),它至少有如下的内容:

1.type属性:表明当前节点所属的类型。
2.children属性:一个数组,存放所有的子节点。
3.额外属性:额外剩余的属性,可以应用到当前type,产生作用。

例如,对于一个页面(page),该页面有一个属性配置背景色(backgroundColor),该页面中有一个按钮(button),并且该按钮有一个属性配置按钮的尺寸(size),此外还有一个输入框(input)。

{"type": "page","backgroundColor": "pink", // page的 backgroundColor 配置"children": [{"type": "button","size": "blue" // button的size配置},{"type": "input"}]
} 

在我们的平台中,我们定义如下的结构:

export interface ElementNode {/** * Element 唯一类型type */type: string;/** * 组件的各种属性: * 扩展的、UI的 */[props: string]: string | number | any/** * Element 的所有子元素 */children?: ElementNode[]
} 

构建与渲染

上文定义了我们低开平台的DSL,但是数据如果没有渲染在界面上,是没有任何意义的。我们必须要有渲染引擎支持将JSON转换为web页面的内容。

类型渲染器(TypeRenderer)

首先我们需要定义基本的渲染器:TypeRenderer。其作用是和ElementNode.type相绑定,一个type对应一个renderer。

import {ReactNode} from "react";
import {ElementNode} from "./ElementNode";

/**
 * 渲染器渲染上下文,至少包含ElementNode的相关数据
 */
export interface TypeRendererContext {elementNode: Omit<
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值