参加第二届前端开发者年度大会总结

摘要：代表公司去参加今年的第二届前端开发者年度大会，散会的时候，技术老大问我，今天感觉怎么样，有什么收获，当时就零零碎碎的回答了一些，不算完美趁着还记得点什么，在这里做个自我回顾总结，谨代表个人见解，有不当之处，或若涉及图片隐私或者其它问题，烦请

代表公司去参加今年的 第二届前端开发者年度大会，散会的时候，Team 技术老大问我，今天感觉怎么样，有什么收获，当时就零零碎碎的回答了一些，不算完美；趁着还记得点什么，在这里做个自我回顾总结，谨代表个人见解，有不当之处，或若涉及图片隐私或者其它问题，烦请指正.

==================================================
记得小时候写作文的时候，老师都会强调三要素：时间，地点，人物；那下面就从这三要素来作为时间线回顾：

时间：2016 - 03 - 19
地点：广州嘉裕太阳城广场三楼金逸国际影城四号厅
演讲嘉宾：绝对的重量级人物，看图说话

由于是在电影院举行这次前端大会，整个过程下来大屏幕的观看效果还是挺赞的，人数目测也在400+，除了广州本地，也有不少是从其他城市过来的，可见这次的会议还是挺高大上的

【进入正文】

==================================================

这里没啥好讲的，正常的会议流程，二维码签到，发送纪念T恤，进入会场

==================================================
09:45 使用 React、Redux 和 Node.js 构建通用应用
Facebook 前端工程师 Stepan

第一个主题是由 Facebook 前端工程师 Stepan 带来有关react的分享：从使用 rails 生成的项目目录结构为切入点，讲到大约在08以前的时候，JavaScript在人们的心中是只能做一些动画的效果，整个JavaScript 脚本放在 Rails 项目目录下面的一个 assets/javascripts 中，是不太受关注；而在09年左右出现了 BackboneJS，以及后来的AngularJS等前端框架，以及现在很热门的 ReactJS，VueJS，EmberJS等等，大概的讲述了这些年来 JavaScript的一个发展历程；

接下来，抛出了一个问题：前端可以不依赖 rails 吗，后端为什么不能也用JavaScript来写？

