写点什么

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

  • 2020-02-12
  • 本文字数:736 字

    阅读完需:约 2 分钟

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

GMTC 深圳 2019 大会上,曹海歌讲师做了《腾讯在线教育大前端架构演进之路》主题演讲,主要内容如下。


演讲简介


近年来,随着 jQuery 的落幕,三大框架的割据以及小程序的爆发,大前端的发展也经历了从静态页面到 JavaScript 跨时代的诞生,再从 PC 端到移动端的转向,以及由依赖后端到前后端分离的架构演变。


本次演讲主要分享腾讯在线教育前端团队近年来大前端技术架构演进历程,如 Hybird 方案、离线包方案、PWA 结合 SSR 方案、以及 RN 动态化方案的落地和执行。结合具体实例进行分析,阐述团队是如何进行业务性能优化以及为提升研发效率进行的前端工程化体系建设。


内容大纲


  1. 大前端技术架构演进

  2. (1) 浏览器新特性的发展 PC、H5

  3. (2) 结合后台的技术方案 PWA 、SSR

  4. (3) 结合终端的技术方案 RN、Flutter

  5. (4) 小程序动态运营方案 微信小程序

  6. 在线教育大前端架构演进之路

  7. (1) Hybird 、离线包方案

  8. (2) RN 方案的业务落地

  9. (3) PWA + SSR 项目实践

  10. (4) Node.js 构件业务矩阵

  11. 大前端架构的未来展望

  12. (1) 效率工具规范化

  13. (2) 基础能力服务化

  14. (3) 领域模型智能化


听众受益点


  1. 深刻理解大前端技术架构的演进背景及现状,使团队在发展过程中更加理解前端工程化;

  2. 通过我们的实践案例充分思考,总结经验提升团队效率。


前沿亮点


  1. 理清前端产品化过程中的痛点;

  2. 如何在前端工程化中利用工具提升团队效率。


知识储备


有一定前端项目经验,对前端开发有一定的了解。


讲师介绍


曹海歌,腾讯前端高级工程师。


曹海歌,腾讯前端高级工程师,IMWeb 团队成员。2016 年加入腾讯,负责企鹅辅导前端架构设计、跨平台方向以及 Node 服务建设的工作,参与了从 React Native 到自研跨端框架 Plato 跨平台框架研发,对跨平台、Node.js 开发有丰富的经验。












完整演讲 PPT 下载链接


https://gmtc.infoq.cn/2019/shenzhen/schedule


2020-02-12 17:113038

评论

