零代码赋能中后台产品研发实践

如果无法正常显示，请先停止浏览器的去广告插件。

1. 零代码赋能中后台产品研发实践（云搭）分享人 - 张玲吉部门：58集团 – 商业生态与智能发展中心 !"#$%$$&'$(%)! www.58.com

2. 自我介绍 ?@A !"#$ %&'()*+,-./ 012345$67 89+:;<=>

3. 零代码赋能的背景及思考平台方案设计核心模块实现效果展示 + 未来规划

4. PART 1 零代码赋能的背景及思考

5. 工作内容概览近三年： BG工程化方向，主要对接中后台类项目 80+ 系统系统类型高业务定制化系统页面特点业务逻辑复杂，多定制化场景。案例系统大型企业会员系统、客服系统 ······ 30+中型项目部分内容可模型化页面复杂度一般，部分页面内常规表单中插入一个容可抽离通用场景模型。交互复杂的嵌套表单 10+重型项目可模型化简单场景基本上可以做到全量场景化。常规列表页、常规表单页 ······

6. 系统特点分析为了高效对接，不同类型系统，不用应对方案系统划分（按页面量）系统类型解决方案高业务 ProCode 定制化系统源代码开发方案描述方案优点约定标准化方案，使用专业程度高，灵 WebIDE以源代码方式开活性大，移植性发应用强。方案缺点容易形成人力瓶颈，其他角色想帮忙也使不上力，体验不一致。通过可视化工具自动生相对ProCode可有一定的上手成本，案例基于VSCode 开发的简单场景 lowCode 成标准代码，辅助少量以一定程度提升开发者效率很大程阿里飞冰可模型化低代码业务逻辑代码以满足业开发效率，支持度上受制于平台易 58 墨斗务需求。定制需求。用性。非技术同学也可可模型化 NoCode 模型和标准化模板，通以用，上手快，简单场景零代码过线上配置工具，完成交付快，犯错少，系统的配置及发布。体验一致。部分场景可模型化 20% 阿里宜搭定制性差，非标准化场景实现起来比较困难。 30% 50% 部分场景赋能非研发人员，基于高业务定制化系统复杂业务系统百度爱速搭腾讯微搭 58 云搭 ······ 高业务定制化系统部分场景可模型化简单场景

7. PART 2 平台方案设计

8. NoCode 云搭 – 问题 & 产品定位简单页面生产耗时前端开发成本测试 20% 产品、设计、技术、测试，针对产品实现的反复沟通对焦及转译 • 接口沟通约定调试，前后端协同成本占整体研发成本50% 开发30% 研发效率低 8% 交互 8% 样式设计 15% • 逻辑联调 20% 协同成本高接口 • 处理大量重复性代码，效率低，质量参差不齐，维护成本高 7% • LowCode 开发及上手成本高，效率提升有限 7% 需求交付产物不一致 15% 需求设计联调测试样式交互逻辑接口 • 视觉效果不一致，用户体验不一致，前端实现不一致 • 页面交付质量得不到保障，不同页面可能出现不同的bug 以场景为中心：产品围绕场景设计、研发围绕场景搭建、API数据基于场景框架填充以流水线式为出发点搭建全局最优生产模式：多角色一体化链路，非关键环节简化，关键环节升级产品定位赋能面相产品、运营、设计、开发等角色的系统在线生成平台提效集产品应用创建、配置、发布链路一体化的无代码平台

9. NoCode 云搭 – 平台简介

10. NoCode 云搭 – 平台简介应应用用列管表理编辑器平台文档

11. NoCode 云搭 – 平台能力表单页筛选列表页图表页平台官网文档系统

12. NoCode 云搭 – 平台能力中后台系统（列表、新建、编辑、详情、图表）平台官网非技术同学非前端的技术同学测试产品后端 ······ 客户端文档系统运营 UE UI ······

13. NoCode 云搭 – 整体方案设计 58 EIC & UXD 联合出品需求方联盟投放、商业推广、工程效能联合研发 PRD生产场景标准化沉淀场景物料需求拆解结构化PRD 前端可二次编辑配置设计场景模型无代码页面生产页面 Schema 页面渲染创建应用数据标准化定制网关模型数据生产创建页面 API 前端后端标准化生产数据模型业务模型发布上线页面搭建者数据规范接口开发者

14. NoCode 云搭 – 研发流程设计平台业务员前端文档输出平台维护功能迭代站点管理员新需求前端基线迭代应用开发者产品/设计/研发/··· 创建应用业务建模应用管理发布上线创建页面页面管理