之后顺势推出了 ReactJS，主推前后端都使用 JavaScript 来实现，前端主要使用react，redux，后端使用 nodejs 去构建整个应用程序； 使用reactRouter做前端路由，使用 express 作为中间键等等，由于本人还没有使用react和nodejs去写过项目，这里就不好描述更多了，以免误人子弟 :(

前后端都使用通一套语言的好处：

代码共享

使用nodejs，数据处理放在服务器，前端只要渲染，性能可以得到很高的优化

SEO

然后就是一些相关问题的代码演示：

how about create store?

initial data?

how about fetching data?

关键词： rails、react 、express、react-dom/server、reactRouter

==================================================

微信团队UI工程师 江剑锋（jf）

第二个主题是由微信团队UI工程师 jf 带来的有关微信 Web APP 开发的最佳实践；可谓是干货满满，把在微信开发过程中遇到的坑一一做了总结，以及介绍微信团队出品的一个 UI库：WeUI

jf 首先是展示了一些微信的数据：

微信 Android 客户端机型分布

微信 Android 客户端系统版本分布

微信用户网络分布

重点来了，在大概的了解微信的一个现状后，jf 开始分享他们在微信开发的踩坑过程：

脑补一下，当我们在微信打开一个网页后，默认是在微信里打开了一个浏览器，这个浏览器是微信基于 webkit 研发的一个名为 x5 内核浏览器，做过微信开发的人都清楚，在微信浏览器里总会遇到一些你意向不到的 BUG，以及调试困难的情况，下面看看微信团队总结的一些常见的坑

常见的坑：

动画卡顿

不支持伪元素动画

只支持部分的 flex 布局

视频默认是会有控制条的(去不掉，据说是为了防止恶意的视频播放问题)

autoplay无效

待补充...

缓存问题：
可能有时候做微信开发，你会碰到缓存失效的问题：
解决办法：

打开微信，点击“我”——> 设置 ——> 通用 ——> 清理微信存储空间

同时设置 localStorage 和 cookie

黑科技：//triggerWebViewCacheCleanup

Web 开发者工具

X5升级：
据 jf 介绍，目前微信 x5 浏览器正在升级，由以前基于webkit改为了基于Blink，填掉了许多在 x5 出现的坑，目前已经有30%的用户微信浏览器默认是已经升级了的，据说也是某种黑魔法，会自动升级，jf 透露，预计在4月底会全部更新完成

【下午场】

==================================================

Facebook 前端工程师 黄士旗(ShihChi Huang)

下午场的第一个主题是Facebook前端工程师黄士旗带来的主题React Tips，黄士旗是台湾人，普通话讲的非常的有power；主要是分享使用 react 开发一个 TODO 示例程序进行讲解相关的知识点：

1. Container Component 的概念：
解决的问题：

Manage data/state

UI logic

Reusable

Needed tests

2. Flux ReduceStore

做资料（数据处理）

负责render (渲染）

Functional style

推荐使用 reduceStore, StateLess Component
提到一个 HOC 的概念 ，没理解，后续在消化更新...
这个主题讲的非常的棒，可是一时不知道该写些什么...

==================================================

腾讯云平台产品中心总监 陈子舜(PuterJam)

主要讲解与前端性能优化相关的技术点，从两个常见的前端面试题引申话题：

问：如何做前端优化：
答：

Yahoo xxx原则

js 文件请求合并

css 雪碧图

拆分域名

压缩

...

问：页面白屏会是什么原因：
答：

网络问题

兼容问题

终端问题

作为面试者, 我们可能常常会想到以上一些关于前端性能优化的点，可是，做为腾讯云的技术总监，显然不会给我们分享这么简单的知识点：下面看看大牛们是从哪些方面考虑性能优化的，直接上图：

==================================================

计算机之子，阿里高级技术专家 程劭非(winter)

winter带来的主题没有涉及太多的技术细节，而是非常系统，站在某一个高度上分享他自己的学习经验；强调前端不在于难学，而在于不知道怎么学；在他看来，如果前端分成100等分，前端技术知识点只占据20%，而能力则占据80%，这里的能力主要包括编程能力，架构能力，工程能力（管理）

“好前端才分对错，成年人只分利弊” -- winter

上面这句话表面看不出什么意思，可仔细想想，其实他描述的是一种想象：一个好的优秀的前端是会区分对和错的，应该是能看到事情的本质的一面，而不是仅仅只区分利与弊，能用就好的一个心态；更具体的讲，winter 推荐我们可以从以下几个方面去学习培养前端能力：

寻找线索

附录

源代码

反射（在浏览器运行查看效果，找到知识点的脉络）

建立联系

美感

完备性（如果有insertAfter方法，那我们应该想到会有insertBefore方法）

操作同一组数据（进行分类）

归类

按照关联关系建立起连接，对偶性，对称性
例如：insertBefore对应insertAfter，bind对应unbind

追本溯源
当遇到问题有不同的见解时，我们应该具有追本溯源的心态，去google，看wiki，找到问题的关键本质，要有考据的过程，比如说闭包：

大部分可能会说： 闭包就是能够读取其他函数内部变量的函数

那如果我们去追本溯源，在深入一点去研究：

简单的说： 闭包是什么

深入一点：闭包有什么作用

在深入一点：常见的用法

在在深入一点：会什么会有闭包这个东西

在在在深入一点：......

能力培养

习题很重要 习题很重要 习题很重要

能力是需要训练的

主动性

习惯养成

系统训练

==================================================

国际知名Web设计师/前端工程师 Holger Bartel

最后一个主题是由Holger带来的HTTP/2时代的web性能，由下面的一张图可以看出人们正在排队等待的一个过程，由此引申出当我们去访问一个网页时，如果需要等待一段时间才能得到反馈的这个过程

等待，是指我们需要一个特定的时间和特定的动作去执行，然而当我们需要做一件事情时，期望的应该是立即去执行，而不是需要等待一段时间

性能，主要是关乎用户的一个期望，如果是2s内打开一个网页，用户是不会抱怨的，5s内如果能打开，那么用户也还是可以接受的，但是如果是8s还不能打开，用户是会失望的，他们会认为这个网站已经挂掉了；这个大概就是前端性能优化时我们经常会提到的一个2、5、8概念。

接着简单说了目前一些常见的基础优化策略：

inline image

css sprite

.....

讲解页面的渲染流程, 强调现有的优化主要是：阻塞资源，请求开销，文件放置的位置，关键文件渲染的路径等等，这些是在HTTP/1.1 时代做的事情，那么在HTTP/2,性能优化应该怎么处理，引申出 HTTP/2 的知识点：

HTTP/2 相比 HTTP/1.1 的更新大部分集中于：

多路复用

HEAD 压缩

优先级请求

...

Holger Bartel 讲解的 HTTP/2 涉及的新概念太多，这里不能一一道来，只能是在大海里取一瓢水的感觉，这里只能暂时的记录一下，后面在去学习更新...

总的来讲，HTTP/2 对未来 Web 性能优化工作起到很重要的作用，是一切优化的基础。

推荐两篇有关HTTP/2的文章：

HTTPS, SPDY和HTTP/2性能的简单对比

HTTP2讲解

在前端这个迭代更新如此快的领域，我们需要关注新的技术热点，但是也要保持自己的步伐；在几年前，MVC刚刚兴起的时候，backoneJS，angularJS是比较火热的，可是今天ReactJS、VueJS，EmberJS等的热度已经远远超过了backboneJS，angularJS；很多新的前端框架可能会让我们应接不暇；这个时候，我想应该静下来仔细想想，最本质的东西是什么；

注释：以上内容，谨代表个人见解，有不当之处，或若涉及图片隐私或者其它问题，烦请指正.

最后： 感谢前端圈组织的这次活动 ，希望明年会越办越好.