SDCC 2015前端专场札记：Facebook、百度、腾讯、美团、饿了么等互联网公司的前端实战

【编者按】11月21日，为期三天的 SDCC2015中国软件开发者大会成功闭幕，主办方总计邀请了95余位演讲嘉宾，为参会者奉献了10个主题演讲，9大技术专场论坛（80余场技术演讲），另外还有5场特色活动。另外，据官方统计参会人数高达1067名（不含工作人员）。

其中20日的前端开发专场，现场听讲人数一度爆满，而没有机会亲临现场的童鞋们，我们特邀请了业内专家、与会者分享他们的听课感受及他们眼中的前端专场。以下是来自AdMaster前端高级工程师刘越凡参加前端开发专场的听课札记，以飨读者。

以下是刘越凡的听课札记：

Facebook前端工程师ShihChi Huang(黄士旗)：Why React matters/scale

来自Facebook的 ShihChi Huang(黄士旗)分享的内容更侧重于知识普及，从几个核心技术要点讲解了一些内容。

1. UI = f(state)React 的 render() 函数便是其中的 f，将state渲染成Virtual DOM，Virtual DOM被React渲染成真正的DOM。我们不需要再关心DOM是如何变更的，我们只需要将我们想渲染的东西告诉 React，然后重新渲染Virtual DOM，它会自动帮你把UI的改变渲染到真正的DOM上。
2. Predictable同样的input应该返回同样的output。UI在相同state的条件下，应该渲染出相同的界面。
3. ImmutableVirtual DOM会小限度的修改DOM，但是有时候还是不够，通过在 shouldComponentUpdate 阶段比较 state，我们可以更精细的控制component 是否渲染，但是这样就遇到一个问题，javascript 中对比两个对象有先天性不足，React 社区得到 clojure 的启发，引入了 immutable 数据，即函数式编程中的不可变数据，我们就放心的对对象进行任意操作，进行简单对比就可以判断出 state 有没有发生变化，是否需要渲染。React 吸收了很多函数式编程的思想，组件的形式也是函数式的用法。
4. Flux最后还提到了flux ，单向数据流，官方的flux还比较简陋，只提供了思想，有很多不错的第三方实现，其中 Redux 目前比较受欢迎。

Strikingly CTO、联合创始人郭达峰 ： React.js in Strikingly

Strikingly的CTO 郭达峰，之前在论坛上有过一些交流，这次终于见到真人了。

达峰分享的侧重点在于实践，分享了很多 Strikingly 使用 React 过程中积累的经验。

1. React 与 第三方库的融合使用 React 的时候会遇到一个问题，有现成的 jQuery 的插件，但是不确定是否能使用在 React 中，用 React 重新实现的话可能又要花费大量的精力。达峰用一个 jQuery 插件 Sortable 举例，将其封装成了一个 React component，使用时不仅能修改 DOM 也会更新 state 。感觉他对于 React 的态度比较理性，不是原旨主义，不追求所有的东西一律 React 化，而是去融合，这一点我很赞同。
2. Lazy load component利用 webpack 的特性实现 js 文件的按需加载，达到的最终效果是需要渲染某个 component 时，才去请求对应的 js 文件这一点对于被 SPA js 文件过大困扰的人很有诱惑力。grunt 和 gulp 现在的问题是需要自己组装大量的插件，插件的质量也是参差不齐，插件不好用的时候，自己就要去折腾，去砍树之前，需要自己做把刀。webpack 配合  React Hot Loader 还能实现代码热插拔，开发效率上也能提高很多，有时候等 browserify 编译其实也挺痛苦的。
3. Container component划分特定用途的 component，之前有类似的使用，但是没有接触过这样明确的概念behaviour Container => Sortable component 动作UI Layout Container => SplitPane component 布局Data Container => 为 pure component 提供 state
4. Global state object这是我最感兴趣的一个，可以用 Global state object 将页面完全还原，前端开发中 debug 是个很纠结的问题，有些 bug 很难重现出来，但是如果能复制出一摸一样的页面，这个问题就简单多了，当测试人员/用户遇到问题时，自动将当时的 state 发送给开发人员，开发人员利用 state 还原现场，非常有助于定位 bug。

