2019TLC大会精彩回顾—大前端·信息流

整体概况

2019年8月17日，第三届TLC大会在科兴科学园国际会议中心完美落下帷幕。作为一年一度的技术盛会，本次大会云集国内外19名技术专家，现场参会人数超过600人，线上直播（腾讯直播）人气6000 。宣传覆盖40 媒体及技术平台，线上曝光10w ，社区全覆盖。

本届TLC大会的主题是“大前端，信息流”，由腾讯NOW直播IVWEB团队出品。讲师阵容堪称豪华，有Microsoft Edge研发经理&webpack维护者Sean Larkin、前手机淘宝前端负责人程劭非(winter)、腾讯云实时音视频技术负责人蒋磊、阿里巴巴前端技术专家大漠、Vue.js 团队成员蒋豪群等国内外知名技术专家。

会议持续一天，上午在主会场举办，下午分为4个技术分会场，分别为大前端专场、信息流专场、跨平台技术专场、IVWEB技术专场。议题共19个，涵盖了Webpack5、Vue、WebAssembly、小程序、Flutter、Node.js、TRTC 等热门技术在音视频、大前端、信息流等领域的实践与经验，同时还有技术管理领域的一些心得与分享。

本次大会场面火爆，现场座无虚席，且延续了过往两届积累的优良口碑，现场参会者，不管是与观众、讲师还是嘉宾，都一致给予了高度评价。相比第二届TLC大会，本次大会议题更为聚焦，参与的开发者更多，在业内具有更高的影响力。随着本次大会的成功举办，希望IVWEB团队可以继续助力并引领大前端、音视频、信息流技术领域的发展，为广大开发者提供更为广阔的技术交流平台。

附：TLC 2019官网地址，TLC 2019讲师PPT下载地址

大会开场

为TLC开幕致辞的是NOW直播总经理吴奇胜。奇胜用谦虚幽默的方式，向在座的小伙伴分享了他从业以来的一些经历和感悟。从PC时代的Q 应用，再到移动互联网时代的H5和小程序，技术、理念在不断更新，如何用更好的性能、更便捷的体验服务我们的用户是C侧成功的关键。

同时关于直播业务和信息流业务奇胜还给出了自己的思考。直播作为信息流的一部分，跟信息流的无缝叠加，能丰富信息流并且带给用户更好的交互和体验。

对于本届TLC大会奇胜希望，大会能帮助参会的小伙伴们更好地理解技术趋势，大家一起分享、交流、成长，都能够有所收获。

第二位开幕致辞的嘉宾是TLC大会发起人兼出品人、腾讯技术专家、IVWEB团队负责人刘恒兵(河伯)。河伯首先对到场的嘉宾、讲师、参会同学表达了感谢，并对IVWEB团队团队近一年来在基础建设、社区分享、开源共建方面所取得的成绩进行了简要汇报。

同时，河伯结合历史背景和技术趋势，回顾了历届TLC大会的概况，以及本次TLC大会的主要议题简要。

在社区方面，河伯回顾了IVWEB团队近期着力做的几个事情，包括高校技术沙龙、社区影响力建设、围绕性能&效率而开展的技术项目（<u>Feflow</u>/<u>Aegis</u>）等。

主会场

《Breaking not so Bad: What’s new in webpack 5 and how you can prepare!!》

第一场是Microsoft Edge 研发经理、webpack 维护者Sean Larkin为我们带来的演讲《Breaking not so Bad: What’s new in webpack 5 and how you can prepare!!》。

目前webpack 5 还处于 alpha 阶段，webpack团队正准备发布新的 Beta 版本。Sean Larkin为参会者讲述了webpack 5 中新加入的一些令人振奋的功能，之所以做出这些突破性变化的原因，以及开发者如何从 webpack 4 升级到 5。此外，Sean Larkin 还对 webpack 的下一步规划进行了展望，同时鼓励并希望在场的开发者同学能够更多地参与到webpack的共建当中。

《聊聊技术管理成长中的对与错》

第二场是由前手机淘宝前端负责人程劭非(winter)老师为我们带来的演讲《聊聊技术管理成长中的对与错》。

winter老师首先简单介绍了下他毕业以来，从微软亚洲研究院，到盛大创新院，再到淘宝的从业经验。接着，winter老师跟参会者分享了他自走上管理岗位以来所犯过的 “三个错误”，包括：1、试图给设计师定规范 2、让前端工程师学服务端技术做全栈 3、试图用JSON配置应对业务变化。

通过戏谑幽默的口吻，winter老师分享了这些年他在技术、管理上一些深入的思考以及宝贵的经验，现场参会者获益颇多。

《实时音视频客户端技术实践》

