FCC 2018 前端技术大会总结

上周末在成都举办了 2018 Web 前端大会，参加这次活动也是收获满满，在我的分享日程中也是有这一项，所以，今天就简单的介绍回顾一下本次大会的一些事宜。

流程

1. 高效H5动画开发方式
2. 给 Node.js 插上 C++ 的翅膀
3. 开源项目维护
4. 敏捷中国史
5. 高可用 React 服务端渲染
6. 打造 Vue.js 组件库

高效H5动画开发方式

第一场分享是由腾讯 AlloyTeam 的郭林烁老师带来的关于高效 H5 动画开发的分享。

首先，郭老师介绍了一些常见的动画形式，包括 GIF、APNG、Video、SVG、Canvas、JS、CSS，并介绍了这些技术的优缺点，比如 GIF 使用简单、兼容性好、颜色少等等，具体的内容可以到下面仓库中去看 PPT，在这里就不占篇幅了。

接下来，介绍了我们在不同的场景需求下该如何对动画的实现方式进行选择。对不同的开发方式进行优化，在介绍帧动画的时候，介绍了通过 node 工具实现自动化，以及如何优化图片资源（通过哈希算法进行图片去重、像素复用、空白裁剪、合图优化）。同时，介绍了许多的动画库帮助我们加速开发，以及如何通过软件导出代码/数据生成动画。

最后有一句话我觉得说的很有道理，高效开发，不是把所有的场景都考虑进去，每种方式都有自己适合的场景，把每种方式都打磨好才是高效开发。

给 Node.js 插上 C++ 的翅膀

第二场是由死月老师带来的分享，本身我自己对 C++ 也不是很熟，所有有些地方听的也不是很懂，有兴趣的同学可以去看看死月老师的 PPT。

死月老师从一个故事开始说起，他们使用了阿里云的 ONS 消息队列，但是官方并没有提供 Node 的 SDK，但是有 PHP 的 SDK，PHP 的 SDK 是 C 的扩展，于是，使用 Node.js 启动了一个 PHP 子进程去收发消息。

这个项目就变得“脏脏的”，大神们都是想法不一样的，一言不合就要用 C++ 的 SDK 封装一个 Node.js 的 SDK，从此踏上了 C++ Addons 的不归路。

死月老师给我们讲解了动态链接库、与原生函数的区别，同时提醒我们注意 C++ 的性能虽高，但是要注意入不敷出的问题，并在后面介绍了句柄、异步、事件循环、同步原语等等，我不是很熟悉就不献丑了，有需要的同学可以自行去查看 PPT。

开源项目维护

在死月老师之后，给我们分享的是来自京东凹凸实验室的余澈，挺喜欢他们的 logo 的。

从开源项目的配置文件开始，像我们介绍了如何做好一个开源项目。也介绍了自己在做开源项目的收获，一个靠谱的开源项目应该有什么样的特点呢？我在公司也是做基础设施的，对这一套还是比较熟悉的，深有同感。

1. 代码规范(ESlint、stylelint、Prettier、commitlint): ESlint、stylelint 能够保证我们代码的规范性，prettier 能够保证我们的代码美观，同时我也觉得非常重要的一步，就是对代码提交的规范，一个好的 commit 信息就能够表达出非常多的信息了，比如加上 husky、commitlint、lint-staged 构建代码检查工作流。
2. 测试: 测试非常重要，一个靠谱的测试会让使用的人放心，也会减少后期修改维护时造成的对整个代码的伤害。测试又分单元测试、集成测试、UI 测试，做单元测试时我们可以通过像 mocha 的测试库进行，集成测试像 Jest、Jasmine，而像 UI 测试可以使用 NightWatch，或者是 Google 的 Puppeteer。
3. 持续集成：这方面其实要包括持续构建，持续部署，余老师也跟我们分享了关于如何管理版本、changelog 等等问题，我之前也是使用 lerna 做这一系列的工作来进行管理，余老师也向我们推荐了这个强大的工具。
4. 文档：文档系统也是使用的是 Docusaurus，界面比较美观，同时它的搜索功能也很强大。

上面的这些都是项目中使用的，我觉得比较有意思的一点是 Probot 机器人，帮助我们管理 github 的 pr、issue 等等，但是我也没找到关于 gitlab 的实现，自己搞了一个gitlab 的机器人，但是不通用，都写死了，准备后面再看看。

敏捷中国史

接下来分享的是一位资深的前辈，熊节老师。他从中国软件行业开始一点一点的讲述了中国敏捷开发的发展，以讲故事的形式带你一步一步走进敏捷开发的历史，我在这儿就不给大家讲故事了，讲起来就有点多了，对敏捷开发有兴趣的同学可以到 PPT 里一探究竟。

高可用 React 服务端渲染

第五位给我们进行分享的是上线了的 CTO 郭达峰老师，他们是 YC 第一家孵化的中国企业，在成都有公司，有兴趣的同学可以去撩。

郭老师先带领我们进行服务端渲染的性能优化，从生产环境设置、到 babel 插件，将 400ms 降低到了 70ms。同时，跟我探讨了如何做到高可用，比如说服务端渲染分离处理、集群、自动扩容缩容，当然了，我比较感兴趣的是 Hypernova 这个库，它能够做到在服务端渲染失败的时候，返回让用户客户端去渲染，从而做到高可用。

打造 Vue.js 组件库

最后一位给我们分享的是 Zoom 前端架构师黄轶，相信大家在线上学习比较多的话，就会认识他，出版过 《Vue.js 权威指南》和《Vue.js 技术揭秘》，并且在慕课网的讲师，相信有不少同学买过他的课程。

他带领我们从业务出发，讲解如何统一管理代码，高效开发，保持产品一致性。从设计原则、开发规范、文档、测试、模块依赖、工程化等等方面一一讲解了一个组件库是如何打造的，收益颇丰，不管你会不会 Vue，我们重要的是去学习思想，当然了，黄轶老师讲的非常多，这里就不多赘述了，有兴趣的同学可以去看看 PPT。

总结

参加这次前端开发大会还是很有收获的，每一位老师都挺有意思，与不同的人交流也会收获到不一样的知识，还是要多多的参与到这些技术大会中，开拓自己的眼界。

这是 PPT 的 Github 地址: github.com/FreeCodeCam…

当然了要是大家不介意，可以顺便给我一个 Star，地址奉上：github.com/balancelove…