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…