TWeb Conf 2019 精彩回顾

2019 年 11 月 21 日 IMWeb前端社区

大会概述

2019年11月16日，首届TWeb Conf前端大会在深圳科兴国际会议中心成功举办。大会现场参会人员近500人，线上直播课程报名人数近200人。通过公众号、知乎、掘金、KM等渠道推广，累计曝光近10W。

TWeb Conf是由腾讯Web前端技术委员会、腾讯各大Web前端团队联合推出全新的 < TWeb 腾讯前端技术大会 />，由腾讯公司主办，IMWeb Team, Alloy Team, QQWeb 承办。大会通过组织腾讯内各大前端团队以及邀请业界知名的讲师，将腾讯和业界上最前沿的前端技术、Web标准以及一线互联网大厂的优秀实践经验分享给大家，力求带给参会者一个高标准高品质的会议。

今年大会我们邀请了来自腾讯，阿里，W3C等19位业界知名前端专家及一线工程师前来分享，精心设计了三个分会场、四个主题方向：小程序、工程化、Node、跨端综合。各会场均座无虚席，讲师们的分享内容详实而有深度，从业务场景的问题解决，到各大开源框架的深度探究，引发了观众们踊跃讨论。

在此，也特别感谢本届TWeb大会的赞助商 腾讯开源，腾讯课堂Next学院 的鼎力支持。

感谢合作社区感谢合作社区腾讯云云＋社区、腾讯云TVP计划、腾讯文档、掘金、图灵社区、segmentfault、coding、编程狮。话不多说，接下来让我们赶紧回顾下各大会场的精彩内容。

主会场

会议开场由腾讯社交平台总经理，QQ技术委员会会长-黄俊洪发表开幕词：近年来，大前端领域蓬勃发展。从小程序，研发工具链，研发效能，node以及Serverless， RN之后的Flutter，百花齐放，前端的职能也越来越重要。随着腾讯的技术研发模式的变化，从烟囱式造轮子转向开源协同、中台化的技术体系，腾讯越发注重拥抱开源的技术路线。因此我们希望通过举办前端大会，将腾讯内乃至业界优秀的前端实践跟大家分享，共同促进行业的发展。

同时大会也邀请了公司内外前端领域的专家作为大会嘉宾一起交流。

第一场分享是由W3C中国区总经理-吴小倩带来的 《是时候了解一下 WebIDL》。在分享了 WebIDL，一门标准化、编程语言中立的浏览器接口描述语言。介绍了WebIDL的起源、基础语法、辅助工具、和 WASM 等新技术的融合，从另一个角度看看 Web 的成长，参与Web的设计，最后鼓励大家一起参与W3C标准的制定。

第二场分享由巧子科技创始人，前全民直播CTO-张云龙分享的 《Headless CMS》,一套适用于小微项目的业务中台解决方案。通过使用开源项目 strapi.io 来快速实现上线一个全新项目需要的RESTFul API接口。可通过可视化操作，配置数据结构，数据关系类型以及API字段类型。方便快捷，真乃中小企业开发者的一大福音。

第三场分享由腾讯在线教育Flutter技术负责人-涂金林带来的 《Flutter在腾讯企鹅辅导上的实践之路》。分享了腾讯在线教育团队作为Flutter技术的践行者之一，在安卓, iOS 和 Pad 上的原生应用如何嵌入flutter、原生页面与flutter页面如何混合切换、深入Flutter底层、内存性能优化、尝试Flutter For Web、动态更新的一系列实践经验，致力于将最好的体验带给用户。

上午最后一场分享由腾讯AlloyTeam高级前端工程师-郭林烁，分享 《大型Web项目可用性提升优化方案》。该分享围绕“脚本错误监控、优化、持续跟进”，“前端日志系统搭建、优化与打通”，“腾讯文档“白屏”监控体系与优化”这3方面来讲述大型项目的可用性提升优化实践思路。

其中通过脚本错误监控以及git提交记录来自动创建工单分发给对应开发者，通过woker线程进行上报从而不阻塞用户的交互；通过webpack插件-wait-external-webpack-plugin来确保js资源加载失败重试后的加载顺序以及结合Subresource Integrity、 CSP来做页面内容防篡改改劫持，都是不错的实践亮点。

小程序 & 工程化会场

小程序开发横空出世，转眼就成了目前最热的前端方向之一，小程序有哪些不为人知的秘密？又有哪些最佳实践？随着 Web 业务日益复杂化和多元化，工程化是提高编码、测试、维护阶段效率的重要法宝，如何提高性能和可用性等也是永恒的话题。本专题将邀请小程序内部一线工程师以及在工程化方面的优秀实践者，为大家一一道来。

第一场分享由腾讯web前端高级工程师-june带来的 《kbone：微信小程序同构方案新思路》。kbone是微信官方出品的一个基于 Vue / React 同构小程序的框架，旨在让开发者可以用最熟悉的方式来完成一个多端应用的开发，让代码可以更好地被复用，后续维护工作也更方便。june分享了该框架诞生的背景、框架实现方案、应用场景以及实践优化，干货满满。

第二场分享由微信游戏高级工程师，小游戏可视化工具项目负责人-廖泽恺带来 《小游戏可视化工具架构设计》 这一议题。介绍了基于 Scratch-locks 实现可视化配置小游戏的一套解决方案，以及通过PWA离线能力提高可用性的优化实践。

第三场分享由微信游戏B端前端负责人-彭自强带来的 《基于CLS的B端提效实践》。微信游戏团队面对各类运营需求，做了些探索，基于统一的组件语言规范来实现系统的快速搭建，借助可视化优化流程，加速多人协作的效率，试图将开发变得更简单。

