低代码页面编辑器的设计和实现

1. 低代码编辑器的设计与实践 —— 为“管理台”量身定制的低代码吕洋腾讯前端高级工程师

2. 引言数据 + 想法低代码平台用于 “制作管理台” 的低代码平台应用

3. 目录 1. 管理台之痛 & 平台的设计

4. 01 低代码平台的设计「一个管理台的生命周期」

5. 1.1 管理台里有什么增删改查? 还有一堆逻辑和被忽视的基础功能

6. 1.2 开发和维护管理台的痛苦框架与组件库？收集和调研、学习与接入成本、被迫造轮子、使用风险…… 接口和逻辑？文档与协议、Mock、异步状态处理、错误监控…… 编码质量？不靠谱的最佳实践、规范、疯狂堆代码、Code Review、重构…… 需求和人力？快速迭代、方案评审、项目交接…… And More

7. 1.3 低代码「把重复的细节封装起来，把封不住的变化用代码放开」做一个集成方案低代码? 布局逻辑数据资源编排样式、内容布局、UI组件等页面逻辑、工作流、业务模型、云服务编排、表达能力数据库、接口、数据关系服务编排、Serverless、CI/CD

8. 各角色参与度(示意) （使用无极2.0搭建）通用 █ 固定模板的数据源+页面 ██████████ █ 简单布局调整 ██████████ 极容易触及 “复杂”的边界 █ 定制编辑框、数据展示方式 ██████████ 一不小心，就得让专业开发者接手 █ 简单的业务逻辑 & 联动 ██████████ █ 多数据源 & 复杂联动 ██████████ █ 定制化开发的页面 ██████████ 定制化无开发经验者业余开发者专业开发者

9. 1.4 我们要做什么为管理台的生产和维护过程提效

10. 1.4 我们要做什么数据库需求建模已有的接口 BFF云函数 … 把协议调对！数据源数据协议编辑器编辑协议辅助生成在预览区可视化调整页面配置设计时 Model 使用调试参数 / Mock / 页面配置初始化可视化编辑+预览开发 & 发布组件！发布 XX环境组件/逻辑物料库对应版本的数据协议、页面配置页面访客访问

11. 用户 (包括非前端开发) 能够独立、快速完成页面开发。页面同时具备丰富的逻辑和交互

12. 1.5 我们的平台开发端 (cli) 管理端 (web) 用户端 (web) 数据源页面引擎基础框架和Runtime 配置/物料管理通用中间件服务和数据托管

13. 1.5 我们的平台开发端 (cli) 管理端 (web) 用户端 (web) 页面引擎数据源基础框架和Runtime 请求器 Schema管理编辑器 Designer UI库与主题 Layout 数据修剪接口管理渲染器 Renderer 菜单导航路由各端 API 插件统计与日志全局状态管理监控 & 统计插件组件加载器配置/物料管理版本管理通用中间件发布与隔离组件源通知审批权限流程服务和数据托管云函数 (沙箱) 静态资源数据源网关日志存储配置存储

14. 02 页面方案及其实践「页面片 / 组件 / 运行 / 编辑器 ……」

15. 2.1 一些场景 (1/2) · 朴素的嵌套布局节点类型、组件属性、组件样式数据绑定、动态prop、事件回调需要页面状态

16. 2.1 一些场景 (2/2) · “除了数据，啥都一样” 的块常见于列表循环渲染块的内容和逻辑，可能会越来越复杂? 低代码怎么实现编辑和运行？

17. 2.2 页面片的概念页面片 (Pagelet) • • • • 物料组件 • • • 子页面片子页面片子页面片子页面片子页面片

18. 2.2 页面片的概念

19. 2.2 页面片的概念

20. 2.3 页面引擎数据库需求建模已有的接口 BFF云函数 … 把协议调对！数据源数据协议编辑器编辑协议辅助生成在预览区可视化调整页面片配置设计时数据Model 使用调试参数 / Mock / 页面配置初始化可视化编辑+预览开发 & 发布组件！发布 XX环境组件/逻辑物料库对应版本的数据协议、页面片配置页面访客访问

21. 2.3 页面引擎数据源数据协议设计时数据Model 页面片配置可视化编辑+预览兼具布局和逻辑的页面 MV* (Model-View-*) 数据 Model 对应版本的数据协议、页面片配置配置描述的呈现方式页面

22. 2.3 页面引擎 Designer Renderer 添加数据和接口协议 Model 设计时数据Model Context (Bus) 编辑中的页面片配置可视化编辑+预览组件、逻辑等 : 物料库公共方法和存储事件总线 Renderer Model 影响数据 Model 数据协议、页面片配置配置描述的呈现方式页面

23. 2.3 页面引擎页面片配置如何描述布局和逻辑？ —— DSL 和组件标准页面片配置如何变成布局和逻辑？ —— 渲染器原理编辑器 Designer 渲染器 Renderer