第三场是腾讯云实时音视频技术负责人蒋磊老师为我们带来的演讲《实时音视频客户端技术实践》。

对直播行业来说，实时音视频技术是平台依赖生存和发展的技术根基，蒋磊老师通过40分钟的分享，给我们带来了一线的宝贵实践经验。

蒋磊老师首先简要介绍了实时音视频技术的应用场景，以及过程中可能遇到的各种技术挑战，如网络时延、丢包、卡顿等。接下来，蒋磊老师分享了腾讯云TRTC低延时互动音视频方案，针对上述挑战所做出的应对和优化，如根据网络状态自适应调整传输策略、通过带宽换延时、通过RPS/PLC降低丢包的影响等。此外，蒋磊老师还分享了对产品质量的监控与维护，以及线上实践过程的心得等。

大前端专场

大前端就是所有前端的统称，大前端的出现让我们开发一个新产品的时候服务只需要写一次，但是可以面向更多的产品，例如网站、Android客户端、iOS客户端和微信小程序等。有了跨平台技术，各个平台的差异性就抹平了，开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。大前端不仅会成为移动开发与Web前端的发展趋势，也将会是未来的显示设备终端的开发技术趋势。

《探索动效开发模式》

第一场分享的嘉宾是来阿里巴巴前端技术专家大漠老师，他分享的主题是《探索动效开发模式》。

大漠老师的常用昵称是“大漠”，W3CPlus创始人，目前就职于淘宝。对HTML5、CSS和CSS处理器等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS和动画的研究。现在主要在探讨学习JavaScript、React和Vue相关技术知识。他也是CSS、CSS处理器和Drupal中国布道者，并在2014年出版《图解CSS3：核心技术与案例实战》。

大漠老师的演讲大纲如下：

动画vs.动效
动效的价值和体系
开发动效的技术
动效的开发模式
微动效探索

演讲开始，大漠老师就为我们展现了手淘丰富的动画效果，并为我们分析了动画和动效的区别，以及动效的价值。动效可以满足用户心理预期，让用户清晰地感受到当前所处场景和层级关系，并且能引导用户注意力，给用户制造惊喜感，愉悦用户。

在说完动效的价值之后，大漠老师以多年的经验，为我们总结了动效的开发技术、开发模式以及响应的难点。最后为我们介绍了他对微动效的探索，收获满满！

《Vue.js 高效开发之路》

第二场分享的嘉宾是来自Vue.js 团队成员蒋豪群，他的演讲主题是：《Vue.js 高效开发之路》。蒋豪群是 Vue.js 团队成员，全职开源开发者，曾就职于阿里巴巴和蘑菇街。

蒋豪群老师的演讲围绕着当下最火的前端框架之一的Vue，他的演讲从下面几个方面切入：

1、vue的设计理念

2、代码技巧

3、调试技巧

其中，蒋豪群老师说到，模版DSL、响应式数据、渐进式框架是Vue 的核心设计理念。在讲第二部分“代码技巧”的时候，蒋豪群老师给我们讲了几个比较实用技巧，根据类型可以分为“错误处理”、“减少重复”两个方面。最后，蒋豪群老师根据自己多年的开发经验，为我们总结了常见的debug方法，收获颇丰！

《小程序.云开发在猫眼电影小程序运营活动场景下的应用》

第三场分享是由来自猫眼娱乐资深前端工程师高英健给我们带来的《小程序.云开发在猫眼电影小程序运营活动场景下的应用》。

高英健老师于15年3月加入原美团，参与猫眼小程序与新版触屏版的从0到1开发，负责过猫眼小程序、触屏版选座交易业务的开发。目前负责猫眼触屏版、小程序运营相关业务的开发，对小程序相关生态有丰富的开发经验。

高英健老师的演讲内容大纲如下：

背景
现状
探索
收益
规划
总结

高英健老师的演讲以一种幽默有趣的对话形式，为我们情景再现，生动、有代入感的说明了当时的猫眼电影小程序开发时遇到的困难，以及遇到困难时她是怎么想怎么处理的，一步一步完善解决方案，最终攻克了小程序复用的难题。

《使用 Nodejs 构建 Serverless 框架》

第四场的分享嘉宾来自美团点评高级前端工程师龙佳文。他的演讲主题是《使用 Nodejs 构建 Serverless 框架》。

龙佳文老师目前主要负责 Serverless 云函数平台和工具链建设。致力于提升开发者效率和用户体验，曾参与前端工程化方案建设，推动了来自多个BG 的近两百人的前端团队的开发模式的升级，也参与日均千万级前端离线化和增量更新方案的。热爱开源，在 Github 有千级 Star 的开源项目。目前关注 Flutter 和 Nodejs以及 Serverless 方向。

龙佳文老师的演讲大纲如下：

