摘要：前戲補上參會的完整記錄，這個問題從一開始我就是準備自問自答的，希望可以通過這種形式把大會的干貨分享給更多人。

2016/3/21 補上參會的完整記錄，這個問題從一開始我就是準備“自問自答”的，希望可以通過這種形式把大會的干貨分享給更多人。

我跟同事周周是周六凌晨1點才到的廣州，住的地方在小區里面，路過樓下的時候看到一家還在營業的啤酒吧，很有Feel，但是此時的精神狀態直接把我們送到了房間里，洗完澡之后就碎覺了，準備次日集中精神好好聽講。

次日，我們穿個馬路就來到了本次feday大會的現場。然后是標準的簽到，拿“大禮包“，參會證等流程，經常參加大會的同學應該很熟悉了，由于我之前參加過d2，覺得阿里報告廳的屏幕已經很震撼了，沒想到，第一次在電影院參加技術大會真的有種趕老羅發布會的感覺：

此次的嘉賓陣容：

好了，進入正題，以下內容既是記錄，又是自己的看法和總結，然后形式均為我認為的精華內容整理，完整的內容我覺得沒必要贅述，因為大會官網會放出完整的視頻。

來參加feday前看到本次大會的主題，當我看到同構話題的時候比較興奮，因為之前負責的我廠一個全站消息中心改造項目，我和搭檔有實踐同構并為之落地，而且該項目已經上線，所以還是比較清楚同構的作用以及使用場景，而且在廠內也做了相關分享，所以想看看大會上能不能碰撞出一點不一樣的火花。

Stepan的演講精華我覺得可以精簡整理為如下幾點：

原來用RoR(其實這里泛指后端)做的事情現在都可以用Javascript做，好處是可以前后端復用代碼，符合同構的基本條件，然后他通過一個目錄結構對比演示指出了同構應用中需要解決的三個事情：渲染/路由/數據（我是這么理解的，因為我認為這確實是同構落地的關鍵）

對于渲染，他先列舉了一個非常簡單的例子，我認為他要表達的意思是：渲染的本質其實就是模版+數據，例如:

function template(data){ return "${data}"; }

這個函數可以在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了，并再也不擔心緩存問題了，動畫卡頓問題也會得到改善，大家趕緊驗證去吧。

士旗也是來自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的“語義化“方法名可以幫助提升代碼可讀性。

子舜的話題中講到了很多務實的，騰訊正在實踐的一些技術：

包括離線化，包括對前端性能的不斷優化
之前在阿里d2聽過騰訊工程師分享過Node.js加速Qzone的一些細節，離線化這塊有領略過騰訊對于追求產品極致用戶體驗的那種態度，我廠也正在慢慢實踐，并且落地了一些初步工作，我們意識到無線端的離線化意義重大。

然后他講了ServiceWorker，http2，這里可以到時候看大會放出的視頻

子舜這里還提到了運營商劫持的問題，然后安利了HTTPDNS

中間有一次圓桌，HAX主持，主要是一些撕逼，沒有啥實質內容，而且我對于有同學問出：［你們怎么看待RN的出現擾亂了原生開發和web開發之間的那種和諧］這種問題感到納悶。

第一次見到winter大神本尊，我佩服和尊敬這樣的前輩，但是我會保持風度和拒絕浮躁，winter的分享雖然不是技術內容分享，但他分享了他在學習前端過程中的一些他認為的好方法，我覺得現場好多前端工程師應該是可以跟他產生共鳴的：

比如，我們都干過console.dir(window)這種事情吧，然后看到陌生的api，趕緊去學習一下，給自己充充電

追求真理的態度，建立自己的知識體系，用權威推翻自己認為的甚至是社區認為的那些權威，比如他提到閉包，通過Google學術找到出處論文（追本溯源），然后推翻自己之前的那些認知

他認為要成為專業的前端工程師，20%靠的是知識，另外80%靠的是編碼能力，工程能力，架構能力，后者可能需要的就是工作經驗，然后不斷練習，然后winter感慨，他自己成長最快的那幾年都是在學校里，到了工作之后就很少有這樣的機會快速成長，即使工作多年，但是發現自己的進步緩慢

因為之前讀過幾篇關于http/2的博文，對http/2還是有所了解的，這個話題我沒有聽完，后來有事情就先走了，聽了前面3/4場，這部分大家可以閱讀相關博客彌補，我可以安利幾篇：

HTTP2.0的奇妙日常

前端開發與 HTTP/2 的羈絆——安利篇

說個題外話，QCON貌似也臨近了，據我了解，今年qcon對前端話題的范圍基本也是限制在下一代web技術，再回過頭來看本次的FEDAY，我覺得從嘉賓到議題還是符合時代氣息的。希望下次越辦越好，很開心的是在回來的前一天晚上，在樓下的那個啤酒吧里遇到了stepan，holger，士旗，裕波等人，跟stepan和holger面對面交流了相關主題，真可謂不虛此行，滿足之余，在知乎上，博客上同步以上所有內容給大家，謝謝。