SDCC 前端会场纪要

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. Immutable

    Virtual DOM 会小限度的修改 DOM,但是有时候还是不够, 通过在 shouldComponentUpdate 阶段比较 state, 我们可以更精细的控制 component 是否渲染, 但是这样就遇到一个问题, javascript 中对比两个对象有先天性不足, React 社区得到 clojure 的启发,引入了 immutable 数据, 即函数式编程中的不可变数据,我们就放心的对对象进行任意操作, 进行简单对比就可以判断出 state 有没有发生变化,是否需要渲染。

    React 吸收了很多函数式编程的思想,组件的形式也是函数式的用法。

  4. Flux

    最后还提到了 flux ,单向数据流,官方的 flux 还比较简陋, 只提供了思想, 有很多不错的第三方实现, 其中 Redux 目前比较受欢迎。

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个的走, 所以影响并不大。

前端数据可视化实践

第五个讲师是来自 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。 也许有一天,当前端把客户端走过的路再走一遍的时候, 前端工程体系会变得成熟完善, 我们能把更多的时间集中在真正的开发中。

yofineliu

Read more posts by this author.