2017 年北京 QCon 参会总结

本次 QCon 共有两个前端专场，分别是「前端工程实践」和「前端架构思想」；还有一个移动开发专场「移动开发实践」。我主要参加了这三个专场，每个专场分别有三至六篇演讲；另外也听了其他专场几个感兴趣的演讲，比如「编程语言」专场的 Clojure 和 JavaScript 两个议题。

以下是我参加的议题及心得总结：

持续集成之 Why、What & How

这是大会致辞后的第一场演讲，演讲者 Kohsuke Kawaguchi 是 Jenkins 项目创始人和主要开发者。正如题目所示，本场演讲解释了持续集成的作用和必要性，并在后半段给 Jenkins 打了不少时间的广告。

QQ 空间萌宠之舞——HTML5 骨骼动画实践

原理上，骨骼动画是利用建立好的骨架套用到一张或多张图片使之动作的动画技术，比起传统的逐格动画一张一张绘出动作省了很多时间与精力，而且能更生动地动作。一般都会借助一些第三方 工具 来创作骨骼动画，QQ 空间萌宠之舞也是如此。

这篇演讲还讲述了他们在实践过程中遇到的问题，以及解决方案，还提供了不少性能优化的经验。

Basement——蚂蚁 Web 研发流程和基础服务实践

这篇演讲是对蚂蚁前端的 Web 应用研发流程和基础服务平台 Basement 的介绍。讲述了在 Basement 上，如何做到将一次产品迭代缩减为四步的，即：开发 -> 测试 -> 预发 -> 发布；同时还介绍了 Basement 的技术架构及实现。

除此之外，演讲者还分享了很多思考和总结，比如“一切不以上生产环境为目的的造轮子都是耍流氓”，“记录比管控更重要”，等等。

微信 H5 视频播放器在海量业务下的实践

主要讲了两方面的内容：

1. 微信公众号文章视频播放的技术方案和实现，如何保证系统可控；
2. ⽇常运营如何保障系统的稳定性；

关于第一点，他们实现的 H5 视频播放还是很有意思的：在客户端本地起一个代理服务器拉取视频资源，同时将广告等功能作为“插件”来实现，然后统一由“调度器”来管理视频播放；稳定性方面，包括实时监控客户端的异常信息，以及开发了一款能够远端调试移动端页面的工具。

WebGL 在前端可视化中的实践

本篇讲的是 echarts 在使用 WebGL 当中的一些经验。涉及到不少计算机图形学的知识，听起来有些费解，不过图表效果还是非常炫目的，尤其是最后一张 3D 的星空图。

如何打造自己的 PWA 应用

关于 PWA，本篇演讲的作者不但作出了简单明了的解释，而且给出了具体的实践。

PWA 最大的特点是快速和离线，其技术核心是 serviceWorker。对于一款离线 App，如何上传数据，如何对数据进行预存，如何清理过期缓存，如何进一步优化性能等等问题，这篇演讲都给出了方案和代码实现。

除此之外，PWA 还有一个鲜明特点是可以添加到主屏桌面，那么如何添加？如何像原生应用那样通知？也有非常清晰的说明。

探究 Node.js 的服务端之路

这篇演讲作者根据他们自己团队的实践，主要讲述了 v8 引擎的内存结构，内存释放以及内存泄漏的各项情况。并讨论将 Node.js 引入服务端带来的优势与常见的问题及其解决方案，以及目前 Node.js 的意义。

内容非常丰富，但演讲者在演讲过程中对内存泄漏、fork 等几个问题讲得太琐碎细致，而且用时过长，导致后面的分布式、维护相关内容没有完全发挥，有些遗憾。

应用开发的未来

甲骨文公司产品副总裁 Boris Scholl 的演讲，主要是应用开发模式上的一些看法，发展方向和挑战等。这里他提到了一个很有意思的概念：FaaS，即 Function as a Service。同时还涉及到 Serverless，微服务等等，总之是概念非常多、非常宽泛的一场演讲。

网易乐得“无埋点”数据采集实践之路

这是一篇移动开发相关的演讲。所谓的“无埋点”，意思是不必手动给页面中一些元素加“埋点”来收集用户行为，而是通过用户操作的页面元素的 xPath 及其他一些特征来自动生成一个表示用户行为的“埋点”。这一思路对 PC 端的 Web 开发或许也有一定的启发。

美团 crash 监控分析系统优化之路：crash 率从千分位到万分位

也是比较空泛的一篇演讲，老生常谈的一些内容。主要从研发流程和机制的角度来入手，讲述了如何通过一系列的非技术手段来降低 App 的 crash 率。

属兔的处子——喜欢 Clojure，但怕动态语言太灵活怎么办

Clojure 是我最近打算去学习研究的一门语言，它本身是一种 Lisp 方言。虽然对 Clojure 的语法还不甚熟悉，但这篇演讲却听得津津有味。主要讲了 Clojure 里两种类型系统 core.typed 和 core.spec 的优劣。

另外，似乎所有的动态类型语言，都有人试图去给它们加上静态的特性，比如 TypeScript 之于 JavaScript。

编程语言如何演化——以 JS 的 private 为例

这是大名鼎鼎的 @hax 的一篇演讲，PPT 相当别具一格。讲了 JavaScript 类的 private 属性/方法 的历史。

hax 的风格就是，在讲 JS 的时候，可以顺便把其他 100 种语言都黑了。

单页应用的数据流方案探索

@民工精髓 的演讲，同时还有一篇更为详细的文章在 这里 。这篇主要是在讲 FRP（Functional Reactive Programming）模式的特点及优势。以 RxJS/xstream 为代表的数据流库，能够很好地跟 Redux 等状态库就行结合，解决后者常见的一些问题。

ui-model，更纯粹的前端

ui-model 的思路是，将一个组件的“内容层”、“样式层”和“逻辑层”分离开来，而它只提供“逻辑层”。想法的确有独到之处，因为毕竟在实际的业务场景中，几乎绝大部分的第三方 UI 组件都是需要“定制”的。而只提供了交互逻辑的 ui-model 的组件，的确有可能省去上述的“定制”——因为样式是要有使用者自己实现的。

不过，对于这种模式，组件所需要的数据如何维护？组件间的交互如何实现？这都还是问题。

百度搜索前端架构的演进

这篇演讲也是比较空泛，更多是业务上的数据，涉及到的技术细节很少。