15. NoCode 云搭 – 技术架构设计产品搭建 aPaaS平台扩展能力中后台系统搭建页面管理产品官网搭建应用设置文档系统搭建高级设置自定义域名外部网站搭建业务建模外部页面嵌入成员管理多环境（新建、编辑、生成模板、拖拽、排版、预览 ···）筛选列表页产品官网 iFrame页面表单页数据图表文档模块/组件素材库 API 对接模板库设计中心（框架、主题风格、权限、数据、渲染、交互、跨端 ···）数据模型 ··· 产品中心 yun 渲染器新建表单列表页编辑表单图表详情页文档素材中心 iFrame 官网数据中心 ··· 服务中心规范描述协议 JSON Schema 底层服务 NodeJs Koa2 Woody MongoDB Redis tms bsp Eslint ······ 产研中心 UI风格 logo定制拷贝/层级角色/权限表单扩展 PV报表生成链接编辑/删除预览/查看发布/下线 yun 编辑器低代码内核权限设置内部平台搭建 Vue Element UI 美事星图足迹埋点 WOS ···

16. NoCode 云搭 – 功能模块设计基础建设 aPaas服务产研中心基础规范编辑器物料中心应用管理页面管理站点中心应用中心数据中心场景规范物料区场景框架/主题新建页面云搭首页需求中心站点数据视觉规范配置区组件 Logo定制编辑/删除应用管理框架渲染应用数据组件规范画布/渲染模块项目属性层级调整页面管理页面渲染页面数据数据规范拖拽/增减区块使用场景页面模块组权限管理页面权限用户数据 ······ 预览/保存模板用户信息页面拷贝数据模型操作权限物料数据模板操作素材角色/权限发布/下线应用渲染 ······ 性能数据业务模型 ······ 自定义域名预览/查看场景中心模型数据画布截图业务建模 PV报表组件中心数据权限协同编辑成员管理复制链接模板中心 ······ ······ ······ 展示权限文档中心 ······ ······

17. NoCode 云搭 – 场景标准化定义 form.config 筛选区按钮区组件区表格展示区操作列翻页器提交按钮筛选列表页表单页标准化定义：以场景页面为出发点，结合模块、组件、API数据等生成可用系统。架构以场景为中心，方案围绕场景设计，页面基于场景搭建，API 数据结构根据场景定义。标准场景定义遵循两个规范： • 按 UI体系原子化设计的粒度划分（比如列表的固定结构） • 场景物料和场景控件具有业务属性（比如表单的提交接口地址）

18. NoCode 云搭 – 数据标准化定义网关模型场景模型业务模型接口网关固定的格式场景需要的数据格式业务定义的具体字段 Meta 元数据模型字段名类型含义字段名类型含义字段名类型含义 code Number 状态码 data Object 数据主体 list Array 列表数据 msg String 提示信息 list Array 列表数据 name String 姓名 data Object 数据主体 page Number 页码 age Number 年龄 total Number 总条数 gender String 性别 pageSize Number 每页条数 city String 城市 • 网关模型：描述系统网关封装的数据结构，包含接口成功失败标识、提示信息、数据主体等。网关模型固定，对所有接口都适用。 • 场景模型：描述具体场景涉及的所有数据的结构，包括场景内固定的入参、返回值字段，以及通过场景配置引入的业务模型字段。 • 业务模型：描述实际业务中的概念、涉及对象及其属性，包括字段、类型、含义等。同一个业务模型可以用于多个产品页面。 • Meta元数据：描述数据的数据，对数据及信息资源的描述性信息，抽象描述动态展示实体（对模块、组件等数据的描述语言）。

19. PART 3 核心模块实现

20. NoCode 云搭 – ① 编辑器实现列表、表单、图表、官网、文档、······ 截图生成模板新建页面场景模型配置编辑页面 ······ 文件锁拷贝页面预览编辑模板保存 ${page}.module.config.js 模块区下拉框时间组件 ······ 表格模块分页模块 ······ PageJson （当前页面Schema数据）遮罩内容模块尾部模块 ······ ······ 下拉框单选框 ······ Form View Index View 验证属性布局选择 ······ 筛选项操作按钮表头字段 ······ 官网配置项 Render Page View List View 通用属性列表配置项拖拽、增减官网模块头部模块输入框表单配置项列表模块筛选模块 YunDa editor 配置区表单组件输入框拷贝模板 ··· ${page}.meta.model.js 素材图片静态文案动态数据 ······ ······

21. NoCode 云搭 – ① 编辑器文件锁方案编辑器多人协同原理：Socket连接 + 文件锁 Socket 与服务端建立连接访问数据（尝试获取锁） Client 存储以页面 id 为 key 的用户信息作为锁返回状态锁获取页面 id 为 key 是否有用户在编辑 Server Redis Socket连接心跳保活消息通信方案优点缺点典型案例文件锁避免覆盖、实现简单非实时，同时刻只能单人编辑实时要求不高的wiki系统 diff-patch 多人同时编辑，实现相对简单非实时，易冲突 GNU diff-patch Myer算法 OT技术实时编辑实现较复杂 Google Docs 分布式OT 大规模多人系统实现复杂钉钉文档

