这两年低代码平台的话题愈来愈火,一眼望去全是关于低代码开发的概念,鲜有关于低代码平台的设计实现。本文将以实际的代码入手,逐步介绍如何打造一款低开的平台。
低开概念我们不再赘述,但对于低开的前端来说,至少要有以下3个要素:
- 使用能被更多用户(甚至不是开发人员)容易接受的DSL(领域特定语言),用以描述页面结构以及相关UI上下文。
- 内部具有渲染引擎,用以渲染DSL JSON到实际页面元素。
- 提供设计器(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有以下的两个问题:
- 内容存在较大的信息冗余(page标签、title标签,都有重复的字符)。
- 前端需要引入单独处理xml的库。
自然,我们很容易想到另一个数据描述方案:JSON。使用JSON来描述上述的页面,我们可以如下设计:
{
"type": "page",
"children": [
{
"type": "title",
"value": "标题文字"
},
{
"type": "content",
"children": [
{
"type": "input"
}
]
}
]
}
初看JSON可能觉得内容比起xml更多,但是在前端我们拥有原生处理JSON的能力,这一点就很体现优势。
回顾一下JSON的方案,我们首先定义一个基本的数据结构:元素节点(ElementNode
),它至少有如下的内容:
- type属性:表明当前节点所属的类型。
- children属性:一个数组,存放所有的子节点。
- 额外属性:额外剩余的属性,可以应用到当前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<ElementNode, ''>;
}
/**
* 绑定Type的渲染器
*/
export interface TypeRenderer {
/**
* 根据ElementNode上下文信息,得到JXS.Element,供React渲染
* @param rendererContext 渲染器接受的数据上下文
* @param childrenReactNode 已经完成渲染的子节点的ReactNode
*/
render(
rendererContext: TypeRendererContext,
childrenReactNode?: ReactNode[],
): JSX.Element;
}
/**
* TypeRenderer构造函数类型
*/
export type TypeRendererConstructor = new (args: any) => TypeRenderer;
这里的TypeRenderer
只是接口抽象,具体的实现,是需要根据type来创建对应的renderer实例。
这里我们先简单实现page、button和input:
// type = 'page'的renderer,使用div作为实际组件
export class PageRenderer implements TypeRenderer {
render(rendererContext: TypeRendererContext,
childrenReactNode?: ReactNode[]): JSX.Element {
const style: CSSProperties = {
width: '100%',
height: '100%',
padding: '10px'
}
// 对于type = 'page',就是用一个div进行渲染
// 注意,对于容器类组件,始终需要将传入的子元素放到对应的位置,控制子元素的展示
return (
<div style={style}>
{childrenReactNode}
</div>
)
}
}
// type = 'button'的renderer,使用antd的Button作为实际组件
export class ButtonRenderer implements TypeRenderer {
render(rendererContext: TypeRendererContext,
childrenReactNode?: ReactNode[]): JSX.Element {
const {elementNode = {}} = rendererContext;
const {text = 'button'} = elementNode;
return (
<Button
type='primary'>
{text}
</Button>
)
}
}
// type = 'input'的renderer,使用antd的Input作为实际组件
export class InputRenderer implements TypeRenderer {
render(rendererContext: TypeRendererContext,
childrenReactNode?: ReactNode[]): JSX.Element {
return (
<Input/>
)
}
}
实际上,每个renderer具体返回的组件,都可以任意根据要求进行定制开发,后续我们会深入介绍这一块的内容。但需要再次强调,正如上面PageRenderer
中的注释一样,对于容器类组件,需要将childrenReactNode
放到对应的节点位置,才能正常渲染所有的子元素。
实现了renderer以后,为了方便管理,我们使用一个所谓的TypeRendererManager(渲染器管理器)来管理我们定义的所有的TypeRenderer:
import {TypeRenderer, TypeRendererConstructor} from "./TypeRenderer";
import {PageRenderer} from "./impl/PageRenderer";
import {ButtonRenderer} from "./impl/ButtonRenderer";
import {InputRenderer} from "./impl/InputRenderer";
/**
* TypeRenderer管理器
*/
class TypeRendererManager {
/**
* 单实例
* @private
*/
private static instance: TypeRendererManager;
/**
* 内存单例获取
*/
static getInstance(): TypeRendererManager {
if (!TypeRendererManager.instance) {
TypeRendererManager.instance = new TypeRendererManager();
}
return TypeRendererManager.instance;
}
/**
* 单例,构造函数private控制
* @private
*/
private constructor() {
}
/**
* 这里记录了目前所有的TypeRenderer映射,
* 后续可以优化为程序进行扫描实现,不过是后话了
* @private
*/
private typeRendererConstructors: Record<string, TypeRendererConstructor> = {
page: PageRenderer,
button: ButtonRenderer,
input: InputRenderer
};
/**
* 根据元素类型得到对应渲染器
* @param elementType
*/
getTypeRenderer(elementType: string): TypeRenderer {
if (!this.typeRendererConstructors.hasOwnProperty(elementType)) {
throw new Error('找不到处理')
}
// 采用ES6的Reflect反射来处理对象创建,供后续扩展优化
return Reflect.construct(this.typeRendererConstructors[elementType], [])
}
}
export {
TypeRendererManager
}
渲染引擎(RenderEngine)
接下来是实现我们的渲染引擎(RenderEngine
,叫引擎高大上)。
import {ElementNode} from "./ElementNode";
import {TypeRendererManager} from "./TypeRendererManager";
/**
* 渲染引擎
*/
export class RenderEngine {
/**
* 构建:通过传入ElementNode信息,得到该节点对应供React渲染的ReactNode
* @param rootEleNode
*/
build(rootEleNode: ElementNode): JSX.Element | undefined {
return this.innerBuild(rootEleNode);
}
/**
* 构建:通过传入ElementNode信息,得到该节点对应供React渲染的ReactNode
* @param rootEleNode
*/
private innerBuild(rootEleNode: ElementNode): JSX.Element | undefined {
if (!rootEleNode) {
return undefined;
}
const {type, children} = rootEleNode;
// 通过 typeRendererManager 来统一查找对应ElementType的Renderer
const typeRenderer = TypeRendererManager.getInstance().getTypeRenderer(type);
if (!typeRenderer) {
console.warn(`找不到type="${type}"的renderer`)
return undefined;
}
// 递归调用自身,获取子元素处理后的ReactNode
const childrenReactNode =
(children || []).map((childEleNode) => {
return this.innerBuild(childEleNode)
});
const reactNode = typeRenderer.render(
{elementNode: rootEleNode},
childrenReactNode
)
return reactNode;
}
}
目前的代码并不复杂,流程如下:
需要注意,这个Engine的公共API是build,由外部调用,仅需要传入根节点ElementNode即可得到整个节点数的UI组件树。但是为了后续我们优化内部的API结构,我们内部使用innerBuild作为内部处理的实际方法。
效果展示
建立一个样例项目,编写一个简单的样例:
const renderEngine = new RenderEngine();
export function SimpleExample() {
const [elementNodeJson, setElementNodeJson] = useState(JSON.stringify({
"type": "page",
"backgroundColor": "pink", // page的 backgroundColor 配置
"children": [
{
"type": "button",
"size": "blue" // button的size配置
},
{
"type": "input"
}
]
}, null, 2))
const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
setElementNodeJson(value);
}
let reactNode;
try {
const eleNode = JSON.parse(elementNodeJson);
reactNode = renderEngine.build(eleNode);
} catch (e) {
// 序列化出异常,返回JSON格式出错
reactNode = <div>JSON格式出错</div>
}
return (
<div style={{width: '100%', height: '100%', padding: '10px'}}>
<div style={{width: '100%', height: 'calc(50%)'}}>
<Input.TextArea
autoSize={{ minRows: 2, maxRows: 10 }}
value={elementNodeJson} onChange={onChange}/>
</div>
<div style={{width: '100%', height: 'calc(50%)', border: '1px solid gray'}}>
{reactNode}
</div>
</div>
);
}
设计优化
路径设计
目前为止,我们已经设计了一个简单的渲染引擎。但是还有两个需要解决的问题:
- 循环创建的ReactNode数组没有添加key,会导致渲染性能问题。
- 渲染的过程中,无法定位当前ElementNode的所在位置。
我们先讨论问题2。对于该问题具体是指:TypeRenderer.render方法接受的入参可以知道当前ElementNode节点自身的信息,但是却无法知道ElementNode所在的位置具体处于整体ElementNode的哪个位置。
{
"type": "page",
"children": [
{
"type": "panel",
"children": [
{
"type": "input"
},
{
"type": "button",
}
]
},
{
"type": "input"
}
]
}
对于上述的每一个type,都应当有其标志其唯一的一个key。可以知道,每一个元素的路径是唯一的:
- page:/page
- panel:/page/panel@0
- 第一个input:/page/panel@0/input@0。page下面有个panel(面板)元素,位于page的子节点第0号位置(基于0作为起始)。panel下面有个input元素,位于panel的子节点第0号位置。
- button:/page/panel@0/button@1
- 第二个input:/page/input@1
也就是说,路径由'/'
拼接,每一级路径由'@'
分割type和index,type表明该节点类型,index表明该节点处于上一级节点(也就是父级节点)的children数组的位置(基于0起始)。
那么,如何生成这样一个路径信息呢?逐级遍历ElementNode即可。其实遍历的这个动作,我们已经在之前渲染引擎的innerBuild地方进行过了(递归),现在只需要进行简单的修改方法:
// RenderEngine.ts代码
- private innerBuild(rootEleNode: ElementNode): JSX.Element | undefined {
+ private innerBuild(rootEleNode: ElementNode, path: string): JSX.Element | undefined {
if (!rootEleNode) {
return undefined;
}
// ... ...
// 递归调用自身,获取子元素处理后的ReactNode
const childrenReactNode =
- (children || []).map((childEleNode) => {
- return this.innerBuild(childEleNode)
+ (children || []).map((childEleNode, index) => {
+ // 子元素路径:
+ // 父级路径(也就是当前path)+ '/' + 子元素类型 + 子元素所在索引
+ const childPath = `${path}/${childEleNode.type}@${index}`;
+ return this.innerBuild(childEleNode, childPath)
});
const reactNode = typeRenderer.render(
{elementNode: rootEleNode},
// ... ...
首先,我们修改了innerBuild方法入参,增加了参数path
,用以表示当前节点所在的路径;其次,在生成子元素ReactNode的地方,将path
作为基准,根据上述规则"${elementType}@${index}"
,来生成子元素节点的路径,并传入到的递归调用的innerBuild中。
当然,build内部调用innerBuild的时候,需要构造一个起始节点的path,传入innerBuild。
// RenderEngine.ts代码
build(rootEleNode: ElementNode): JSX.Element | undefined {
- return this.innerBuild(rootEleNode);
+ // 起始节点,需要构造一个起始path传入innerBuild
+ // 注意,根节点由于不属于某一个父级的子元素,所以不存在'@${index}'
+ return this.innerBuild(rootEleNode, '/' + rootEleNode.type);
}
另外,为了让每一个renderer能够获取到需要渲染的ElementNode的路径信息这个上下文,我们在TypeRendererContext中添加path属性:
export interface TypeRendererContext {
+ /**
+ * path:让每个TypeRenderer知道当前渲染的元素所在的路径
+ */
+ path: string;
elementNode: Omit<ElementNode, ''>;
}
同时,innerBuild中也要进行一定的修改,需要在调用TypeRender.render
方法的时候把path传入:
// innerBuild函数
// ...
const reactNode = typeRenderer.render(
- {elementNode: rootEleNode},
+ {path: path, elementNode: rootEleNode},
childrenReactNode
)
// ...
这样一来,每个renderer的render方法里面,都可以从RenderContext中获取到当前实际渲染的ElementNode唯一具体路径path。在后续的优化中,我们就可以利用该path做一些事情了。
现在,如何处理问题1:key值未填写的问题呢?其实,当我们解决了问题2以后,我们现在知道path是唯一的,那么我们可以将path作为每个元素的key,例如:
Button渲染器:
export class ButtonRenderer implements TypeRenderer {
render(rendererContext: TypeRendererContext,
childrenReactNode?: ReactNode[]): JSX.Element {
- const {elementNode = {}} = rendererContext;
+ const {path, elementNode = {}} = rendererContext;
const {text = 'button'} = elementNode;
return (
<Button
+ key={path}
type='primary'>
{text}
</Button>)
}
}
Input渲染器:
export class InputRenderer implements TypeRenderer{
render(rendererContext: TypeRendererContext,
childrenReactNode?: ReactNode[]): JSX.Element {
+ const {path} = rendererContext;
return (
- <Input />
+ <Input key={path}/>
)
}
}
我们只需要将所有的组件使用path作为key即可。
关于构建与渲染的总结
目前为止,我们设计了一套十分精简的渲染引擎,以一套基于antd组件的组件渲染器,通过接受JSON,渲染出对应结构的页面。该渲染器需要考虑,渲染时候元素的上下文,所以在遍历元素节点的时候,需要把相关的上下文进行封装并交给对应的渲染用于自行处理。当然,渲染部分还有很多很多的处理以及各种基本UI元素的创建还有很多的方法(譬如CDN挂载基础类型等),但是基于本系列,我们由浅入深逐步建立整个低代码平台。下篇文章,笔者将开始介绍设计器Designer的实现。
附录
本章内容对应代码已经推送到github上
w4ngzhen/light-lc (github.com)
main分支与最新文章同步,chapterXX对应本系列的第几章,本文在分支chapter01上体现。
且按照文章里各段介绍顺序完成了提交:
modify: use 'path' as key for component.
0535765 modify: add path info for innerBuild.
9d1007b add: SimpleExample.
7658f83 add: root index.ts for exporting all types and instance.
74f9089 add: RenderEngine for build UI component.
3bc90cb add: TypeRendererManager for managing all TypeRenderer instance.
42083f4 add: TypeRenderer and implements.
be4d31f add: ElementNode 映射schema节点.
d62f830 init config for project
标签:const,ElementNode,实现,TypeRenderer,渲染,模块,path,type
From: https://www.cnblogs.com/w4ngzhen/p/16705454.html