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面對面交流了相關主題，真可謂不枉此行，知足之餘，在知乎上，博客上同步以上全部內容給你們，謝謝。