腾讯课堂大前端架构演进历程解析 晏家红 终端改稿
2020-03-01 360浏览
- 1.腾讯课堂大前端架构演进历程解析 晏家红 腾讯 客户端高级工程师
- 2.自我介绍
- 3.自我介绍
- 4.自我介绍 • • • 晏家红，来自腾讯，2016年起从事腾讯课堂技术研发 主要负责iOS整体架构设计、跨平台方向以及音视频建设 热爱折腾各种新技术
- 5.01 腾讯在线教育移动端矩阵、面临的挑战 目录 02 03 架构进化论：组件化、动态化、中台化、工厂化 架构演进回顾、新技术探索
- 6.
- 7.腾讯在线教育移动端应用 腾讯在线教育部 腾讯课堂 企鹅辅导 ReactNative+Flutter ReactNative+Flutter ABCMouse Cocos
- 8.腾讯课堂 腾讯课堂 – 腾讯推出的专业在线教育平台
- 9.腾讯课堂面临的挑战 01 代码体量越来越大 02 迭代周期越来越快 03 产品质量要求越来越高 04 部门内3个APP重复代码越来越多
- 10.腾讯课堂架构设计目标 代码质量 代码复用 架构 多端共用 快速迭代
- 11.
- 12.腾讯课堂客户端架构变迁 动态化 组件化 工厂化 中台化
- 13.架构设计之初的思考 怎么快速上线？ 代码 怎么更好的复用？ 怎么实现可插拔？
- 14.答案是：组件化
- 15.组件化(一) 首页 分类 直播 详情 任务 搜索 录播 下载 业务 业务模块 基础组件 容器 组件注册 基础业务 登陆 分享 推送 数据上报 ...... 基础服务 数据库 网络 日志 第三方库 ...... 生命周期管理 总线
- 16.组件化(二) 主工程 模块工程 私有仓库 业务模块 直播 录播 下载 工程项目 直播podspec CocoaPods 聊天 首页 …… 录播podspec 下载podspec 聊天podspec 基础模块 数据库 上报 网络 推送 Podfile Frameworks 直播 日志 …… 首页podspec …… 录播 ……
- 17.但是随着产品形态越来越复杂，出现了新的诉求
- 18.产品和开发日常问题 l 产品：首页需要换成XXX活动样式 l 开发：样式没有提前预埋，需要发版本 l 产品： 这个需求评估下工作量 l 开发： Android暂时没有人力，两端不能同时进入开发 l 产品： 这个很重要的功能，只能新版本使用，老版本怎么办 l 开发： 只能给用户推版本更新，老版本无法使用 l ……
- 19.开发的思考 能不能随时更新？ 能不能不需要 提前预埋？ 能不能不发版本 就解决问题？ 能不能Android和iOS 共用一份代码？
- 20.解决问题核心 – 动态化 设计一个动态化跨端框架
- 21.怎么选择一个适合的动态化框架了？
- 22.腾讯课堂动态化架构变迁 ReactNative 1 3 5 Flutter Native模版 2 4 Hybrid 自研跨端框架Plato
- 23.Native模版 Native模版 模版 优点：可简单更新 缺点：扩展性差、需提前预埋
- 24.Hybrid H5 Native Controller H5 Framework JsBridge(JS) Hybrid 优点：动态更新、跨平台 JsBridge(Java/Object-C) 问题：性能、加载速度 URL Router Native API Hardware API Android/iOS
- 25.Hybrid优化 Minimize HTTP Requests 减少http请求 CSS Sprite 小图片的合并 压缩 使用GZIP 异步加载 Js、ajax 压缩图片 脚本执行优化 Touch事件优化 减少Dom节点 canvas 动画优化 加载 CSS3 懒加载 CDN 缩小cookie … CPU加速 首屏 离线包 缓存 无阻塞 …
- 26.ReactNative JavaScript(UI) ReactJS JSX JS VM Flex NPM Node Yoga(Flex引擎) ReactNative 优点：动态更新、跨平台、Native组件 问题：证书及安装包大小、较高的Crash Android Bridge iOS Bridge Android原生API iOS原生API
- 27.ReactNative优化 首页加载速度/ bundle加载成功率 01 版本管理/发布 List View/ 图片优化 拆bundle 05 02 04 03 Crash优化
- 28.自研跨端框架Plato XML/CSS/JS (preact/vue...) JS Bundle Plato 优点：动态更新、跨平台、支持preact/vue等 Virtual DOM 问题：无法跨多端、复杂组件自定义复杂 Chrome Debuger js引擎(v8/jscore) jsbridge 排版引擎 Android渲染 iOS渲染 Webview
- 29.Plato优化 架构优化 轮询 JS/Native通讯 排版渲染下沉 C++ PLTWebView JS渲染Canvas Bridge预加载 通讯优化 View层级优化 DOM更新机制优化 排版优化 缓存 拆bundle 图片/List View优化 懒加载 排版 JS资源释放 组件优化 秒开优化 性能优化
- 30.Flutter Flutter 应用UI Toast Alert Navigator CSSender Logger Dialog Sliding ListView …… Storage Notification …… 专 用 通 道 Common 网络请求 存储 页面栈 推送 日志 …… Native 业务 通 用 通 道 基 础 服 务 MJFlutter
- 31.Flutter优化 混合栈管理 减包 Flutter音视频 内存 Flutter工具 Flutter webview bridge
- 32.腾讯在线教育当前动态化矩阵是什么样子的了？
- 33.腾讯在线教育动态化矩阵 动态更新 自动打包工具 更新检查和下发服务 更新调度组件 下载器组件 Hybrid ReactNative Flutter Cocos 动态框架 Android 热修复 业务逻辑层 数据访问层 大前端框架
- 34.动态化应用场景 1 腾讯课堂 - RN 2 腾讯企鹅辅导 - RN 3 腾讯课堂HD - Flutter 4 腾讯企鹅辅导HD - Flutter
- 35.腾讯在线教育的动态化回顾 Native模版 Hybrid ReactNative Plato Flutter
- 36.问题 l 课堂已经做过这个功能了，代码能不能直接拿过来用？ l 这个bug课堂不是已经解决过了吗，为什么又要解决一次？ l 这块人力不够，能否从课堂协调一个人过来？
- 37.我们的现状 腾讯课堂 企鹅辅导 ABCMouse 直播 直播 直播 录播 录播 录播 推送 推送 推送 网络 网络 网络 …… …… ……
- 38.烟囱式架构的痛点 功能重复建设 协作成本高 阻碍技术发展 • 人力成本浪费 • 能力共享困难 • 技术挑战不够 • 研发效率浪费 • 数据共享困难 • 技术共享受阻 • 机器资源浪费 • 人员交流困难 • 人员互备困难
- 39.解决痛点核心 – 中台化 业务 服务 功能 框架 目标：为业务提供三层支撑
- 40.实现中台化核心做两件事情 上云 公共服务
- 41.搭建腾讯在线教育中台服务 在线教育业务 腾讯课堂 企鹅辅导 ABCMouse 新产品 支撑 音视频服务 Push 推送服务 网络接入服务 智能数据服务 质量监控服务 日志诊断服务 热更新/修复服务 VR/AR服务 服务组件 支撑 中台 功能组件 WNS 上报 数据分析 音视频 Push + 配置 日志 用户反馈 离线缓存 下载器 APM 运营工具 热修复 支撑 应用框架 ReactNative + Flutter + Hybrid 跨平台开发框架 Cocos + Hybrid 跨平台开发框架
- 42.教育最核心的音视频服务是怎么样的了？
- 43.音视频整体架构 资料存 储服务 离线转码 集群 回调服务 离线回放 直播状态通知 flv文件 学生端 实时流 云互动直播 云点播 云直播 老师端 回调备份 服务 sso 直播信令 服务 任务调度 服务 多路流 混流 秒出回放 学生端 实时转码 集群
- 44.音视频端到端 音频采集、视频采集、音视频前后处理 语音CodeC 编 码 发 送 PLC/变速 音频Jitter Buffer ARQ 码率控制 流量控制 音频FEC 视频FEC 视频CodeC 视频Jitter Buffer 拆包组包 中转、直连、重定向、测速、均匀发送、带宽估计 TCP、UDP、UDT 接 收 解 码
- 45.音视频客户端架构 业务 直播 EduLiveSDK 录播 EduVodSDK 音视频 • 代码复用 • 业务解耦 • 利于优化 OpenSDK ARMPlayer
- 46.音视频大前端架构 ReactNative RCTVideoView Flutter Platfrom View Texture Native Module 直播 录播 OpenGL
- 47.基于Flutter的音视频服务 PlatformView TextureWidget 自定义OpenGL
- 48.PlatformView Native层 Dart层 Identifier UIKitView(iOS) PluginRegister EduPlatformView Binary Messager AndroidView ViewId ViewFactory
- 49.Texture Widget Native层 Dart层 PluginRegister TextureId TextureWidget Binary Messager Data TextureRegistry Flutter Texture CVPixelBufferRef EduTexture
- 50.基于H5的音视频服务 老师端 web 主路画中画 主路画中画 老师端 辅路主画面 音频 音视频 server app 学生端 录制 server 辅路主画面
- 51.基于H5的音视频服务 信令化 = H5 PPT + 信令 信令：打开PPT、翻页、切动画、画笔、光标、关闭PPT等 H5 PPT 主路画中画 音频 音视频 server Teacher 信令 录制 server 业务 server 画板
- 52.音视频服务优化 架构优化 • C++实现多端共用 首帧优化 • 预加载 • 本地代理缓存 • Moov前置 播放体验优化 • 精确Seek多画面对齐 • 清晰度自适应 播放成功率优化 • 各个问题各个击破 缓冲优化 • 顺序播放缓存 • Seek缓存 成本优化 • 流量控制 • 缓存策略调整
- 53.开发能不能更便利？ 新做一款应用能不能更快？ 能不能更节约时间、节约成本？ 中台化就够了吗？
- 54.工厂化 底层服务 应用框架 包含所有例如音视频等 服务 应用工具 服务自动化、脚手架、 打包等工具 服务多端 一套代码服务多端 组件化、动态化、中台化等 框架 工厂化 UI UI组件、模版 前后端联通 前后端bridge联通
- 55.
- 56.腾讯在线教育架构演进历程回顾 组件化 代码复用、可插拔 动态化 中台化 多端共用、快速迭代 服务化、节省人力成本、促进技术发展 工厂化 快速开发、提升开发效率
- 57.展望 — 新技术探索 新的教育场景(VR/AI) 跨平台多端赋能 新的上课方式
- 58.
- 59.
- 60.
