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

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

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

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

此次的嘉賓陣容：

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

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

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

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

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

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

這個函數(shù)可以在server端直接將數(shù)據(jù)扔給res.send，也可以用在client端用來生成真實的dom；但我們的應(yīng)用往往是復(fù)雜的，React(Facebook的工程師肯定是要來安利React的)的renderToString方法可以幫助我們完成Server-Side Rendering，因為React的vdom不需要依賴瀏覽器側(cè)的環(huán)境，這是React支持服務(wù)端渲染的唯一一個方法，好多同學(xué)已經(jīng)知道了，講到這里，作為一名Facebook工程師，他成功地為本次大會率先安利了一把React

對于路由，他基本上直接安利了React-Router，然后貼出了跟React-Router官方文檔幾乎一樣的代碼，所以，折騰過的同學(xué)基本可以略過這個環(huán)節(jié)，但其實很多同學(xué)應(yīng)該知道，路由共享是同構(gòu)的重要部分，其實這里的坑還是蠻多的，其中還包括React-Router自身的bug，我在項目里的做法是將這塊邏輯以中間件的形式進行處理。

對于數(shù)據(jù)，不管你有沒有用flux，都要解決初始化數(shù)據(jù)的問題，因為兩端共用一份render邏輯，在后端直出的時候，需要將后端得到的數(shù)據(jù)同步給前端，否則，前端二次render，會得到不正確的渲染輸出，這個相信玩過React后端直出的應(yīng)該也知道，解決方案幾乎都是一致的，說到底就是通過:

window.__STORE__ = {}

將數(shù)據(jù)帶給前端。你會發(fā)現(xiàn)其他封裝好的第三方同構(gòu)庫ISO等最終用的都是這個邏輯。

關(guān)于組件拉取數(shù)據(jù)，他安利了isomorphic-fetch，這樣前后端可以共享一份拉取數(shù)據(jù)的邏輯，對于組件數(shù)據(jù)在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方法返回的上下文，由于我們的業(yè)務(wù)只直出了部分組件數(shù)據(jù)，所以這里的做法有所不同，我的做法是將ISO邏輯置入中間件，當(dāng)中間件匹配到路由后，將利用yield next轉(zhuǎn)交給下一個中間件先拉取數(shù)據(jù)，然后將數(shù)據(jù)放入locals中，等到執(zhí)行到ISO中間件時，中間件將locals中的數(shù)據(jù)拿出，初始化給React-Router匹配到的組件上下文，最后renderToString
React＋Node.js打造通用應(yīng)用的折騰過程中其實只要解決這關(guān)鍵的三點，差不多就可以打造出一個同構(gòu)應(yīng)用了，但是他還沒有提到的還有：

因為前后端共用一份代碼，如果client.js中包含require("fastclick")之類的只在瀏覽器才會依賴的組件引入代碼時，我們需要做好環(huán)境判斷，當(dāng)然，這非常簡單，但是不得不考慮

如果前端項目中的jsx用的是es6 modules，但是server端用的是require，則需要考慮統(tǒng)一

同構(gòu)項目的工程化問題

......

最后，我在星巴克逛Stepan博客的時候發(fā)現(xiàn)他的博客就是同構(gòu)的，很有趣，大家可以體驗一下：

Stepan"s Blog

劍鋒幽默風(fēng)趣的講演風(fēng)格顯然非常接地氣，這個話題從一開始就吸引住了全場的開發(fā)者，因為有太多開發(fā)者曾經(jīng)被微信坑過，這個分享我直奔干貨總結(jié)了：

JS-SDK簽名過程中提交的URL參數(shù)中不得帶"#"及后面部分的內(nèi)容，會導(dǎo)致簽名報錯

異步獲取簽名的時候，要設(shè)置正確的Content-Type

清緩存黑科技：//triggerWebViewCacheCleanup

flex部分支持

微信真的沒有動過你的localStorage/Cookie，可能原因是進程被殺等

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

