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

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

知乎话题

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

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

感受下大会的现场：

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

【进入正文】

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

09:00 签到

这里没啥好讲的，正常的会议流程，二维码签到，发送纪念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

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

10:50 微信Web APP开发最佳实践

微信团队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月底会全部更新完成

【下午场】

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

13:10 React Tips

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 的概念 ，没理解，后续在消化更新...
这个主题讲的非常的棒，可是一时不知道该写些什么...

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

14:20 下一代Web技术运用

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

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

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

• Yahoo xxx原则

• js 文件请求合并

• css 雪碧图

• 拆分域名

• 压缩

• ...

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

• 网络问题

• 兼容问题

• 终端问题

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

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

16:30 下前端能力的培养

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

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

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

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

寻找线索

• 附录

• 源代码

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

建立联系

• 美感

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

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

归类

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

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

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

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

1. 简单的说： 闭包是什么

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

3. 在深入一点：常见的用法

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

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

能力培养

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

• 能力是需要训练的

• 主动性

• 习惯养成

• 系统训练

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

17:35 HTTP/2 时代的Web性能

国际知名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的文章：

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

2. HTTP2讲解

总结：

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

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

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