IMWebConf 2018 圆满落幕，精彩内容回顾

2018 年 10 月 18 日 IMWeb前端社区

2018年10月14日，第七届IMWebConf前端大会在深圳科兴国际会议中心成功举办。今年大会现场参会人员近500人，线上直播参与人数累积近千人。

IMWebConf 是由腾讯前端 IMWeb 团队发起的国内顶级前端技术领域开发者大会。今年大会依旧汇聚了许多前端大咖，并且议题更加紧贴前端前沿热点，深入探讨一线前端技术。大会邀请了国内外讲师19名，包括W3C Webapps 组联合主席Chaals Nevile、英特尔高级工程师闫绍博、Adobe 资深 UED张文婷等技术专家，以及来自百度、阿里巴巴、美团、经典、小米、腾讯等国内一线科技公司的顶级开发者，总计探讨了17个议题。

今年大会分为了Web前端领域的标准与前沿、小程序快应用、Native 跨端融合、Node 服务与性能、可视化与动画五大会场。各会场均座无虚席，讲师们的分享内容详实而有深度，引发了观众们踊跃讨论。圆桌会议环节，观众更是与大咖们面对面交流，从业务场景的问题解决，到各大开源框架的深度探究，现场氛围持续爆棚。会场贴心的茶歇也让大家感受到了大会主办方的用心。话不多说，接下来让我们赶紧回顾下各大会场的精彩。

标准与前沿

会议开场由腾讯技术总监王辉发表开幕词，向大家分享了在前端前行道路上的经验和感悟，为大会抛砖引玉。引用国学大师王国维《人间词话》的“人生三境界”，王辉讲述了从开始接触前端的迷茫到掌握基础的“立”，到遇到困难也坚持奋斗执着追求的“专”，最后培养出自己创造性的独特顿悟的“得”，此为“前端三境界”。

第一场分享是来自 W3C Webapps 组联合主席 Chaals Nevile 带来的《Web Standards》，Chaals 从 Web 和 W3C 的关系讲起，介绍 W3C 近期工作亮点，包括可用性、国际化、隐私与安全、Web体系结构。紧接着通过 Appcache、Push API、AMP 讲解了当前正在推动解决的问题以及 W3C 的标准化讨论流程。最后介绍了 W3C 目前现有工作的优化、改进、创新、孵化和研究。
第二场分享是来自英特尔的高级工程师闫绍博带来的《XR on the Web》，开始分享之前绍博大神从 spec 的角度，呼吁开发者更多参与 spec 的讨论，把声音传播到世界上更多平台和领域。紧接着从开始对 WebXR 相关技术的介绍，我们也能了解到 WebXR 设备 API 在更新和演进进程以及 WebXR 如何与 GPU 渲染、AI 等技术进行结合。最后演示了如何使用 WebXR API 和 WebGl API 构建一个移动端 Web 上 AR 应用。
第三场分享是《Make Web Quic》，是由腾讯高级工程师罗成带来的分享。首先通过讲述当前 HTTP2 和 TCP 的问题，引出 QUIC(Quick Udp Internet Connect) 协议的解决方案，其包含很多先进特性例如 0RTT 建连、链接迁移、传输控制和队头阻塞优化等。接着罗成大神重点分享了腾讯安全网关是如何通过 Nginx + Chromium 实现的 Nginx-Quic 框架，以及 QUIC 在腾讯业务线上的应用。

早上的圆桌会议除了上面的三位大神，还邀请了 W3C web 标准技术专家，W3C 中国区经理吴小倩一起与现场观众交流，解答疑问：

1、如何看待移动支付安全问题？

Chaals: 表示自己不是这方面的专家，但是 W3C 有专门的成员来完成这方面相关的研究和推进，移动支付给用户最重要的一个特性就是简单与安全。

2、中国是以什么的角色参与 W3C 标准的制定？

W3C 的所有标准流程都是免费公开参与的，放在 GitHub 上面的，大家可以找到自己感兴趣的 Issue 进行讨论。

3、W3C 的资金来源？

Chaals: 会员制和会员资助，如果不存在 W3C 组织，会员们需要花费更多资源来推进标准化工作，所以还是会产生 W3C 组织。

4、服务端不支持 quic 如何降级，应用层支持的成本是什么情况？

罗成: quic 协议转换成 http1，承担的更多的是一个网关的职责。应用自己实现的成本很高，目前现有的开源解决方案都不是很完美，Nginx-Quic 框架目前没有开源的计划，还在持续的更新迭代。