Node.js的应用场景和问题
Serverless是什么
Node.js Serverless方案概况
总结和展望

开场，龙佳文老师用了一个比较有代表性的例子说明了当下比较有代表性的问题，开发中前后端因为过度耦合而导致效率低。为了解决这个问题，进一步思考，循序渐进，最终引除了serverless的概念。并阐述了serverless在美团的开发中是怎么实现的。

跨平台技术专场

随着技术的发展，前端应用已能够流畅的运行在多个平台上。跨平台开发是为了增加代码复用，减少开发者对多个平台差异适配的工作量，降低开发成本，提高业务专注的同时，提供比Web更好的体验。

《用 React Hooks 重构你的小程序》

第一场分享是由李伟涛老师为我们带来的《用 React Hooks 重构你的小程序》。

李伟涛老师是来自京东的高级前端工程师，其致力于负责团队前端框架与研发工具的开发，同时负责团队开源生态的建设，主导过多个开源项目，例如多端统一开发框架 Taro。

本次分享的主要内容是：

什么是Hooks
Hooks在Taro的实现以及实战

通过讲解在 Taro 中对 Hooks 的探索，我们可以使用Hooks API来摒弃 ES6 Class 或其它框架例如高阶组件、依赖注入、Behaviors、Traits 等等高大上的名词和概念，将小程序开发的复杂业务逻辑化简为一个个可预测的、可测试的普通函数。

《多端一体方案 Hippy 的架构和实战》

第二场分享是由旷旭卿老师为我们带来的《多端一体方案 Hippy 的架构和实战》。

旷旭卿老师是来自腾讯浏览平台产品部的高级前端工程师，是腾讯自研的高性能前终端一体化框架 Hippy 的前端负责人。

本次分享的主要内容是：

Hippy的设计思想
Hippy-React/Hippy-Vue的设计架构

Hippy 作为前终端的一体化方案，其拥抱W3C标准，通过自绘和源生混合绘图组件复用以追求极致性能，并不断接入实现更多优质组件。其已经在浏览器上应用了数十个内外部业务，承载了数十亿计的用户访问量，拿下了公司内部2018年年度代码文化奖。

《Flutter桌面应用开发》

第三场分享是由郭力恒老师为我们带来的《Flutter桌面应用开发》。

郭力恒老师是来自广发证券的前端架构师，负责基于H5技术的股票交易终端的研发。其不仅精进于前端，还对Rust等编程语言充满极大的兴趣。

本次分享的主要内容是：

Flutter桌面端的运行原理
Flutter与底层的通信

郭力恒老师较为详细的介绍了Flutter在桌面端运行的优势和现状，以及如何使用跨端开发语言rust来开发桌面Flutter运行环境。随着Flutter技术的普及，社区生态的日益健壮，Flutter成为多端开发方案只是时间问题。

《微保小程序的开发与架构实践》

最后一场是由赵小溪老师为我们带来的《微保小程序的开发与架构实践》。

赵小溪老师是来自微保（腾讯旗下保险平台）的前端架构师，其擅长小程序、WEB平台的基础架构搭建、工程化的规划与实施。

本次分享的主要内容是：

微保小程序的技术架构
小程序开发及项目管理的优化

面对日益多元化的业务内容，日益巨大的小程序体积。微保小程序通过采用小程序子包方案，代码分库管理，推动小程序H5化、产品模板化，自动化发布工具开发等手段，达成单周迭代，40 子仓库管理，定时自动化发布，极大的分治解耦了各项业务，提高了小程序的持续集成开发以及快速迭代。

信息流专场

信息流已经成为互联网行业内容领域的重要赛道，各个专业的信息流团队不断地在其中积累大量的优秀实践，在社交，文娱，新闻信息等场景使用 WebAssembly, Node.js，Android Plugin 等技术构建高质量的产品应用。本次大会请到几位信息流领域的技术大咖，给我们带来当前信息流领域的最新技术实践的分享。

《如何打造高可用的Nodejs框架》

第一场分享是由张龙老师带来的《如何打造高可用的Nodejs框架》。

张龙老师2014年加入QQ浏览器，现任高级工程师，主要负责浏览器首页卡片、Feeds后台、Feeds Hippy等业务，致力于前端性能及nodejs方向研究。

本次分享，张龙老师首先提出构建高可用的 Node.js 框架面对高性能，稳定性，一致性，可信度等方面不同思维的转变，要求框架达到 TPS 高，柔性可用，最终一致性与对第三方调用有兜底方案等特点，并支持异构，快速构建与实现完整的服务治理。接下来张龙老师针对 RPC 调用，传输协议，编解码等方面讲解具体实现高可用的方案与需要注意的方面。最后，总结了三个方面的优化手段与技术方案以及对未来的展望。

