前言
入职现在这家公司三年了。因为公司主要业务是广告嘛，经常会改动落地页里的内容来测试投放效果，也需要大量裂变出广告素材，因此这三年大部分技术方面的工作都围绕着低代码展开，包括低代码建站还有各种通过低代码的方法广告素材的裂变。
开启“低代码平台开发实践”系列的文章就是为了系统地整理这三年的工作中积累下低代码平台开发经验。该系列的文章会先介绍低代码的整体结构，之后从以下12个技术要点展开分析
- 🔑 数据结构设计
- 🔑 事件-行为系统
- 🔑 定制逻辑-代码包
- 🔑 动画效果支持：GIF，精灵动画，SVGA
- 渲染器：渲染逻辑，样式适配
- 组件设计：组件的数据结构，组件样式（位置，层级，缩放）
- 拖拽功能
- 吸附效果
- 多选获取区域内组件
- 组件复制
- PSD解析渲染
- 操作记录，撤销操作
低代码的意义
网上关于低代码的文章非常多，这一段就不赘述了。简单来说，低代码肯定是不如定制页面那样能承载非常丰富的业务逻辑的，但是通过功能设计可以提供类似于“插件系统”的功能来承载定制的业务逻辑。
因此对于研发侧来说：低代码可以减少普通页面开发成本，拒绝做切图仔；同时提供一个能够承载定制化逻辑的容器。
对于业务侧来说：提升业务链路测试、投放的效率。
低代码整体架构
无论是低代码建站还是低代码做一些别的工作，都离不开两个重要模块：建站后台（画布/建站区域）和渲染器。画布用于搭建页面或者素材，渲染器用于将搭建产出的json schema通过js解析并渲染成页面/最终产出的素材。
关于json schema相关的内容会在下一篇中详细介绍，json schema是低代码中最关键的一步，各个节点都通过该数据结构进行交互。
建站后台
建站后台包括了搭建产物管理、画布等模块，最重要的自然是画布模块。画布又叫工作区/建站区域，主要指的就是通过拖拽等方式完成页面搭建的地方。在一个画布页面中通常会表现出下面的结构：
- 工具栏里一般会放置一些功能性按钮，比如保存页面、返回上一级等
- 组件库里会提供建站系统预设好的一些组件，比如图片、文字、按钮、动画等，通过组合这些组件即可完成页面的搭建
- 画布实现了组件的实时渲染，逻辑和渲染器类似。在画布上会提供注入拖拽、缩放等快速编辑组件大小位置的交互。
- 属性设置区域用于设置当前选中组件的属性，比如组件上挂载事件行为系统、图片组件上传的图片、文字组件的文字等。
渲染器
渲染器的作用就非常直接了：把建站后台产出的页面配置项（json schema）通过js重新渲染为页面。这个配置项就和虚拟dom类似，通过一个json结构来描述页面的结构，比如最简单的：
[{"id":0,"type":"image","src":"","style":{"zIndex":0,"transform":"translate(0, 0)"}}]
就标识着当前页面里有一张图片，同时携带了图片的src和style信息。解析出该信息便可以动态地在文档中渲染出相应的图片节点。
第一篇就先草草结束，在下一篇中会介绍最核心的数据结构设计。