揭秘vivo低代码平台的提效秘诀

1. 揭秘vivo 低代码平台的提效秘诀王宁 | vivo互联网高级前端工程师陈文洋 | vivo互联网架构师

2. 引言对用户图形化操作，容易上手内置各种模板、组件，降低开发难度可视化拖拽，开发效率高后疫情时代究竟需要什么样的新技术，才能真正解放 IT 生产力！低代码！！！是一种可视化的应用开发方法用较少的代码、以较快的速度来交付应用程序对企业缩短产品周期节省成本，提高效率维护便利，即改即用

3. 目录后羿低代码平台的提效秘诀游戏中心低代码探索与实践 01 前后端分离的低代码方案 01 背景介绍与痛点分析 02 自研高性能渲染引擎 02 如何搭建业务“低代码”平台 03 高效的可视化配置方案 03 成果展示与未来展望 04 千亿级内容投放 05 低代码如何与传统开发共存

4. Chapter 1

5. 平台名称「后羿」定位面向用户支撑运营后台业务高效高质量落地的低代码平台开发者 40+ 1600+ 45+ 服务部门服务用户产出项目

6. 后羿低代码平台的提效秘诀前后端分离的低代码方案 1.1

7. 传统WEB开发前后端分离前端开发前后端不分离后端开发 UI 开始开始根据产品原型设计开发根据产品原型设计 API文档根据API文档 mock接口数据功能接口开发 VS 开发根据产品原型开发业务逻辑术业专攻、分工明确分层明确、解除耦合 UI设计稿整合数据渲染模板联调测试测试交付优势交付提升效率、缩短周期

8. 低代码方式开发前后端不分离 WEB应用页面、接口、逻辑、数据、鉴权等产品思维用户低代码平台小程序各平台应用、接口、逻辑、数据等应用一体化适合非专业用户 Native应用各平台应用、接口、逻辑、数据等前后端分离 WEB服务 APP应用 BFF XxxSDK API网关开发思维用户后端低代码平台认证服务权限服务存储服务应用微服务应用微服务应用分层服务适合开发者 ✔️ 后羿

9. 低代码实现方式前后端不分离灵活性差可视化编辑器存储/CDN DSL解释器制品/源码部署拓展性差可集成度较低 DSL/JSONSchema 前后端分离解除耦合可视化编辑器 DSL解释器前端制品/源码前端部署灵活性较高拓展性较好存储/CDN DSL解释器 DSL/ JSONSchema 后端制品/源码前端部署可集成度较高对开发友好 ✔️ 后羿

10. 后羿平台架构运营平台 WEB 开发者平台资源解析路由 DSL转换自定义组件管理前端 FormRender 自定义组件列表表单自定义渲染器上下文自定义渲染器管理 TableRender 自定义流程节点管理自定义交互解释节点动态交互渲染引擎 ✔️ 后羿 BFF 资源发布、迭代单页面/微应用版本对比及回溯 APIProxy 监控日志前后端低码能力分离术业专攻、分工明确业务服务后端服务存储平台服务通用功能服务开放服务基础服务文件服务 SSO/权限消息通知人群画像实验…… 监控调用链基础监控日志中心业务监控 DB监控 Redis集群 MySQL主从集群 MongoDB主从集群 LPR磁盘缓存分层明确、解除耦合

11. 后羿的分与合通过可视化平台抹平用户群体认知和实现差异开发者平台 DSL WEB服务运行时单页微应用 DSL 后端服务 BFF 接口功能服务一体化低码用户一体化低码应用形态 ① 一体化低码用户具备低码分离实现的优势前端页面交互接口形后端低代码态服务、逻辑、存储 ② 逻辑符合不同用户群体的认知存储监控后端满足不同用户群体的需求灵活性较高拓展性较好接口服务用户可集成度较高对开发者友好形前端低代码态页面、交互、逻辑 ③ 前端页面用户

12. 其他的一些利好 01 02 BFF层做接口代理、鉴权、日志接口微服务化功能、组件懒加载， 03 提升性能与传统开发兼容 04 各施所长独立部署更灵活、高效 05 更易被第三方 06 应用集成

13. 后羿低代码平台的提效秘诀自研高性能渲染引擎 1.2

14. 渲染引擎的作用 DSL 自定义组件列表表单自定义渲染器上下文自定义交互解释节点渲染动态表单动态交互渲染引擎 page/template 渲染列表（或图表等）贮藏执行动态交互