22. NoCode 云搭 – ② 低代码渲染方案运行时渲染构建时渲染页面描述 Schema 组件页面依赖/插件运行时渲染构建时渲染 Bundle 源码页面构建时，构建服务中完成运行时，浏览器中完成渲染方式 Vue Schema 方案优点缺点平台功能迭代、修复基础包chunk-vendors体历史问题可及时全量积相对较大（全部组件），更新影响性能页面发布时，由服务端将Schema转化保障当前页面稳定性，构建环节存在不稳定因素，为Vue源码，将源码打包为一份平台后续功能迭代不出现问题用户难以定位解 bundle文件，访问时在浏览器中执行。影响该页面执行。决；平台迭代更新不同步。浏览器根据Schema渲染页面，不存在预编译过程适合业务场景最终方案 B端，迭代需要全量运行时渲染更新的业务场景路由懒加载根据页面类型拆分路由 C端，稳定性要求高的业务场景少量注册全局组件减小包体积降低性能影响

23. NoCode 云搭 – ② 渲染器执行流程地址栏访问云搭页面路径：/yd/${appId}/${pageId} } ?frameType=${value}&viewType=${value} appId -> 获取应用基础信息应用配置数据：权限配置、重定向配置、全局请求配置等 UI层面数据框架类型、风格、主题、logo类型、logo图片地址 UI-config 同步 vuex 全局数据更新 HTTP 协议头信息获取角色/权限数据 pageId -> 获取页面配置信息角色权限列表服务端 -> 数据访问权限校验 roleList 无权限页面访问权限是否开启 404 无权限页面页面可访问角色ID数组页面访问权限校验无权限应用渲染（框架、列表、表单、图表、官网、文档、编辑、详情 ······） renderNav renderHeader renderPage

24. NoCode 云搭 – ③ 自定义域名背景 58公益基金门户网站云搭生成地址：https://yunda.58.com/#/indexView/121/332 用户痛点：多参数，不美观实际需求：更简洁，更语义化，便于传播门户实际（期望）地址：https://gongyi.58.com/

25. NoCode 云搭 – ③ 自定义域名实现【服务方】自定义域名适用于中后台系统【云搭】配置页面下载HTML模板后端部署模板服务域名根路径 / 访问【云搭】自定义域名适用于门户网站、文档系统等

26. NoCode 云搭 – ④ 业务建模背景常规页面搭建流程（产品、后端协作完成）数据库搭建开发接口搭建页面业务建模搭建流程（产品全栈搭建）在线建表建页面关联表生成应用接口联调生成应用

27. NoCode 云搭 – ④ 业务建模分层模型表管理创建表应用层添加表字段删除表字段删除表页面表关联表应用新建页面添加表数据选择表删除表数据更新表数据更新表描述更新字段描述配置页面表数据管理后台保存页面查询表数据根据ID查询数据详情服务层 modelApi ... ... 云搭API ... ... pageApi 表API（tableName）数据层 appbinddata ... ... 云搭DB ... ... pageData 业务表DB

28. NoCode 云搭 – ⑤ 其他的一些注意点平台展示、操作权限超级管理员管理员普通用户公有项目访问者平台所有权限归属项目增删改查归属项目增改查公有项目访问权限权 http API 限 permission.config.js 成员角色中间件页面访问按钮操作 middleware.permission.js response 数据访问权限权限点生成应用权限

29. NoCode 云搭 – ⑤ 其他的一些注意点做好埋点跟踪完整的文档体系收集反馈建议

30. PART 4 效果展示 + 未来规划

31. NoCode 云搭 – 效果 – 平台数据面相产品、运营、设计、开发等角色的系统在线生成平台赋能用户数：180+ 使用方：集团8个BG 用户角色：产品、运营、设计、后端、测试等集产品应用创建、配置、发布链路一体化的无代码平台提效有效应用数：200+ 有效页面数：1000+ （需求到上线：2人/日/页面）提效：2000+人/日（设计、开发、联调、测试）云搭 · 零代码平台 58 EIC & UXD 联合出品联盟投放、商业推广、工程效能联合研发

32. NoCode 云搭 – 未来规划跨端异地应用 Yun-UI Low code 云搭 URL Html-template 用户体验 iFrame 面对质疑

33. NoCode 云搭 – 总结确认好你的需求 1 服务的目标人群是谁？要解决什么场景的自动化生产？······ 稳步前进 2 切莫心急，拥抱变化，稳步迭代，不求大而精，但求小而美。 3 总结数据驱动做好数据监控，资源有限的情况下，做最有意义的的事儿。

34. 谢谢