腾讯在线教育大前端架构演进之路.pptx

1、腾讯在线教育前端架构演进之路录 1、在线教育部业务简介2、前端架构演进历程3、前端的总结与展望1、腾讯在线教育部业务矩阵及技术图谱腾讯在线教育部业务产品矩阵产品覆盖了各年龄层ABCMouse企鹅辅导腾讯课堂腾讯在线教育前端技术图谱APP程序wepykboneh5、PC服务端存储Q.js研框架 serverlessexpress2019腾讯在线教育前端临的挑战1、业务增速度快、产品迭代周期短、项质量要求2、前端团队数，前端加客户端，增到了70多3、部内三个业务并发展，重复建设的能越来越多2、在线教育前端的架构演进历程腾讯在线教育前端技术演进历程组件化建设服务中台化统技术栈业务动态化云端体化架构之

2、初的设计思考如何避免功能重复建设？业务如何能代码如何快速的上线？更好的复？怎么实现可插拔设计？答案：组件化在线教育部成之初技术现状统前端技术栈jquery项框架不同，构建也不同块的加载机制AngularReactQ.js前端统技术栈技术栈收归，是组件化落地的前提ReactWebpack业务组件化落地减少重复开发，定程度提升了开发效率UI 组件基础组件具组件志组件监控组件抽象聚合动画组件程序组件RN 组件统登录组件视频组件消息推送组件业务组件运营活动组件付组件随着业务发展，产品新的诉求解决时效性问题产品：给我上个活动推荐卡开发：可以，预期是下个，跟 APP 版本提测开发：做不到啊，苹果审核需要时

3、间 产品：我下周，就要上线！开发的思考APP 动态化1、能不能不发版本就解决问题？2、业务代码如何能实时热更新？3、能不能不需要提前预埋逻辑？4、安卓 和 IOS 能否套代码？2.1 在线教育前端的服务中台化建设在线教育前端的动态化架构时间线Native 模板 Hybird React Native201512342019FlutterNative 模板可以满基本动态化诉求Native UI 绘制优点：可以配置化更新模板缺点：需要预埋，扩展性不够遇突发事件，Hybird 离线包满业务动态化，提升加载速度浏览器 Web App （HTML、CSS、JavaScript）Web UI 绘制WebV

4、iew 命周期基础API，系统能离线资源管理数据通信优点：动态更新，开发和维护成本低缺点：跟 Native ，存在性能问题Android / IOS 客户端 bridge客户端 FrameworkHybird 优化案传统优化资源压缩、Tree Shaking、资源分离客户端离线包更新策略，使 diff 进最更新静态资源协议提升传输协议：HTTPS 到 RPC数据协议：JSON 到 PB、JCE客户端预加载，减少络耗时弱络情况，客户端协议重试数据通信React Native解决 APP 屏问题JavaScript （UI）Native UI 绘制Android / IOS Bridge优点：保持

5、 JS 开发，渲染性能提升JS VMYoga缺点：不同平台有差异，需要兼容处理crash 率略基础API，系统能客户端 Framework17年出Plato 探索研 RN 框架设计应层登陆志下载ListViewNavBarTavHostAllPagerVideoWNS业务组件APP能直播分层更为合理各层接清晰每层最可减少耦合灵活性渐进增强组件层基础组件listViewViewTextImageModalScrollInputTextdiff 解析 渲染调试 打包 兼容前引志模块络请求本地存储全局参数初始化端核模块UI 管理 create擎基础模块基础能基础层Webpack优化事件代理动画del

6、eteupdateWebSocketPlato To PreactfindNode复杂动画，定制化后交给 Native 绘制扩展性好，持 vue、preactbridgeutilsv8jsc裁剪事件监听，只抛出绑定的事件Android / IOS 客户端Flutter降低 Crash 率，提升 UI 致性跨平台引擎 UI 绘制优点：性能媲美 Native，且多端渲染致缺点：不持动态化，前态不如 RN前端编写 dart，脱离前端 JS 态MJFlutter 实践企鹅辅导 落地 FlutterFlutterFlutter to We b 探索不适合追求性能的业务，适合 C 端场景AlertToas