到3月份底，微信x5將全面升級為blink內(nèi)核，并全網(wǎng)灰度發(fā)放完畢，也就說，我們即將可以大膽寫flex了，并再也不擔(dān)心緩存問題了，動畫卡頓問題也會得到改善，大家趕緊驗證去吧。

士旗也是來自Facebook的工程師，講的也是React，總結(jié)下來就是：士旗在教大家如何正確使用React：

容器組件的存在是為了讓它可以專注于數(shù)據(jù)處理，然后讓渲染組件專心負(fù)責(zé)渲染，只需要管扔進來的是什么數(shù)據(jù)然后渲染就可以了，這樣處理后，我們會發(fā)現(xiàn)component的代碼將變得非常復(fù)雜，當(dāng)我們要管理的state太多之后，所以就有了flux store，但是flux的實現(xiàn)中有不必要的實現(xiàn)，對于應(yīng)用來說，一個action，一個state就可以返回一個新的state，這完全就是pure function就可以搞定的事情，于是有了redux store

將組件拆分，用更好的pure function來返回你需要渲染的這些組件，這樣可以利用decorator/HOC來達到組件復(fù)用，還可以減少組件中大量的_XXX私有方法，讓應(yīng)用程序變得更加可控，debug變得更容易，其實這塊還是能夠產(chǎn)生很多共鳴的，相信各廠都在實踐一些營銷頁面快速產(chǎn)出的技術(shù)方案，React應(yīng)該是比較合適的技術(shù)選型，可以利用decorator達到組件的高度復(fù)用

善用FP，RxJS。士旗在這里安利了一把learnRX項目（GitHub - ReactiveX/learnrx: A series of interactive exercises for learning Microsoft"s Reactive Extensions Library for Javascript.），F(xiàn)P跟RxJS本質(zhì)上是兩個東西，只是RxJS中有用到FP的思想，編程思維的轉(zhuǎn)變我認(rèn)為是需要訓(xùn)練和下功夫的，因為習(xí)慣思維非常可怕，我有看過RxJS，這種“一切皆Stream”的咒語一開始令人非常困惑，但豁然開朗后簡直仿佛像是看到另外一個世界，這方面，士旗主要強調(diào)，我們要善用Array的map/reduce/filter，F(xiàn)P可以讓代碼變的簡潔，F(xiàn)P的“語義化“方法名可以幫助提升代碼可讀性。

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

包括離線化，包括對前端性能的不斷優(yōu)化
之前在阿里d2聽過騰訊工程師分享過Node.js加速Q(mào)zone的一些細(xì)節(jié)，離線化這塊有領(lǐng)略過騰訊對于追求產(chǎn)品極致用戶體驗的那種態(tài)度，我廠也正在慢慢實踐，并且落地了一些初步工作，我們意識到無線端的離線化意義重大。

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

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

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

第一次見到winter大神本尊，我佩服和尊敬這樣的前輩，但是我會保持風(fēng)度和拒絕浮躁，winter的分享雖然不是技術(shù)內(nèi)容分享，但他分享了他在學(xué)習(xí)前端過程中的一些他認(rèn)為的好方法，我覺得現(xiàn)場好多前端工程師應(yīng)該是可以跟他產(chǎn)生共鳴的：

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

追求真理的態(tài)度，建立自己的知識體系，用權(quán)威推翻自己認(rèn)為的甚至是社區(qū)認(rèn)為的那些權(quán)威，比如他提到閉包，通過Google學(xué)術(shù)找到出處論文（追本溯源），然后推翻自己之前的那些認(rèn)知

他認(rèn)為要成為專業(yè)的前端工程師，20%靠的是知識，另外80%靠的是編碼能力，工程能力，架構(gòu)能力，后者可能需要的就是工作經(jīng)驗，然后不斷練習(xí)，然后winter感慨，他自己成長最快的那幾年都是在學(xué)校里，到了工作之后就很少有這樣的機會快速成長，即使工作多年，但是發(fā)現(xiàn)自己的進步緩慢

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

HTTP2.0的奇妙日常

前端開發(fā)與 HTTP/2 的羈絆——安利篇

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