写点什么

ALive:淘宝双 11 直播,技术同学却可以“偷懒”?(二)

  • 2019-12-17
  • 本文字数:1301 字

    阅读完需:约 4 分钟

ALive:淘宝双11直播,技术同学却可以“偷懒”?(二)

▶ 技术实现

1、直播容器


我们设想的灵活、高效的直播容器,应该具有以下几个特征:


  • 统一规范的组件消息协议:包括组件包名、组件行为、业务自定义字段等,统一由 PowerMessage 的固定消息下发

  • 支持动态加载:直播间不同于其他详情页,互动的发送依赖主播操作,也依赖用户进入直播间的时机,每个用户参与到的互动可能都不一样,所以互动组件的动态加载对首屏性能很关键

  • 缓存及依赖去重:同一个互动,主播可以多次推送,各个互动依赖的基础库(rax-xxx、universal-xxx)也存在较多重复,所以设计合理的缓存和依赖去重机制对性能提升也很重要

  • HOC 高阶组件:直播间里的业务开发不同于其他独立的源码页面,比如直播间数据获取、消息和事件监听、横竖屏状态获取、带小窗跳转、直播观看时长等等都依赖直播间环境或者客户端 API,业务组件都需要这些基础能力,需要通过 HOC 来增强业务组件


基于这些特征设定,我们设计的直播容器技术结构如下:



直播容器的核心工作流程包括以下几点:


  • 消息和指令:容器初始化时从 Native 获取缓存里 Mtop 请求的组件列表,同时消息模块监听 Native 转发的固定消息。协议解析成标准化指令,交给渲染模块执行后续操作

  • 渲染管理:渲染模块接收到创建、更新、销毁组件指令后,传递给组件 HOC,如果是创建组件指令,则从加载引擎拉取组件 bundle

  • 加载引擎:rloader 维护了组件缓存,当拉取的组件不在缓存内时,会解析依赖,优先从缓存的基础依赖里查找基础组件,如果没有则 combo 拼接,最后拉取最小量的组件 bundle,并将拉取的 bundle 加入缓存

  • 组件 HOC:高阶组件除了上述的能力,还提供了 API Bridge、全局变量注入、事件分发以及一些监控容错等机制

2、 ALive 工程体系

笔者加入淘宝直播后接手的第一个项目,是由客户端同学开发的 H5 版本亲密度组件,直播间里的组件开发强依赖客户端环境,当时的开发调试手段只能通过 Charles 代理本地静态资源,没有日志、没有断点、没有 Mock ,开发环境极其恶劣。


引入直播容器后,改善了性能,但是在直播间里开发组件,需要一个完整的直播间环境和直播容器才能开发调试,没有配套的工程体系,组件开发依然很低效。我们设想的 ALive 工程体系,应该包含以下几个部分:


  • ALive def 套件:直播间组件开发脚手架,增强调试能力,包括直播间模拟、调试代理、热更新、编译检测等功能

  • 直播间 Debug 工具:基于直播容器开发一个 Debug 组件,提供日志调试、容器化 API 调用、数据 Mock、消息 Mock 等功能

  • VS Code 插件:直播间 Debug 工具在 PC 端的同等方案,结合模拟器可以独立在 PC 端开发调试


基于这些诉求,我们设计的 ALive 工程体系技术结构如下:



效果演示:组件代码热更新



效果演示:VS Code 插件 Mock 消息



效果演示:VS Code 插件 Mock 直播间数据



▶ 数据表现



业务数据上通过 ALive 开放带来的外部流量早已超过百万 DAU ,每一个对接方都蕴含着一个大的垂直市场。


技术数据上直播容器的稳定性较好,组件的渲染时长由于并发请求限制,还存在一定的优化空间。ALive 工程体系建设带来的提效非常明显,通过团队日常排期表数据粗略统计,开发效能提升大约在 30%左右。


本文转载自淘系技术公众号。


原文链接:https://mp.weixin.qq.com/s/L5lggzXju1ajAjUfaaDGLw


2019-12-17 14:12747

评论

发布
暂无评论
发现更多内容

想给用户天涯若比邻的体验?业务全球化面临的三重挑战

声网

网络

日本公司诚招IT开发技术者

马农驾驾驾

Java c++ php Python 日语

Python Qt GUI设计:菜单栏、工具栏和状态栏的使用方法(拓展篇—2)

不脱发的程序猿

Python qt GUI设计 Qt Creator 菜单栏、工具栏、状态栏

Hoo虎符研究院 | Arweave调研报告

区块链前沿News

Arweave Hoo虎符 虎符交易所 虎符研究院 去中心化存储

微信业务架构图&&“学生管理系统”毕业架构设计

guodongq

「架构实战营」

「从0到1如何快速实现cli工具」

速冻鱼

大前端 cli JavaScrip 签约计划第二季 12月日更

Spring AOP(一) AOP基本概念

程序员历小冰

spring aop 28天写作 12月日更

普华基础软件加入龙蜥并成为理事单位,共创开源操作系统新生态

OpenAnolis小助手

龙蜥社区

基于云的技术架构设计实践-第5篇

hackstoic

数据分析 云原生 数据可视化 业务分析 签约计划第二季

GrowingIO Terraform 实践

GrowingIO技术专栏

运维 SRE Terraform 项目实践 资源编排

我粗心,有救吗?

Justin

心理学 成长 28天写作

彻底弄懂死锁

李子捌

Java、 28天写作 12月日更

Rust 元宇宙 15 —— 细节和重构

Miracle

rust 元宇宙

消费类电子线上问题定位,分析和解决落地

wood

硬件产品 28天写作 线上故障

架构实战营三期--模块一作业

木几丶

架构实战营 #架构实战营

TypeScript 之 Class(下)

冴羽

JavaScript typescript 翻译 大前端

记录-今年最骄傲的一件事(2)

将军-技术演讲力教练

第一模块作业

Anlumina

「架构实战营」

技术架构演进的思考

gevin

架构演进

学习总结

Anlumina

「架构实战营」

架构实战营模块1课后作业

墨宝

你以为Vue3封装一个弹框组件很简单?

CRMEB

从实习到秋招成为一名安全工程师,我经历了什么

网络安全学海

面试 网络安全 信息安全 渗透测试 WEB安全

如何验证你的产品创意?

石云升

产品思维 28天写作 12月日更

微信业务架构图&学生管理系统毕业架构设计

Spring

架构实战营

第一周作业

lv

云ERP系统究竟是什么?

低代码小观

流程管理 ERP 业务流程管理 业务流程自动化

毕业总结

小智

架构训练营

架构实战营-模块1-作业

Pyel

「架构实战营」

Git 报错:unable to update local ref

liuzhen007

28天写作 12月日更

我所理解的微服务

gevin

微服务 微服务架构

ALive:淘宝双11直播,技术同学却可以“偷懒”?(二)_文化 & 方法_淘系技术_InfoQ精选文章