24. TOPICS 1. 页面片的概念 2. ▶ 如何描述页面片 3. 组件标准 & 组件开发 4. 渲染页面片 5. 编辑器

25. 2.4.1 页面片 DSL 和组件能力 DSL：简练地描述页面片的样子 & 行为组件能力：决定了开发者能力的发挥空间，以及页面片好不好搭 DSL 清晰表达 70% 场景，保留槽位（eg. 代码…）给 30%场景 + 少量代码充足的组件能力简练的DSL 完整功能的页面

26. 2.4.2 一些概念 & 规范 SimpleFlowStep Pagelet type props … Layout layout lessCode reportParams dataSources triggers styleSheets …… type props slots / children subPagelets style events … UI组件逻辑组件 SimpleFlow steps comment debouncing 数据源 async function

27. TOPICS 1. 页面片的概念 2. 如何描述页面片 3. ▶ 组件标准 & 组件开发 4. 渲染页面片 5. 编辑器

28. 2.4.2 一些概念 & 规范页面片里的组件 Layout 组件/逻辑原子 Meta 数据源实例 Model • • • • • • • • • • • • • • • • • • • • •

29. 2.5 组件开发实例

30. 2.5 组件开发实例

31. 2.5 组件开发实例

32. 2.5 组件开发实例 WUJI 2.0 本地CLI启动 Webpack 在实际的页面上 HMR 调试组件 HMR 组件加载器 WebSocket 页面引擎

33. TOPICS 1. 页面片的概念 2. 如何描述页面片 3. 组件标准 & 组件开发 4. ▶ 渲染页面片 5. 编辑器

34. 2.6 渲染页面片让「页面片配置」跑起来布局数据逻辑 … 子页面片子页面片 Pagele t Layou t Simple Flow 子页面片子页面片子页面片

35. 2.6 渲染页面片 CRenderer 组件 • CRenderer • CRenderer 作为 CRenderer 的参数传入上下文 CRenderer CRenderer CRenderer CRenderer

36. 2.6 渲染页面片运行! 你的 render 函数 à . Vue / React … 虚拟节点树 à . 渲染出DOM

37. 2.6 渲染页面片运行! 低代码的手段你的 render 函数 à . Vue / React … 虚拟节点树页面片实例数据 Model 页面配置呈现方式描述的呈现方式页面配置状态变量、callbacks… à . 渲染出DOM

38. 2.6 渲染页面片 ? 在 render() 里递归遍历整个树 ? 生成代码，然后交给eval / 框架的compiler 页面片实例组件配置 à 组件Factory 数据 Model 呈现方式页面配置状态变量、callbacks… 组件Factory 与页面片生命周期关联 • • 响应式更新：数据 Model 变化触发渲染

39. 2.6 渲染页面片方便挂载Hooks、额外信息、额外逻辑准备阶段收集的信息，可以用于做一些小优化 UI组件、逻辑组件都适用（比如数据源、定时器、触发器等）存在渲染时钩子子节点都是纯静态的可用静态优化策略 Yes - - No Yes Static Tree Hoisting No No Static Props Hoisting 一个有关优化的示例

40. TOPICS 1. 页面片的概念 2. 如何描述页面片 3. 组件标准 & 组件开发 4. 渲染页面片 5. ▶ 编辑器

41. 2.7 页面编辑器 · 布局 · 属性 & 样式 · 数据源 · 行为 · LowCode & 表达式

42. 2.7 页面编辑器 · 与组件Factory结合访问当前页面实例下每个节点的 State 和 Factory 收集它们的位置、DOM实例、错误检查结果等

43. 2.7 页面编辑器 · 拖拽和插槽基于 Drag and Drop API 结合前面的 DOM，找到插槽和放置点

44. 2.7 页面编辑器 · 子页面片只关注一个 CRenderer 实例只编辑一个页面片（Pagelet）进入 Scope 后，对应的数据源信息也会变化

45. 2.7 页面编辑器 • 基于数据源的 Schema 推荐组件 • 数据源就像文档一样清晰 • More…

46. 2.8 总结 - 页面片的应用场景 & 概念 - 组件开发 - 将页面片运行起来 - 渲染器和编辑器结合

47. 03 成果和展望在实际的场景和应用中得到了验证

48. 3.1 我们的平台

49. 3.1 我们的平台

50. 3.1 我们的平台 · 完善逻辑在组件属性、行为逻辑等地方支持 JS & 表达式基于数据协议辅助编辑可组合简单流程，也可插入自定义 JS 片段

51. 3.2 使用情况和反馈用户 (包括非前端开发) 能够独立、快速完成页面开发。如果数据来自 DB / 结构清晰的 RPC，可以零代码实现想要的页面。

52. 3.3 未来展望更多需要数据 + 布局 + 逻辑的场景页面片 as 组件更好的表达 & 理解需求的逻辑

53. 感谢倾听 Have Fun