15. 表单渲染器：FormRender JSONSchema 自定义组件功能 • 表单数据管理 • 自定义组件解析渲染 • 实现组件联动 • 表单校验 innerState 响应式内核【formData、flatten、errFields】实例方法 validator 特点基于JSONSchema驱动的分层架构 • 逻辑与 UI 框架解耦 UI桥接组件库【Antdv、Element等】 • 学习成本极低 • 拓展简单可挂载到动态交互上下文，实现与各块级组件的联动

16. 列表渲染器：TableRender JSONSchema 响应式内核自定义渲染器特点基于JSONSchema驱动的分层架构内置常用渲染器 • 逻辑与 UI 框架解耦 • 学习成本极低内置多种生命周期实例方法 • 拓展简单可挂载到动态交互上下文，实现与各块级组件的联动组件库【vxe-table】

17. 动态交互一次有序的交互动态交互流程建模点击按钮点击按钮流程触发源 next 表单弹窗表单弹窗校验不通过触发处理失败消息填写表单执行校验校验通过调用接口执行服务端数据处理流程节点校验不通过触发处理失败消息填写表单执行校验校验通过调用接口执行服务端数据处理 next 流程节点 next 流程节点 next 接口结果提示接口结果提示流程节点 next 刷新列表刷新列表结束结束流程节点动态交互队列

18. 动态交互解释器伪代码架构 JSONSchema 交互解释器自定义交互节点内置交互节点【API、methods、function】功能贮藏动态节点传递动态上下文解释执行动态交互传递动态上下文动态节点队列执行器

19. 后羿低代码平台的提效秘诀高效的可视化配置方案 1.3

20. 资源管理 V消息 V消息热更新专注资源（菜单）编排单资源版本管理及批量发布 V消息工单版本审批发布、迭代安全高效可追溯热更新

21. 模板、代码片段 • 专注页面复用 • 提高配置效率 • 专注组件、功能复用 • 提高配置效率

22. 系统功能一键开启可视化配置多种类型客服信息水印文字菜单搜索链接消息通知二维码 V消息调起

23. 页面、组件拖拽配置拖拽生成实时预览

24. 动态交互流程可视化配置交互逻辑可视化

25. 贴心的功能接口：支持代理，方便调试接口配置：统一管理、选择复用

26. 贴心的功能大纲：快速定位到组件版本比对：支持选择任意两个版本对比版本回退：支持多步撤销及恢复指定版本

27. 贴心的功能右键功能 • 组件、流程节点快速复制 • 组件、流程节点快速粘贴（可跨组件、页面） • 精确定位组件Schema • Schema与可视化实时同步 • 代码片段快速保存、使用

28. 贴心的功能自定义组件支持编辑器协议享受内置组件同等可视化配置能力

29. 贴心的功能嵌套场景：扁平化快速切换字段级功能说明组件、节点级文档指引

30. 后羿低代码平台的提效秘诀千亿级内容投放 1.4

31. 数据流程业务数据统一数据处理 • 通用接口、通用处理组件（无代码） • 基于JAR包动态加载的自定义处理能力（低代码） • MongoDB通用化存储（非关系型数据）统一存储 • MongoDB可配置路由策略（分仓存储） • MySQL业务数据定义、分发策略管理（版本号、DMP）精确分发

32. 高可用用户 Dubbo、HTTP 服务实例1 本地缓存磁盘缓存服务隔离服务实例2 本地缓存磁盘缓存 Redis集群（根据量级调整）数据源（MongoDB）实例1 本地缓存磁盘缓存 Redis集群磁盘灾备独立缓存同城双活

33. 高并发 MongoDB数据源无上级缓存 Redis缓存异步处理无上级缓存单元查询并行本地缓存数据选择并发查询数据处理批量查询（异步）结束单元映射/分组数据组合单元查询本地缓存异步加载 ZK监听数据更新数据选择数据处理高速缓存水平拓展(服务、实例)

34. 后羿低代码平台的提效秘诀低代码如何与传统开发共存 1.5

35. 为什么需要共存灵活无场景限制成本低传统开发 & 低代码开发技术成熟周期短效率高优势互补才能发挥更大的价值

36. 后羿是怎么做的架构上兼容传统开发 • 双向支持 iframe • 双向支持微应用 • 页面、区块、组件级支持 iframe 和微应用

37. 后羿是怎么做的素材托管快速部署能力 • 多种工程脚手架 • 脚本命令一键发布即使传统开发也要快人一步

38. 低代码不是万能的才是万能的

39. Chapter 2 如何“拼”出一个页面

40. 游戏中心低代码探索与实践 2.1

