柯培霖--事件链可视化编排在抖音电商应用实践.pdf

1、例：支撑例：支撑海量数据的大数据平台与架构海量数据的大数据平台与架构 例：茹例：茹炳晟炳晟例：腾讯Tech Lead，腾讯研究院特约研究员正文要求：微软雅黑：最小字号 8号 宋体：最小字号 10号 等线：最小字号 12号事件链可视化编排在抖音电商应用实践事件链可视化编排在抖音电商应用实践 柯培霖柯培霖字节前端开发工程师柯培霖柯培霖字节前端开发工程师曾就职于美团，参与美团点餐、美团优选等业务，现字节前端工程师，负责抖音电商货架场业务相关开发工作。大前端行业多年从业经历，拥有丰富的 C 端开发经验，参与过多个业务从 0 到 1 的建设过程，专注于业务开发提效和技术突破。CONTENTS目目录录1.

2、1.背景介绍背景介绍2.2.自研端到端动态化解决自研端到端动态化解决方案方案3.3.事件链详解事件链详解4.4.事件链可视化编排架构设计事件链可视化编排架构设计5.5.场景应用场景应用6.6.后续思考后续思考背景背景介绍介绍业务场景业务场景抖音电商持续增长，业务复杂度迅速增加业务场景业务场景链路涉及商详、购物车、提单页、订单详情等多个场景历史包袱重，同个业务同时存在 H5、原生、Lynx 等多种形态的页面，迭代成本高。传统面向业务传统面向业务开发开发前端感知业务逻辑（研发效率）前端有状态（多端一致性）前后端双向交互（排查效率）复杂度与复杂度与挑战挑战涉及技术栈多（iOS、Android、H5、

3、Harmony）涉及端 App 多（抖音、抖音极速版、抖音商城、今日头条、番茄小说等）前后端链路长，数据一致性要求高快速完成敏捷迭代的需求发布性能&质量保障复杂度与挑战复杂度与挑战现有跨端方案无法满足，需要设计一套端到端的动态化解决方案自研端到端动态化自研端到端动态化解决方案解决方案设计设计思想思想业务逻辑收敛到后端渲染协议数据统一下发事件执行逻辑统一下发设计设计思想思想设计标准化的协议渲染协议标准化端上交互行为标准化前后端通信数据标准化前后端前后端合作方式合作方式旧方式新方式事件链事件链详解详解交互交互行为行为勾选商品点击结算勾选商品行为1.渲染勾选按钮2.数据埋点3.提交当前状态给后端4.

4、渲染最新数据点击结算行为1.数据埋点 2.跳转到指定页面事件链事件链协议协议端上的各种交互行为是被定义、抽象和枚举的服务端可预知一个组件的某个动作触发后的行为事件链实际上就是对于组件的具体行为触发的原子事件的编排，并且服务端可预知可配置化原子性易于理解有规范性扩展性强原子事件原子事件勾选商品勾选商品行为事件行为事件运行运行机制机制可以同步执行，也可以链式执行（类似 Promise）配置配置方式方式配置方式1.0对新同学成本高，配置项熟悉度要求高无法可视化的查看事件链执行链路事件链可视化编排事件链可视化编排架构设计架构设计整体交互设计整体交互设计可视化编排的设定足够的表达性较好的扩展性较好的复用

5、/维护性较低的上手成本整体交互整体交互设计设计流程图脑图OR多种物料、自由放置自动布局、可收起/展开子节点整体整体交互交互设计设计在节点处新增，选择不同的原子节点限制节点拖拽，可收起/展开子节点整体整体交互设计交互设计节点结构边结构图引擎节点交互节点交互设计设计区分节点类型（功能节点、事件节点）设计单节点交互（功能丰富性）设计图交互（便捷性）节点节点类型类型按照功能类型和事件类型区分每种节点每种节点设置可创建的子节点类型每种节点设置可创建的子节点总数每种节点设置不同边框颜色增加区分度每种节点设置对应的标题和描述节点类型节点类型定义定义可衔接节点类型可衔接节点类型配置内容配置内容根节点事件链所属

6、节点，如 product_card触发器节点动态化节点无，该节点由前端生成，默认不可编辑触发器节点对应 json 配置里的 event_name条件节点原子事件节点(自定义&内置)event_name,对应生成协议的 triggerType,可以是任意字符串分支节点对应原子事件后的执行结果条件节点原子事件节点(自定义&内置)分支类型，枚举值1.success2.failed条件生效节点用来标识后续节点是否应纳入事件链中原子事件节点(自定义&内置)effect_expression 表达式动态化节点对应 from_v