7、tAppCSSRender NavigatorRefreshstoragewindowcookieMJFlutterHttp/CGIJSBridgeWebwebSocket环境依赖平台适配腾讯在线教育动态化演进回顾本质是渲染式的变NativeWeb浏览器渲染Flutter研引擎渲染12客户端渲染RN、NativeHybirdFlutter业务快速发展，如何提升产品质量核秒开产品：核打开很慢啊？开发：是吗？我看下上报的数据。产品：是的，尤其是端外，很慢！开发：嗯，我们优化下。开发的思考Node 服务端直出1、在离线包的场景下，怎样提升打开速度？2、在 APP 内有离线包的情况下，为什么打开会慢？

8、基于 Nodejs2.2 在线教育前端的服务中台化建设在线教育团队 Node 服务的基 IMServerserverLessIMServer 3.02019hapikoaIMServer 1.0 建设拓展了前端的边界worker1、worker2、worker3、worker4PM2业务标替代 Java VM 案Server1Server2Server3优化团队研发模式，提升开发效率IMServer 1.0Frameworkhapi + plugins IMServer 1.0 问题IMServer 架构升级开发效共个 Framework 耦合严重个业务出了问题，影响其它业务缺少合理的团队代码

9、开发规范耦合严重IMServer 2.0 升级改造约定于规范IMServer-cliIMServer-dcapiIMServer-monitor设计思想IMServer灵活可扩展的微内核架构业务采插件的形式嵌插件态imsocket imserver-core imserver具链KOA + 基础中间件IMServer-ioIMServer-ptloginIMServer 2.0 架构图组合于继承IMServer-coreIMServer功能模块Cluster HttpServer封装 KOAWorker1Worker2Worker3进程管理：PM2 IMServer原框架：hapi Koa2F

10、ile Loaders集成常中间件加载策略：录规范、模块引config、assets、lib、logger、options、props、package持定义中间件logger & appenderIMServer 2.0 进程管理业务隔离部署进程管理master-clusterimserver-core摒弃了全局共的 Frameworkimserver-core 定位是守护进程处理进程的跳检测、保活、重启、异常捕获Worker1WorkerNIMServer 2.0 落地业务系统业务服务化中台运营活动平台2、Vision管理平台GraphQL API 服务1、Xadmin3IMServer直出

11、服务消息推送服务5、IMPush4、SSR前端开发者临的困境serverless 恰逢其时的出现了流量预估资源申请域名申请操作系统知识告警和监控环境搭建资源利率备份容灾内存泄露问题机器扩容Serverless 是什么？让前端远离运维，服务的设计事件 Event云函数平台 Fass后端即服务 Bass触发器函数COS对象存储 CDB云数据库CMQ消息队列 CRedis云缓存函数实例函数实例关API定时器函数实例函数实例研服务事件驱动状态弹性扩容运维传统 Node 服务事件处理nodejs runtime返回数据中间件业务逻辑事件触发HTTP、TCPServer1监听端IMServer3.0 如何

12、适配 Serverless保证服务的顺利迁移serverless runtime返回数据scf 触CKafkaTCP中间件 业务逻辑12tencent/serverless-imserver在线教育前端服务端架构全景图程序运营活动PC、H5APP研发闭环 研发态诊断能业务代码运时运营系统配置系统消息系统全链路志全链路检索基础组件Redis服务组件业务组件流控队列安全频控统登录图像合成视频维语Cos监控线上监控 / 诊断CDN缓存监控能志流量耗时告警BFFSSRIMPush数据中成功率云监控后台服务腾讯云存储2.3 在线教育前端研发效率具演进个功能从想法到落地的过程需求的命周期想法标需求预审功能

13、查需求宣讲 本地开发 持续集成 联调测试开发核路径 开发、联调、测试、发布CLI 开发具开发者核诉求1、解决繁琐的 WebPack 配置问题，并且要保持具扩展性，满各类前端场景。2、通能沉淀（主域重试、数据上报、单元测试），完成代码闭环。3、统计代码规范（录、组件、esLint、commit），降低合作成本。4、统前端作流（创建、开发、发布），标准化研发模式。减少重复轮的建设，就能提升轮的质量CLI 具演示解决前端开发的效率，让开发聚焦于业务友好的交互命令前端开发效率 需求开发效率前端只是软件开发体系的部分字段没对接档更新不及时，协议对不上业务祖传接，靠读代码理解含义接没对协议没对向协议开发，

