FEDAY2016之旅

时间 2019-11-10

标签 feday2016 feday 之旅繁體版

原文原文链接

前戏

2016/3/21 补上参会的完整记录，这个问题从一开始我就是准备“自问自答”的，但愿能够经过这种形式把大会的干货分享给更多人。javascript

出发/到达

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

初到会场

第二天，咱们穿个马路就来到了本次feday大会的现场。而后是标准的签到，拿“大礼包“，参会证等流程，常常参加大会的同窗应该很熟悉了，因为我以前参加过d2，以为阿里报告厅的屏幕已经很震撼了，没想到，第一次在电影院参加技术大会真的有种赶老罗发布会的感受：java

这次的嘉宾阵容：es6

好了，进入正题，如下内容既是记录，又是本身的见解和总结，而后形式均为我认为的精华内容整理，完整的内容我以为不必赘述，由于大会官网会放出完整的视频。web

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

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

Stepan的演讲精华我以为能够精简整理为以下几点：redux

原来用RoR(其实这里泛指后端)作的事情如今均可以用Javascript作，好处是能够先后端复用代码，符合同构的基本条件，而后他经过一个目录结构对比演示指出了同构应用中须要解决的三个事情：渲染/路由/数据（我是这么理解的，由于我认为这确实是同构落地的关键）后端

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

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打造通用应用的折腾过程当中其实只要解决这关键的三点，差很少就能够打造出一个同构应用了，可是他尚未提到的还有：

由于先后端共用一份代码，若是client.js中包含require('fastclick')之类的只在浏览器才会依赖的组件引入代码时，咱们须要作好环境判断，固然，这很是简单，可是不得不考虑
若是前端项目中的jsx用的是es6 modules，可是server端用的是require，则须要考虑统一
同构项目的工程化问题
......

最后，我在星巴克逛Stepan博客的时候发现他的博客就是同构的，颇有趣，你们能够体验一下：

Stepan's Blog

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

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

JS-SDK签名过程当中提交的URL参数中不得带"#"及后面部分的内容，会致使签名报错
异步获取签名的时候，要设置正确的Content-Type
清缓存黑科技：//triggerWebViewCacheCleanup
flex部分支持
微信真的没有动过你的localStorage/Cookie，可能缘由是进程被杀等

等等，快后退，我要装逼了：

到3月份底，微信x5将全面升级为blink内核，并全网灰度发放完毕，也就说，咱们即将能够大胆写flex了，并不再担忧缓存问题了，动画卡顿问题也会获得改善，你们赶忙验证去吧。

黄士旗－ React Tips

士旗也是来自Facebook的工程师，讲的也是React，总结下来就是：士旗在教你们如何正确使用React：

容器组件的存在是为了让它能够专一于数据处理，而后让渲染组件专心负责渲染，只须要管扔进来的是什么数据而后渲染就能够了，这样处理后，咱们会发现component的代码将变得很是复杂，当咱们要管理的state太多以后，因此就有了flux store，可是flux的实现中有没必要要的实现，对于应用来讲，一个action，一个state就能够返回一个新的state，这彻底就是pure function就能够搞定的事情，因而有了redux store
将组件拆分，用更好的pure function来返回你须要渲染的这些组件，这样能够利用decorator/HOC来达到组件复用，还能够减小组件中大量的_XXX私有方法，让应用程序变得更加可控，debug变得更容易，其实这块仍是可以产生不少共鸣的，相信各厂都在实践一些营销页面快速产出的技术方案，React应该是比较合适的技术选型，能够利用decorator达到组件的高度复用
善用FP，RxJS。士旗在这里安利了一把learnRX项目（GitHub - ReactiveX/learnrx: A series of interactive exercises for learning Microsoft's Reactive Extensions Library for Javascript.），FP跟RxJS本质上是两个东西，只是RxJS中有用到FP的思想，编程思惟的转变我认为是须要训练和下功夫的，由于习惯思惟很是可怕，我有看过RxJS，这种“一切皆Stream”的咒语一开始使人很是困惑，但豁然开朗后简直仿佛像是看到另一个世界，这方面，士旗主要强调，咱们要善用Array的map/reduce/filter，FP可让代码变的简洁，FP的“语义化“方法名能够帮助提高代码可读性。

陈子舜－下一代web技术能够运用的点

子舜的话题中讲到了不少务实的，腾讯正在实践的一些技术：

包括离线化，包括对前端性能的不断优化
以前在阿里d2听过腾讯工程师分享过Node.js加速Qzone的一些细节，离线化这块有领略过腾讯对于追求产品极致用户体验的那种态度，我厂也正在慢慢实践，而且落地了一些初步工做，咱们意识到无线端的离线化意义重大。
而后他讲了ServiceWorker，http2，这里能够到时候看大会放出的视频
子舜这里还提到了运营商劫持的问题，而后安利了HTTPDNS

中间有一次圆桌，HAX主持，主要是一些撕逼，没有啥实质内容，并且我对于有同窗问出：［大家怎么看待RN的出现扰乱了原生开发和web开发之间的那种和谐］这种问题感到纳闷。

winter - 如何成为更好的前端

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

好比，咱们都干过console.dir(window)这种事情吧，而后看到陌生的api，赶忙去学习一下，给本身充充电
追求真理的态度，创建本身的知识体系，用权威推翻本身认为的甚至是社区认为的那些权威，好比他提到闭包，经过Google学术找到出处论文（追本溯源），而后推翻本身以前的那些认知
他认为要成为专业的前端工程师，20%靠的是知识，另外80%靠的是编码能力，工程能力，架构能力，后者可能须要的就是工做经验，而后不断练习，而后winter感慨，他本身成长最快的那几年都是在学校里，到了工做以后就不多有这样的机会快速成长，即便工做多年，可是发现本身的进步缓慢

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

由于以前读过几篇关于http/2的博文，对http/2仍是有所了解的，这个话题我没有听完，后来有事情就先走了，听了前面3/4场，这部分你们能够阅读相关博客弥补，我能够安利几篇：

结束篇

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