FEDAY2016

前戏

2016/3/21 补上参会的完整记录,这个问题从一开始我就是准备 “自问自答” 的,希望可以通过这种形式把大会的干货分享给更多人。

出发/到达

我跟同事周周是周六凌晨 1 点才到的广州,住的地方在小区里面,路过楼下的时候看到一家还在营业的啤酒吧,很有 Feel,但是此时的精神状态直接把我们送到了房间里,洗完澡之后就碎觉了,准备次日集中精神好好听讲。

初到会场

次日,我们穿个马路就来到了本次 feday 大会的现场。然后是标准的签到,拿 “大礼包 “,参会证等流程,经常参加大会的同学应该很熟悉了,由于我之前参加过 d2,觉得阿里报告厅的屏幕已经很震撼了,没想到,第一次在电影院参加技术大会真的有种赶老罗发布会的感觉:

大会现场

此次的嘉宾阵容:

好了,进入正题,以下内容既是记录,又是自己的看法和总结,然后形式均为我认为的精华内容整理,完整的内容我觉得没必要赘述,因为大会官网会放出完整的视频。

Stepan From Facebook - 用 Node.js+React.js 打造通用应用

来参加 feday 前看到本次大会的主题,当我看到同构话题的时候比较兴奋,因为之前负责的我厂一个全站消息中心改造项目,我和搭档有实践同构并为之落地,而且该项目已经上线,所以还是比较清楚同构的作用以及使用场景,而且在厂内也做了相关分享,所以想看看大会上能不能碰撞出一点不一样的火花。

Stepan 的演讲精华我觉得可以精简整理为如下几点:

原来用 RoR(其实这里泛指后端) 做的事情现在都可以用 Javascript 做,好处是可以前后端复用代码,符合同构的基本条件,然后他通过一个目录结构对比演示指出了同构应用中需要解决的三个事情:渲染/路由/数据(我是这么理解的,因为我认为这确实是同构落地的关键)

对于渲染,他先列举了一个非常简单的例子,我认为他要表达的意思是:渲染的本质其实就是模版 + 数据,例如:

function template(data){ return '<body>${data}</body>'; }

这个函数可以在 server 端直接将数据扔给 res.send,也可以用在 client 端用来生成真实的 dom;但我们的应用往往是复杂的,React(Facebook 的工程师肯定是要来安利 React 的) 的 renderToString 方法可以帮助我们完成 Server-Side Rendering,因为 React 的 vdom 不需要依赖浏览器侧的环境,这是 React 支持服务端渲染的唯一一个方法,好多同学已经知道了,讲到这里,作为一名 Facebook 工程师,他成功地为本次大会率先安利了一把 React

对于路由,他基本上直接安利了 React-Router,然后贴出了跟 React-Router 官方文档几乎一样的代码,所以,折腾过的同学基本可以略过这个环节,但其实很多同学应该知道,路由共享是同构的重要部分,其实这里的坑还是蛮多的,其中还包括 React-Router 自身的 bug,我在项目里的做法是将这块逻辑以中间件的形式进行处理。

对于数据,不管你有没有用 flux,都要解决初始化数据的问题,因为两端共用一份 render 逻辑,在后端直出的时候,需要将后端得到的数据同步给前端,否则,前端二次 render,会得到不正确的渲染输出,这个相信玩过 React 后端直出的应该也知道,解决方案几乎都是一致的,说到底就是通过:

window.__STORE__ = {}

将数据带给前端。你会发现其他封装好的第三方同构库 ISO 等最终用的都是这个逻辑。

关于组件拉取数据,他安利了 isomorphic-fetch,这样前后端可以共享一份拉取数据的逻辑,对于组件数据在 server 端的初始化,他的处理方式是,server.js:

async function fetchAllData(props) {
  return Promise.all(
    props
      .components
      .filter(x => x.fetchData) // 探测组件是否有fetchData方法
      .(x => x.fetchData(props))
  );
}

这里的 props 可以传入 React-Router 中 match 方法返回的上下文,由于我们的业务只直出了部分组件数据,所以这里的做法有所不同,我的做法是将 ISO 逻辑置入中间件,当中间件匹配到路由后,将利用 yield next 转交给下一个中间件先拉取数据,然后将数据放入 locals 中,等到执行到 ISO 中间件时,中间件将 locals 中的数据拿出,初始化给 React-Router 匹配到的组件上下文,最后 renderToString
React+Node.js 打造通用应用的折腾过程中其实只要解决这关键的三点,差不多就可以打造出一个同构应用了,但是他还没有提到的还有:

最后,我在星巴克逛 Stepan 博客的时候发现他的博客就是同构的,很有趣,大家可以体验一下:

stepan's blog

Stepan's Blog

江剑峰 微信开发过程中的最佳实践

剑锋幽默风趣的讲演风格显然非常接地气,这个话题从一开始就吸引住了全场的开发者,因为有太多开发者曾经被微信坑过,这个分享我直奔干货总结了:

等等,快后退,我要装逼了:

到 3 月份底,微信 x5 将全面升级为 blink 内核,并全网灰度发放完毕,也就说,我们即将可以大胆写 flex 了,并再也不担心缓存问题了,动画卡顿问题也会得到改善,大家赶紧验证去吧。

黄士旗- React Tips

士旗也是来自 Facebook 的工程师,讲的也是 React,总结下来就是:士旗在教大家如何正确使用 React:

陈子舜-下一代 web 技术可以运用的点

子舜的话题中讲到了很多务实的,腾讯正在实践的一些技术:

中间有一次圆桌,HAX 主持,主要是一些撕逼,没有啥实质内容,而且我对于有同学问出:[你们怎么看待 RN 的出现扰乱了原生开发和 web 开发之间的那种和谐]这种问题感到纳闷。

winter - 如何成为更好的前端

第一次见到 winter 大神本尊,我佩服和尊敬这样的前辈,但是我会保持风度和拒绝浮躁,winter 的分享虽然不是技术内容分享,但他分享了他在学习前端过程中的一些他认为的好方法,我觉得现场好多前端工程师应该是可以跟他产生共鸣的:

Holger Bartel - http/2 时代的 web 性能

因为之前读过几篇关于 http/2 的博文,对 http/2 还是有所了解的,这个话题我没有听完,后来有事情就先走了,听了前面 3/4 场,这部分大家可以阅读相关博客弥补,我可以安利几篇:

结束篇

说个题外话,QCON 貌似也临近了,据我了解,今年 qcon 对前端话题的范围基本也是限制在下一代 web 技术,再回过头来看本次的 FEDAY,我觉得从嘉宾到议题还是符合时代气息的。希望下次越办越好,很开心的是在回来的前一天晚上,在楼下的那个啤酒吧里遇到了 stepan,holger,士旗,裕波等人,跟 stepan 和 holger 面对面交流了相关主题,真可谓不虚此行,满足之余,在知乎上,博客上同步以上所有内容给大家,谢谢。


↙↙↙阅读原文可查看相关链接,并与作者交流