发布
暂无评论
  • 开篇词|为什么要选择 React Native 做你的跨端方案?

    可以预见,React Native 新架构将会给我们带来巨大惊喜。

    2022-03-28

  • 前端【js】学习 JavaScrip 心得

    先来看看JavaScript1、生产出一大堆库:jQuery、MooTools、Prototype、Dojo、YUI、ExtJS、ZeptoJS......2、生产出一大堆框架:AngularJS、VueJS、ReactJS、EmberJS、NuxtJS、ThreeJS......3、生产出一大堆衍生语言:TypeScript、JSX、CoffeeScript......4、E

    2022-05-14

  • 结课测试|“说透中台”100 分试卷等你来挑战

    我给你准备了一个结课小测试,来检验下自己的学习效果吧!

    2020-04-14

  • OPPO 对话式 AI 助手小布演进之路

    导读:本文将介绍 OPPO 对话式 AI 助手小布的技术演进之路,以及小布对话技术团队在这一过程中的思考和实践。

    2023-03-15

  • 边缘计算在视频直播场景的应用与实践

    9月24日,火山引擎开发者社区第九期 Meetup 圆满落幕,来自腾讯云、七牛云、火山引擎的技术专家从抖音同款 RTC 能力、直播系统架构、边缘计算服务、视频云存储等方面为大家详细介绍直播创新玩法下的技术进化与实践。火山引擎边缘计算产品负责人沈建发分享了边

    2022-09-28

  • 从源码角度看 React-Hydrate 原理

    React 渲染过程,即ReactDOM.render执行过程分为两个大的阶段:render 阶段以及 commit 阶段。React.hydrate渲染过程和ReactDOM.render差不多,两者之间最大的区别就是,ReactDOM.hydrate 在 render 阶段,会尝试复用(hydrate)浏览器现有的 dom 节点,并相互

    2023-01-05

  • 前端开发之函数式编程实践 | 京东云技术团队

    函数式编程是一种编程范式,它将程序抽象为函数和数据结构,通过函数调用来实现程序的功能,并且函数可以作为参数传递给其他函数。在 JavaScript 中,函数式编程可以实现面向对象编程的一些功能,比如抽象、封装、继承和多态等。

    2023-05-15

  • 从源码角度看 React-Hydrate 原理

    React 渲染过程,即ReactDOM.render执行过程分为两个大的阶段:render 阶段以及 commit 阶段。React.hydrate渲染过程和ReactDOM.render差不多,两者之间最大的区别就是,ReactDOM.hydrate 在 render 阶段,会尝试复用(hydrate)浏览器现有的 dom 节点,并相互

    2022-10-17

  • 加餐一 | 这 5 本关于物联网的好书,值得一读

    今天,我会为你推荐5本非常值得读的书,如果你想从事物联网行业,一定不要错过。

    2020-12-09

  • JavaScript 类型转换

    JavaScript中,类型转换只有三种:

    2022-05-20

  • 社群基础搭建 5 步曲 - 社群运营规划

    2022-11-21

  • 【JavaScript】数值转换为数值

    2022-05-16

  • 前端新手必读:IndexedDB 全面指北

    IndexedDB是一种在浏览器中使用的客户端数据库,它提供了一种存储和检索大量结构化数据的方式。与传统的Web存储技术(如LocalStorage和Cookies)相比,IndexedDB具有更强大的功能和更高的性能。

    2023-08-13

  • Serverless 应用架构转型

    Serverless架构是一种全新的软件架构方式,虽然其有各种各样独有的特点,但是Serverless应用和传统的软件应用一样,软件的设计、开发到交付需要经历一个完整的软件生命周期,需要通过具体的手段保证应用的交付质量。

    2022-10-17

  • 27|跨端的机遇:小程序、Flutter 和 React Native 原理对比

    如果只学那些日常会用到的、别人也会知识点,我的职业竞争力在哪里?

    2022-07-01

  • 从源码角度看 React-Hydrate 原理

    React 渲染过程,即ReactDOM.render执行过程分为两个大的阶段:render 阶段以及 commit 阶段。React.hydrate渲染过程和ReactDOM.render差不多,两者之间最大的区别就是,ReactDOM.hydrate 在 render 阶段,会尝试复用(hydrate)浏览器现有的 dom 节点,并相互

    2022-11-25

  • 从源码角度看 React-Hydrate 原理

    React 渲染过程,即ReactDOM.render执行过程分为两个大的阶段:render 阶段以及 commit 阶段。React.hydrate渲染过程和ReactDOM.render差不多,两者之间最大的区别就是,ReactDOM.hydrate 在 render 阶段,会尝试复用(hydrate)浏览器现有的 dom 节点,并相互

    2023-03-01

  • React 中常见的 TypeScript 定义实战

    Fiber 架构是React16中引入的新概念,目的就是解决大型 React 应用卡顿,React在遍历更新每一个节点的时候都不是用的真实DOM,都是采用虚拟DOM,所以可以理解成fiber就是React的虚拟DOM,更新Fiber的过程叫做调和,每一个fiber都可以作为一个执行单元来处理,

    2022-11-18

  • Unity 实战问题 -WebGL 问题集锦 - 下篇

    众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!专注于 Android/Unity 和各种游戏开发技巧,以及各种资源分享(网站

    2022-07-19

发现更多内容

Svelte 最新中文文档翻译(5)—— 基础标记

冴羽

JavaScript vue.js 前端 Svelte SvelteKit

高性能网络SIG双月度动态: 三年磨一剑,virtio-net AF_XDP 完成 Linux 主线零拷贝支持

OpenAnolis小助手

操作系统 龙蜥社区 龙蜥SIG月报

大模型选择指南:功能、参数和优化

JustYan

人工智能 大模型 生成式AI

火山引擎「车鱼视听」“汽水音乐”蔚来车端首发,带来更多车载音乐体验选择

极客天地

性能测试丨分布式性能监控系统 SkyWalking

测试人

软件测试

Coolbpf最新特性解读:profiler功能上线,助力性能分析和优化

OpenAnolis小助手

操作系统 ebpf 龙蜥技术 coolbpf 龙蜥系统运维联盟

喜讯!龙蜥操作系统荣获 CSDN 2024 中国开发者影响力年度评选大奖

OpenAnolis小助手

操作系统 龙蜥操作系统 Anolis OS OS Copilot

龙蜥社区加入智算产业联盟,助力构建开放、包容、普惠的 AI 新生态

OpenAnolis小助手

操作系统 龙蜥社区 智算产业联盟

1688 买家订单,订单物流,订单回传接口系列(1688 寻源通 API)

tbapi

1688API 1688订单接口 1688订单物流接口 1688寻原通

Svelte 最新中文文档翻译(6)—— if、each、key、await 逻辑区块

冴羽

vue.js 前端 web前端 Svelte SvelteKit

龙蜥开发者说:我与龙蜥社区相遇相惜的这些年 | 第 29 期

OpenAnolis小助手

操作系统 龙蜥开发者说

总结与展望,龙蜥社区第 30 次运营委员会会议线上召开

OpenAnolis小助手

操作系统 龙蜥运营委员会会议

回顾与展望,SOMA年终工作会议暨Meet Up圆满举办

OpenAnolis小助手

操作系统 龙蜥社区系统运维联盟

性能测试丨JVM 性能数据采集

测试人

软件测试

“AI拜年”火遍朋友圈,营销的终局是拼技术

Alter

龙蜥社区落地开源生态发展合作倡议新进展,推出内核 kABI 和配置统一规范

OpenAnolis小助手

开源 操作系统 龙蜥社区

龙蜥衍生版 KOS 助力厦门高校创新实验室智算 300 节点成功迁移 | 龙蜥案例

OpenAnolis小助手

操作系统 龙蜥社区 龙蜥操作系统 龙蜥案例 Anolis OS

人工智能丨Midscene:让UI自动化测试变得更简单

测试人

人工智能 软件测试

火语言RPA--超级鹰打码

火语言RPA

《CPython Internals》阅读笔记:p360-p377

codists

CPython Internals

分布式系统学习10:分布式事务

卷福同学

分布式事务 分布式系统

性能测试丨内存火焰图 Flame Graphs

测试人

软件测试

深度解析:利用商品详情 API 接口实现数据获取与应用

科普小能手

数据挖掘 淘宝 电商 API 接口 跨境电商运营

解决Python处理大规模数据的性能瓶颈,人大教师向你推荐这四种工具!

ModelWhale

Python 智能体 大模型 加速包

和鲸Heywhale荣获知名出版社 “2024 年度优秀合作伙伴”奖,共筑科技知识传播新未来

ModelWhale

出版社 图书出版

AI 语音独角兽 ElevenLabs C 轮融资估值超 30 亿美元;港科大 Llasa TTS:15 秒声音克隆支持中英双语

声网

参与有奖 服务器操作系统用户调研问卷(2024年度)

OpenAnolis小助手

操作系统 龙蜥社区

AI 发展是否正在放缓?AI 发展将驶向何方?

Baihai IDP

程序员 AI 白海科技 LLMs

性能测试丨Nginx 性能数据监控

测试人

软件测试

Cloud Kernel SIG 月度动态:ANCK 新增支持多家厂商新硬件特性、发布多个小版本

OpenAnolis小助手

操作系统 龙蜥社区 龙蜥SIG月报

更安全、更丰富 、更兼容 Anolis OS 23.2 版本重磅上线

OpenAnolis小助手

开源 操作系统 龙蜥社区 Anolis OS Anolis OS 23.2 版本

腾讯在线教育大前端架构演进之路_GMTC_曹海歌_InfoQ精选文章