41. vivo游戏简介产品形态 vivo游戏中心 vivo游戏内置悬浮窗定位：vivo游戏用户内容服务平台定位：vivo游戏中心再单游戏内的延伸触点定位 vivo用户玩游戏的平台帮助用户找游戏玩帮助用户玩好游戏帮助用户找人玩游戏找到想要的游戏找到游戏相关攻略、玩法、福利、特权游戏玩家社交互动价值点

42. 首页结构介绍 banner和导航栏游戏列表和穿插构成

43. 首页存在的问题行业流量见顶，分发提升困难，需要探索新方向，而应对新需求的时候研发周期过长，运营效果低于预期。用户的核心关注点不同，现有产品形态无法对用户带来强烈的下载刺激。不同生命周期节点的运营需求重点不一样，现有固化的产品无法满足需求运营需要在某个节点更换二级落地页或者响应开发者诉求，搭建专区的时候，现有功能无法快速支持

44. 首页存在的问题缺少灵活多样，动态调整组件的能力。缺少可视化，快速搭建页面的能力。

45. 解决问题的方案低代码平台下的组件化

46. 游戏中心低代码探索与实践如何搭建业务“低代码”平台 2.2

47. 组件化设计 01 针对产品进行功能分析，设计出组件 02 组件多样化选择将产品定制化

48. 游戏中心组件化 01 针对游戏中心进行功能分析，设计出一系列功能模块（业务组件） 02 通过组件（业务组件）组合构成不同的页面，以满足用户的需求

49. 如何打造标准组件组件一组件二组件三组件四组件五

50. 如何打造标准组件元组件：游戏 icon卡片排列，游戏行数和个数可配置，左上配置标题，右上配置跳转数据：游戏列表组件元组件：尺寸为984*345的图片容器数据：单个游戏（游戏详情页）元组件数据

51. 如何打造标准组件

52. 如何打造标准组件

53. 如何打造标准组件

54. 如何引入数据数据 HTTP DUBBO 数据类型：运营配置数据与系统自动数据数据来源：内部数据与外部数据协议

55. 如何引入数据运营场景确定选择元组件确定数据类型确定调用接口

56. 如何引入数据更换了图片

57. 如何引入数据调用方式 Dubbo泛化调用。服务消费者应用不再需要引入服务提供者的SDK二方包。表达式语言 • 弱类型脚本语言 • 逻辑控制 • 防腐设计

58. 如何组装页面可视化快速搭建

59. 如何组装页面方案：所见之页面集合方案页面：推荐、吃鸡、超休闲组件：专题组件元组件： 1*4icon卡片数据：专题+ 时间+ dmp 组件2 页面1 页面2 组件N 专题组件数据元组件专题时间 dmp

60. 如何组装页面元组件数据策略元组件静态配置系统自动运营配置底层数据活动图片内容专题视频游戏文字组件 2 组件 3 页面2 (dmp) 页面3 (dmp) 方案2 (多层实验框架) 方案3 (多层实验框架)

61. 游戏中心低代码探索与实践 2.3

62. 效果展示研发流程轻量客户端开发人员服务端开发人员运营人员开发/更新新组件上传新的元组件配置业务组件上传差分包配置元组件信息配置页面点检生效配置组件应用场景点检审核服务器下发新组件配置场景管理数据调用方式/调用源上线

63. 效果展示研发效率提升客户端动态化组件无需预定义组件，全量上线周期缩短15天以上，且有较高的容错性服务端流程标准化，服务端无需开发或者少量开发，开发效率提升4倍甚至更多测试端无需回归版本问题，测试效率提升 30% - 50%；运营端界面化操作，学习成本降低30%，配置效率提升 10%，能够及时响应诉求

64. 效果展示项目周期变化现有组件满足需求场景下运营直接配置生效，无需开发，无项目周期修改组件场景下客户端修改组件，上传差分包，测试后，运营配置后生效，项目周期为原来的1/5以下新增组件客户端修改组件，上传差分包，服务端少量逻辑开发或者不开发，测试后，运营配置后生效，项目周期为原来的 1/4 以下，服务端和客户端可以并行

65. Pad适配 Before

66. Pad适配 After

67. 解放生产力，提升用户体验做最好用的安卓低代码平台

68. 低代码概念最近很火，争议也很大，有人认为以后“人人都是程序员”，也有很多人认为是新品装旧酒，但作为技术人，最重要的还是通过技术解决业务问题，驱动业务发展，无论是后羿系统，还是游戏中心低代码实践，都旨在提高开发效率，帮助业务取得更好的结果。未来，我们也会投入更多的精力，不断优化系统，能够为用户带来惊喜，能够为行业带来革新

69.