信息流运营场景中的低代码探索与实践

1. 信息流运营场景中的低代码探索与实践彭锦文腾讯看点高级应用开发工程师

2. 1. 关于我目录

3. 01 关于我

4. 关于我 • 2015 年毕业，2018 年加入腾讯 • 在腾讯参与兴趣部落、腾讯看点、QQ 浏览器等项目开发 • 关注研发质量与效能提升，目前专注于 B 端低代码方向的探索

5. 02 信息流运营场景与运营开发

6. 信息流运营场景示例 QQ 浏览器首页 QQ 浏览器游戏频道 QQ 看点小区首页置顶内容运营频道 Banner，固定位运营小区素材，话题 Tips 运营 QQ 看点小区首页小区话题入口运营

7. 运营链路简析运营开发运营场景链路

8. 运营开发解构全栈开发闭环运营能力开发环节，包括前端、网关、后台、 DevOps 等全链路多业务模块包括内容管理、作者管理、投放管理、频道配置等数十个模块、数百个能力项、数千个接口多数据库负责管理置顶池、频道素材池、小区话题池、投放素材库等十多个数据库，数百张数据表多第三方服务对接了投放服务、文章服务、作者服务、审核服务等多个跨团队、部门、BG的第三方能力

9. 运营开发日常 BFF 层开发 • 重复的 SQL 编写 • 多存储类型 • 多种后端协议低代码前端开发 • 重复搭建 • 相似的系统和页面 • 多个技术栈可视化 + 低代码组件

10. 03 BFF 层低代码探索与实践

11. 整体架构两种协议声明式获取数据 BFF 层低代码运行时（榫卯）架构声明式编排后端服务

12. GraphQL API 低代码 · 方案特点 • 面向DB类数据源 • 常规能力（CURD）无需编码 • 支持及联新增、关联查询、多表查询等复杂场景 • 支持编写插件扩展接口声明式获取数据

13. 常规 GraphQL API 开发流程 • 01 构建数据模型 • 02 编写 Schema • 03 编写业务逻辑 • … • 配置路由 • 编写单测 • 调试接口 • 编写文档 • …

14. GraphQL API 开发槽点繁琐重复相似 GraphQL Schema DB Entity

15. GraphQL API 低代码方案效果 NPM 包引入数据库连接接口自动生成 • 支持表维度的缓存方案配置 • 自动生成新增、更新、查询等常规 API • 支持低代码方式为接口编写插件 • 生成的接口同时支持级联新增、多表多条件查询等复杂场景

16. GraphQL API 生成原理与关键能力设计 API 生成原理关键能力插件机制（低代码能力）通用缓存方案 - 插件策略 - 缓存介质 - 插件沙盒 - 缓存 KEY - 缓存策略

17. 提取数据库元数据 COLUMNS STATISTICS KEY_COLUMN_USAGE COLUMNS 包含表的列信息 STATISTICS 包含表的索引信息 KEY_COLUMN_USAGE 包含键列的约束信息

18. 设计 DSL 诉求 • 完整描述数据库信息简单 • 完整描述 GraphQL Schema • 良好的扩展性框架 ORM 基于 TYPEORM Schema 扩展的 DSL

19. DSL to Entity TYPEORM Entity 动态生成能力基于 TYPEORM Schema 扩展的 DSL

20. DSL to GraphQL Schema Object Type Input Type

21. DSL to Resolver Mutation Type 生成唯一操作名 Resolver

22. 插件机制插件类型多过滤条件多执行方式多声明注册调用问题

23. 插件策略模式策略模式 • 在运行时切换接口的过滤规则 • 将过滤规则实现和调用隔离开 • 组合代替继承 • 开闭原则，无需对上下文进行修改就能够引入新的策略

24. 插件机制作用域攻击原型链逃逸注入类攻击声明注册调用问题

25. 作用域攻击作用域链攻击：process.exit() 作用域隔离

26. 原型链逃逸原型链逃逸攻击： this.constructor.constructor("return process")().exit() 原型链冻结原型冻结严格模式

27. 注入类攻击通过各种语法拼接进行注入攻击代码检查 Function 预执行 regex 预解析

28. 插件沙箱沙箱安全措施 • Proxy 隔离作用域 • Object.freeze() 冻结原型 • use strict 阻止 return this • Function () 不执行函数检查语法 • Regex 过滤 import 语法 JS 沙盒安全方案插件 • 支持自定义插件 • 自定义安全策略沙箱最终的插件运行方案 • 安全隔离上下文 • 不影响宿主性能

29. 通用缓存方案设计请求路径分析缓存难点 • 确定缓存介质 • 设计缓存 index key • 确定缓存策略 • 运营场景中的缓存击穿问题

30. 缓存方案 hash 请求体 • sha1: 4e3eaf36012817852fa630bd7b98c666f7adad1b • 缓存介质：进程级缓存 • MD5: 9f517423c9aa9fad414f77d6395a4226 • index key 算法：MD5+Base64 • MD5+Base64: n1F0I8mqn61BT3fWOVpCJg== • 缓存策略： • 自定义缓存策略 • 常规缓存策略：TTL 自定义缓存策略 • 防止缓存击穿：LRU

31. Mortise GDL （Graph Describe Language）服务编排引擎声明式编排后端服务

32. 服务编排方案探索 BPMN 与 BPEL 1. 规范复杂，超过 500 页 2. 模型复杂，超过 100 种 3. XML 协议不够友好 4. 没有较为完整的标准实现

33. 设计更简单的业务模型数据处理模型功能类型数据类型 input 数据输入节点 Object resolver 数据处理节点 Async Function combine 数据组合节点 Pure Function output 数据输出节点 Pure Function

34. 服务编排协议思考图派生出的 tree

35. 参考 GraphQL 理念的编排协议 GDL 图描述语言（Graph Describe Language） ✂ DAG，有向无环图临接表描述图图顶点

36. 声明式调用后端能力示例 01 声明原子顶点 02 引入榫卯编排引擎 04 服务响应 03 编排请求

37. 04 组件级微前端低代码方案

38. 运营前端开发的痛点繁琐重复相似

39. 运营系统抽象基础信息基础信息路由导航页面操作按钮搜索区抽象路由导航信息展示操作列

40. 低代码开发平台架构应用低代码开发平台（鲁班） BFF 内容管理系统订单系统 OA 系统 APP 运营平台应用管理页面管理模板组件接口管理应用域名可视化配置系统组件基础信息组件配置内置模板应用路由接口配置微前端组件 Data Adapter Json2Json BFF 层低代码开发

41. 低代码组件开发工作流

42. 微前端组件方案微前端组件方案 vue 组件容器（vue in react） • 通过 vuera 实现在 react 容器中集成 vue 组件 • webpack 编译组件 • 编译产物（.js）自动发布至组件中心（CDN） • 基座加载多框架运行时 • 基座按需加载微前端组件编译产物 react 组件容器组件编译模板

43. 系统通用 API、事件、Hooks 通用 API 单例事件鲁班 API 为自定义组件提供了一套与页面通信鲁班系统提供全局唯一的事件实例，供鲁班系统提供了一系列的钩子事件，支持开发者在的能力，方便开发者实现个性化的组件需求组件间、组件与系统间进行通信页面的不同时期对组件进行个性化的定制 Hooks

44. 05 未来展望

45. 未来展望 • GraphQL Schema in Front End ? • .proto to Mortise DSL • DSL as Wiki, CMS, Test, …

46. 感谢倾听大会官网