TWeb Conf 2019 精彩回顾

大会概述

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编辑器的实现，从简单编辑到专业排版》。介绍了一个最简单的编辑器如何实现。以及常见编辑器框架的选型，而且深刻分享了精确排版编辑器是怎么设计、实现以及使用。

感谢

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

感谢各位讲师的精彩分享与参会小伙伴的确定，是你们一块儿铸造了这场前端领域的技术盛宴。

感谢 TWeb Conf 全部的工做人员小伙伴们，对于大会的每一项准备工做，你们都专一而细致，尽职尽责。

感谢TWeb大会出品人：Joltwang，Jetyu，Youkunhuang，Bleanycao，Svenzeng，Zishunchen，Vicyao，Superzheng，Herbertliu对议题的收集以及筛选。

感谢TWeb成员团队：IMWebTeam、AlloyTeam、QQWebTeam、浏览平台部(SuperTEAM)、腾讯视频、微信小程序、微信小游戏、支付基础平台与金融应用线、腾讯IVWEB Team、腾讯新闻前端团队(TNFE)、腾讯看点Web团队的鼎力支持。

本届TWeb Conf 2019 圆满落幕！

TWeb线上回放视频课程（购买线下票的邮件已周知观看连接，线上票的可直接观看）：ke.qq.com/course/pack…