美团技术终端组高级工程师吕伟  ：前端分布式编译系统的设计

吕伟分享的内容是前端分布式编译系统，有种鸟枪换大炮的感觉。

大型系统的分布式编译挺常见，但前端代码倒真是第一次听说，目前开发的产品用的是grunt + browserify， 虽然代码并不是很多，但也会有个不长不短的编译时间， 也是有点难受。同时我非常好奇美团的前端代码究竟是有多少，都到了分布式编译的地步。 核心思想还是共享运算资源，具体原理没有细听，目的是取代webpack 和 browserify， 正式投产后会完全开源，github见。

饿了么资深前端架构师兼大前端团队负责人林建锋  ：ELE.ME是如何运行的

来自饿了么的林建锋也就是sofish鱼哥分享的内容是饿了么在前段工程化上的一些实践。

1. 前后端分离这个不需要解释。Rest API，Nginx 托管静态资源。
2. 开发与发布构建了一套成熟的开发/发布体系，而且封装成了简单的命令，甚至还做了一个界面化的 nginx 配置，不过手写 nginx 配置应该算是前端的必备技能了吧？
3. 优化使用了  Rest api batch 的做法，将一批请求包括多个API调用合并成一个HTTP请求，减少 HTTP 连接数，有人质疑到合并后会不会影响到页面的分步渲染速度，但据说并不会，因为浏览器对同一域下并发连接数是有限的，一次太多的 http 请求过去也是4个4个的走，所以影响并不大。

百度EFE团队资深工程师，百度ECharts产品工程师乔刚：前端数据可视化实践

Echarts团队的乔刚分享的内容是数据可视化的一些案例和 echarts v3.0 的一些新特性。

目前的产品中正在使用 echarts，可以说真的是非常熟悉， 算是一个挺不错的图表库，简单易用，图表种类繁多， 虽然不是 svg 但也支持很多交互事件，之前文档组织的不够清晰， 但自从有了那个配置参考之后方便了很多，当然也存在一些不足， 我比较看重的是移动端展现的问题，几乎挤成一团，移动端的产品只好换成 chartjs 展现，希望能在接下来的 v3.0 中有所改善。

百姓网资深前端工程师贺师俊：如何制定和实施ES6+代码风格和质量标准

百姓网的贺师俊，也就是前端圈内的老司机hax，他提到了coding style 的制定和实施，确保实施的关键点在于工具，这一点很有体会， 如果团队里的开发工具都是千奇百怪的，coding style 的统一就更难保证了。我们的团队在开发工具的统一上做的比较好，统一使用 Vim，连接到远端机器编写代码， 只要手里有一台有键盘、能联网的机器，就能进行开发。

贺老一直在力推ES2015，这次还分享了一些使用中的一些疑难问题，

• arrow VS function，
• async VS generator，
• const VS let，
• template VS 安全，

已经开始使用 ES2015 的同学应该都有一些自己的体会。快结束的时候还不忘引发圣战，SPACE VS TAB。

腾讯互联网增值业务前端团队负责人钟鹏飞  ：Hybrid模式的深度融合

腾讯的钟鹏飞分享的内容是腾讯手机QQ H5优化与监控自动化建设。这部分由于临时有事，只听了一部分，有些遗憾。hybrid 也是最近很火的一个话题， 具有native app 的系统福利，又有 web app 的开发效率。 由于之前这方面接触的不多，学习到了一个新的知识，hybrid app 启动中 Webview 的耗时占比很大。

总结

说实话，这次参会主要还是奔着React 来的，然后还看到了很多前端工程化方面的实践， 收获颇丰，解决了之前的一些疑惑， 也看到了一些方向。

React 打开了前端开发的新的思路， Virtual DOM，组件化，State 数据流，函数式编程；webpack 使代码编译变得更加简单； 美团的分布式编译让人觉得前端开发正在向客户端开发靠拢；其实前端开发的演化也是在不断借鉴客户端开发的经验， 毕竟我们在开发的已经不是一个单调的 page，而是一个功能丰富的 application。

也许有一天，当前端把客户端走过的路再走一遍的时候，前端工程体系会变得成熟完善， 我们能把更多的时间集中在真正的开发中。