14、提升联调效率业务联调具架构核能TCP RPCtolstoy ToolProto Buffer后台基本接测试沉淀协议档沟通 制定接协议录MOCK前端JSON项开发，协议先HTTP CGItolstoy 平台展示优化团队联调效率协议制定 以及 Mock后台接测试优化调试效率 省略业务调试调试是软件开发的必经之路多个需求同时联调，环境相互覆盖没有稳定环境，报错，接不稳定测试违反单原则，逻辑相互影响代码夹带调试，可能导致发布问题布置多解决环境冲突 & 保证环境稳定研环境隔离具加机器维护成本过whistleNohostwhistle 是什么？跨平台、可定制、免费 fiddlerIMWeb avenNoh

15、ost 是什么？可定制的云端 fiddlerNohost Tool匹配规则环境区分权限隔离户 A代理远程抓包账号过滤志分享户 B测试环境 A测试环境 BNohost 具展示解决开发调试、测试环节的体验问题桌端移动端开发完成进测试阶段通过具，优化效率开发测使 TAPD ， BUG 单管理闭环开发修复测试跟进产品体验BUG设定聊天机器，动化反馈测试完成后的发布阶段如何规范发布流程？发布覆盖发布效率低发布核诉求：简单、效、稳定发布冲突落地 G规范发布流程 & 动化流线发布周期发布前预发布正式环境发布完成代码合并环境清理发布检查强制 CRCI 构建静态资源部署Node 服务预发布验证离线包灰度评审单通

16、过CDN 资源创建评审单发布群周知锁定项发布服务发布群周知结束评审单释放发布环境Node离线包全量现验证Thanos 作台功能展示优化发布效率，降低发布险发布准备发布完成提升开发效率 解决产品质量监控体系建设完善核质量指标，如 PV、UV、Error 数量特性统计监控打开时间、业务接成功率、耗时性能指标数据考核定期输出邮件报表，业务划分责任跟进快速通知业务实时告警，邮件、短信、企业微信如何定位和解决问题最限度的还原问题查看并展示错误信息，对移动端持友好接 Sentry基于 ELK 存储，通过 requestId 完成从前到后的志查询能通过 APP 和 localStorage 进件户志上传全链

17、路志离线志建设定位问题具展示提升了开发定位问题的效率全链路志Sentry总结开发周期的核路径研发流线闭环打通 CI、接 CD开发 CLI开发构建CI/CD体验测试联调Whistle Nohost Tolstoy、运维sentry badjs monitor、 、 、全链路志Thanos发布解决效率和提升质量的法论规范具标：帮助开发者提升开发幸福感3、总结与展望腾讯在线教育前端架构演进思路云端体化统技术栈服务中台化功能组件化研发程化在线教育前端中台架构全景图业务基础撑腾讯课堂企鹅辅导ABCMouse开发具imt、whistle业务组件基础组件统登录组件视频组件消息推送组件付组件UI 组件IMUt

18、ils调试体验tolstoy、nohost前端中台动画组件IMWXUtils测试部署ars、织云、ak、CI数据中台运营活动中台前端数据中台数据校验平台数据配置平台数据查看wang、bear、罗盘Node、 ServerLess故障排除sentry、全链路消息推送系统服务撑平SSRBFF移动端运维企业号、助在线教育业务后台服务腾讯云 FaaS、BaaS 服务未来的技术展望新技术案的探索和落地VR/AR探索教学场景的虚拟现实落地TF落地机器学习领域的业务实践解决 JavaScript 计算慢的问题 WASMWebRTC业务深度实践，提升直播性能和户体验回归本质1、技术栈统和组件化的落地是个团队正式成熟的标志。2、制定合理的规范和建设有效的具是优化团队效率的有效段。3、基于业务的技术探索才能够让技术本身更有价值。