小程序快应用

第一场分享是由腾讯高级工程师、WePY 负责人龚澄（Gcaufy）给大家带来的议题《WePY - 小程序敏捷开发实践》。Gcaufy 首先给大家介绍了 WePY 的开发背景、设计思想，然后结合各种有趣的例子解释了 WePY 背后的一些原理，如模板编译、数据绑定、脏检测机制等。接着又提出了 WePY 目前的一些不足，存在不兼容原生模板、脏检测机制带来的性能问题等，借此引入了 WePY 下个版本的规划。另外，Gcaufy 还为我们分享了 WePY 运营上的很多经验，所以一个成功的开源项目不仅要在技术上做耕耘，运营上也不能落下。
第二场是由美团前端技术专家、小程序开发框架 mpvue 负责人胡成全给大家带来《mpvue 的发展和动态化方案探索》。讲师首先介绍了 mpvue 的特性和原理，然后介绍了 mpvue 基于 vue 通过嵌入 runtime 实现的动态化适配方案及其原理。同时，mpvue 还围绕 vue 引入一系列开发规范和最佳实践，给开发者带来良好的开发体验。最后，结合目前的生态和不足，提出了未来的一些计划。
第三场是由小米资深前端工程师、小米快应用前端负责人董永清给大家带来的议题《快应用设计思路漫谈》。讲师首先介绍了快应用的设计思路，以及快应用和PWA等在渲染方式等方面的区别和优势。然后通过一个例子，从工程化实践的方向上给大家演示了一个快应用从项目架构到开发再到调试的整个过程。最后，还提出了快应用后续的展望。
第四场是由腾讯前端工程师、IMWeb团队成员刘华（Eden）给大家带来的《基于 PWA 的性能优化实践》。Eden 首先介绍了 PWA 的基本原理以及 Service Worker 的一些能力。然后，从 Web 页面加载的整个过程开始分析，结合 Web 加载性能瓶颈，分别从 HTML 缓存、资源预加载、CGI 预加载等多个不同的方面，手把手演示如何把一个页面的首屏加载速度优化到毫秒级别，真正做到 “页面秒开”。整场演讲图文并茂、深入浅出，即接地气又不乏亮点。

Native 跨端融合

“一次编写，到处运行”(Write once, run anywhere, WORA)，最早是Sun公司在跨平台方面的宣传口号，也代表着我们作为开发人员对于效率的极致追求。近几年随着移动互联网的快速发展，移动终端设备的软硬件、操作系统、开发工具链和技术社区等日趋成熟完善，在前端也涌现出各种跨平台的开发方案。

第一场分享是由阿里巴巴技术专家张翰、申远带来的《Weex内核的原理和演进方向》。在分享中，介绍了Weex的基本情况、内部结构、分析比较，申远讲述了 Weex in 2018 及相关特性。 Weex 目前已在“阿里系”应用以及社区内得到广泛应用，WeexCore 也针对 Layout 性能和首屏等做了大量优化，优化后在速度性能、内存占用方面的明显效果。同时，Weex Render 基于 Skia，可以实现更为复杂的 CSS 效果。
第二场分享是由腾讯高级工程师赵宏罡、盛波带来的《Hippy 框架设计与优化》。讲师从前端和终端的角度介绍了 Hippy 的诞生，相比 RN 的逐条改进优化策略，使用场景以及将来的规划等等。Hippy 相比 RN 在诸多方面都有优化，手势方面，Hippy 改善了终端向前端持续发送手势事件的行为，解决了前终端通道被大量占用的问题；通信方面，Hippy 去除了 RN LastFlush的缓存；动画方面，Hippy 使用 AnimateConfig 使得动画一步到位，性能得到显著提高。Hippy 介绍到，它不仅仅是一个框架，还提供一整套解决服务，包括打包管理系统、动态运营、隔离灰度、ABTest、差量发布、强制更新、安全校验、流控等等，帮助更好的管理发布。
第三场分享是由京东李伟涛带来的《多端开发统一框架 Taro 深度剖析》。讲师介绍了 Taro 的历史背景、设计思想、持续优化、开源探索以及未来规划等。 Taro 致力于打造一个多端的统一框架，支持用 React 方式编写一次代码，能够生成在微信小程序、H5、React Native 等多端的应用，真正做到一处编写，多端运行。在分享中，剖析了小程序当前开发的痛点和弊端，并阐述了用 React 来开发多端的设计思想，在Taro 中如何运用编译原理将源代码转换为多端代码，并做到性能的持续优化。在开源方面，Taro 对 React 社区、小程序社区支持良好，UI完善，有着活跃的线上线下社区交流，在未来还会支持百度、支付宝小程序、快应用、更快捷的测试、同步调试、可视化页面搭建平台等等很不错的新特性。