《Tencent Shadow：我们是如何在成熟的Android插件技术领域继续创新的？》

第二场分享是由平安科技安卓技术专家郭琨老师带来的《Tencent Shadow：我们是如何在成熟的Android插件技术领域继续创新的？》。

郭琨老师是前腾讯高级工程师，平安科技安卓技术专家。8年Android开发，先后参与了手机迅雷，手机QQ，NOW直播等大型项目的开发，具有丰富的项目经验。在插件技术领域，创新的开发了零反射实现的Shadow插件框架，并在正式在github上对外开源。

郭琨老师以 NOW 直播 App 相关截图和示例说明，让现场的同学了解什么是 Android 插件化开发，以及 Tencent Shadow 框架的目标 —— Github 上第一个创新性地以零反射、无 Hack 的方式实现的插件框架。本次分享里，郭坤老师以相关产品数据为主线，以 Android 插件体系的历史为辅线，翔实清楚地向现场的同学解明了产品里插件业务的背景和必要性、实现插件框架的各种难点以及解决方案、以及零反射无 Hack 的 Shadow 插件是如何在众多插件框架里脱颖而出的。

会后，不少同学提出了各种提问，比如讨论了干货满满的 Shadow 底层实现、又比如跟郭坤老师讨论了 Shadow 框架可能带来的软件伦理问题 —— 插件框架可能会让 App 随意下载 Apk 导致生态混乱，对此郭坤老师持中立乐观态度：技术无罪，开发者无法控制技术将会被用于做什么，我们只需要专注技术本身即可。

《基于WebAssembly的浏览器端视音频处理》

第三场分享是由夏梦丽老师带来的《基于WebAssembly的浏览器端视音频处理》。

夏梦丽老师2014年本科毕业于浙江大学数字媒体技术专业从事前端开发，2016年开始在淘宝直播开始前端浏览器端视频播放相关技术，专注前端多媒体领域，对视音频基础、FFMpeg框架、浏览器多媒体内核、WebAssembly等跨端方案有深入了解。

本次分享，夏梦丽老师首先介绍了视音频领域在前端领域的发展概况，面对直播元年之后日益增长的视频性能要求，在团队实践中使用 WebAssembly 作为浏览器端视频编解码技术的基石。使用 WebAssembly 对于一线直播产品所在公司在带宽上的资金耗费成本会带来极大的降低幅度，并通过 demo 视音频生动地讲解使用 WebAssembly 的编解码效果。然后夏梦丽老师讲解了在团队中 WebAssembly 的技术方案，通过 FFmpeg WebAssembly 在 worker 进程中使用内存环进行解封装与读帧实现对音视频的高性能解码。

最后夏梦丽老师对未来进行展望，目前 WebAssembly 在解码性能上相比 native 仍有不小差距，在移动端(安卓)存在兼容性问题，但未来在计算机视觉，3D图形等领域基于 WebAssembly 开发高性能的 web 应用仍有很大的发展空间。

会后不少同学向夏梦丽老师提问，比如提问其 Demo 实现里环状数据结构的具体实现方式又或者对于 WebAssembly 里编译优化参数的设置等等，现场火爆

《信息流视频清晰度策略Nodejs服务架构分享》

第四场分享是由郑国辉老师带来的《信息流视频清晰度策略Nodejs服务架构分享》。

郑国辉现就职于腾讯PCG平台与内容事业群信息流平台产品部，期间先后负责QQ看点、看点视频、看点小程序、快报垂类频道、手Q基础功能等web前端和Nodejs后台的开发工作，对web与客户端结合的应用优化、Nodejs有深入的研究。

郑国辉老师首先提出在信息流视频产品中视频秒开与视频清晰度优化是最为关键的两个点，针对 “快” 与 “清” 两个方面，郑国辉老师讲解了所在团队为了打造极致的体验，在 Native 端使用内容数据，url，dns 解析等方面进行预加载与缓存，优化效果显著，视频打开时间从 1690ms 优化到 214ms，秒开占比 95%。在视频清晰度面对的技术难点比如更高的码率与各种不同网络环境，使用优化转码策略，并通过对网络环境与机型的数据分析，指定不同的下发策略下发对应的视频地址，对此郑国辉老师所在团队搭建了基于 Node.js 的策略配置平台，使用腾讯开源的 TSW 运维容器为整体业务高可用保驾护航，并获得了公司级成本优化突破奖。

会后提问环节中，有同学提问了 nodejs 的性能问题，郑国辉老师说，在他的这个业务场景下，密集型计算的性能不在考虑范围，更重要的是并发和 IO，这方面性能的话是足够跑得起业务的，此外也有同学提问了 TS 开发的相关问题。