FCC 2018 前端技术大会总结

596 阅读6分钟

上周末在成都举办了 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…