Node 服务与性能

第一场分享是由阿里蚂蚁金服技术专家高晓晨带来的《蚂蚁 nodejs 微服务实践》，首先高老师给我们介绍了微服务架构的优点和微服务对于 node.js 的意义，并且从 node.js 与 java 的对比数据中分析 node.js 在 io 性能、启动速度、内存占用方面都是更优于 java 的。最后给大家介绍 rpc 框架的实现原理，包括协议部分、服务寻址、负载均衡、容灾策略、动态配置和微服务化架构的运维经验，干货满满。
接下来第二场是由腾讯高级工程师裴伟给大家分享《Tars.js 大规模商用实践与应用》，在开始前裴老师先向大家了解了使用 node.js 做服务端的经验，然后由浅入深地分享内容。裴老师非常详细的介绍 Tars.js 是如何实现监控、RPC、日志、配置和染色。其中对于服务的稳定性展开深入探讨，在生产环境中如何做负载均衡、无损重启、服务监控，这些内容都是前端工程师刚尝试使用 node.js 需要关注和学习的。裴老师还给大家点拨从前端到写服务端最重要的是思想上的转变。
第三场是腾讯高级工程师、IMWeb团队成员叶亮给大带来的《腾讯课堂 node 性能优化实践》，为了提高页面的首屏渲染速度，相信很多小伙伴会给页面做 node.js 服务端直出。叶老师给大家分享如何加速首屏渲染，从腾讯课堂使用的 java 端直出转到 node.js 直出的过程，从模板选型、node server 框架选型有比较客观的对比。最后进一步讲解了如何使用 devtools 来分析 node server 的性能瓶颈，同时前端同学推动后端同学使用 protobuf 协议做通信获得惊人的性能效果。做好 node server 容灾也是服务端很重要的一环，叶老师举例了在极端情况下如何通过容灾手段保证页面是可用的。
第四场是来自阿里云高级开发工程师黄一君带来的《通过 Coredump 分析定位线上 Node.js 应用故障》。 Node.js 应用的内存泄漏和 CPU 占用高问题是最常见也是最难排查的两类问题，小编也经常遇到这些问题，排查起来非常棘手，黄老师给大家介绍了 core dump 和如何通过 LLDB 来分析 core 文件，通过 core 文件分析可以找到类死循环和堆内存雪崩的问题。遇到错误日志信息不足够的 crash 可以通过 AsyncHook 插桩做链路路追踪等方式令人大开眼界。

可视化与动画

第一场分享的是来自 Adobe 公司的张文婷，分享的话题是《动静之间，数字之美》，开场介绍了动画的几种实现形式，CSS、SVG、JS，之间的优劣，讲了一些基于上述技术的动画解决方案如 GSAP、lottie 等。最后还首次公开一种黑科技，基于 font-varitation-setting 的动画。整个分享干货满满，文婷最后也获得全场最佳讲师的荣誉。
第二场分享是蚂蚁金服梁文森给我们带来的《AntV-让数据栩栩如生》，整个演讲主要是讲述了 AntV 生态下的 G2、F2、G6、L7 等各个库的演化过程，可以看出 AntV 对于可视化有很多深入的探讨和解决方案，并且由于阿里浓厚的开源文化氛围，这些组件都有完备的开源推进计划，给整个社区带来很大的贡献。
短暂的茶歇后，最后一场分享是来自百度的宿爽给我们带来的《大数据可视化性能优化之道》，这个话题是以 ECharts 为基础，给大家讲述可视化性能方面的议题，提出了不少性能优化的手段，有基于场景特点的、程序层面的、用户感观上的、数据加载上的，也有很多实用的手段如算法、重用对象、Web Worker、TypeArray、二进制加载等。可以看出 ECharts 在这上面做了很多性能方面的优化。最后，讲师也坦承 Echarts 存在一些不足之处，如文档、未能及时实现的 feature 等，讲师也希望大家以 PR 的形式为开源社区贡献自己的一份力。

特别感谢

特别感谢本次大会合作伙伴的鼎力支持