第四场分享由腾讯Web前端高级工程师-苗兆丰 带来的《从 Jenkins 到 GitHub Actions —— CI 现代史》。介绍了近10年来CI 行业究竟是如何风起云涌，又是如何借云原生之力焕发新生。重点对比了Jenkins跟GitHub Actions的2种不同的方案。

最后一场分享由腾讯ISUX高级UI开发工程师-陈挺 带来的 《如何让机器读懂设计》。介绍了ISUX用户体验设计部深蓝研发组的一套UI自动化技术。通过计算机技术理解设计师的意图，通过OpenCV视觉库及AI技术获取设计稿中的参数，快速实现UI还原。

Node & 架构会场

大前端时代已然到来，而Nodejs为前端带来了更多可能，SSR、性能等相关话题也是经久不衰，近期Serverless等方向也是如火如荼。本专题将专注于Nodejs传统实践以及更多前沿技术探索，为大家带来最佳实践和更多思考。

第一场分享由腾讯web前端高级工程师，omi开源框架作者-张磊带来的 《腾讯OMI 框架前端生态赋能与创新实践》。OMI 是腾讯2018 年正式开源的前端跨框架框架(Cross-Frameworks Framework)，本次分享作者介绍了OMI的设计思路以及OMI + Web Components、OMI + Preact、OMI + React、OMI + Vue、OMI + 小程序、OMI + Kbone等相关等内容。

第二场分享由Vue语法编译引擎aga作者-段隆贤带来的 《极致SSR：高效率构建高性能Web同构页面》 这一议题。本次分享主要介绍SSR编译时的优化方案，该方案通过源码的上下文相关分析，从AST推导不同的分块间、分块与数据间的依赖，实现自动化分块传输;在模板层面, 把Vue语法编译成字符串的拼接，经测试在服务端通过aga编译后的代码比Vue官方的VDOM快20+倍, 整体提升SSR开发效率和性能。

第三场分享由阿里巴巴前端技术专家-水澜带来的 《Serverless SSR 实践》。介绍了利用Rax如何简单高效地开发 SSR 应用，整套的 SSR 应用开发方案。通过 Rax 的 CLI 工具可以快速创建、调试、构建 SSR 应用，并可以以 FaaS 形式的发布到阿里云等函数托管平台。同时，通过不断优化 Rax 内核与框架，Rax 在 Server 端的渲染性能是行业内其他主流框架的数倍，领先的自适应 Hydration 渲染模式，即使在两端版本不匹配的情况下也可以最大程度地复用 SSR 直出的内容。

第四场分享由腾讯IMWeb前端工程师-带来的《腾讯教育 Serverless 实践及探索》。介绍了腾讯在线教育Serverless的实践和探索方案，如何利用Serverless提高产品迭代开发的效率，以及未来的Serverless的展望。

最后一场分享由阿里前端技术专家-潕量带来的 《阿里控制台系统提效之路》。本次演讲从阿里巴巴内部遇到的问题出发，通过抽象组件能力解决阿里内部各BU主题定制的诉求，通过工作流的优化解决设计前端协同效率问题，通过业务能力的沉淀解决开发效率问题。

跨端 & 综合会场

跨端应用是为了在增加代码复用，减少多个平台差异性适配，提升开发效率的同时，带来比 Web 更好的体验、性能，更多的可能。回归Web本身，又有哪些新技术，新玩法，会带给人怎样的启迪呢？本专题通过业内以及腾讯的前端技术实践分享，为大家在研发效率和性能优化以及Web创新等其他方面提供借鉴和帮助。

首场分享由淘系无线架构团队负责人-元彦带来的 《使用React 构建Flutter应用》。介绍了通过 Kraken 框架，使用React开发 Flutter 应用的方案。在 Flutter 高性能渲染的基础上，使之具备动态性和开发效率的提升。同时如何利用Kraken基于 Chrome Debugging Protocol 的真机调试方法（支持断点、打印、异常、查看对象结构、堆栈等），让开发者可以像调试 Web 一样调试 Flutter 应用。

第二场分享由腾讯IVWEB PWA 项目负责人-王涵冰带来的 《企业级项目基于 PWA 缓存的最佳实践》。介绍了 NOW 直播业务在 PWA 的优化过程中，在不同的业务场景中一步步进行的优化实践。重点介绍了针对一级、二级页面的性能优化方案，应对缓存出错的紧急情况处理，并最终沉淀出一套完整的 PWA+ 优化方案。

第三场分享由QQWeb团队核心开发-齐霁带来的 《手机 QQ 勋章墙技术内幕——移动端流畅 3D 渲染指南》。介绍了手机 QQ 3D 勋章墙业务开发中的四大难题：如何渲染带用户昵称的 3D 模型、如何实现流畅的可交互动画、如何打破次元壁、如何渲染半透明过渡动画。以及移动端使用 WebGL 实现业务中可能遇到的问题，流畅可交互动画背后的秘密。

第四场分享由微云前端负责人，AlloyTeam成员-程海斌带来的 《基于WASM的文件上传加速实践》。介绍腾讯微云、腾讯文档、腾讯企点业务中文件上传的前端方案，如何通过秒传，多通道上传，断点续传和WASM应用实现web端上传速度的极致提升，带来更好更稳定的用户侧上传体验，通过结合在上传计算场景的应用实践给大家讲解WASM内部的运行机制，JS与WASM数据传递的内部实现及WASM是如何提升性能。

最后一场分享由腾讯文档Word负责人，TIM Android负责人-张祥给大家带来的 《Web编辑器的实现，从简单编辑到专业排版》。介绍了一个最简单的编辑器如何实现。以及常见编辑器框架的选型，并且深入分享了精确排版编辑器是怎么设计、实现以及使用。

感谢

经过一天的精彩分享后，讲师以及嘉宾，工作人员一起在签名墙进行了合影留念以及聚餐活动。