FEDAY第二屆前端開發者大會回顧

使用React、Redux和Node.js構建通用應用

演講者是來自Facebook的Stepan，他爲咱們介紹了怎麼樣用Node和React、React-Router、Redux等技術，創建一個通用應用(Universal APP)或者同構應用（Isomorphism APP）。

歷史

他先從2008年講起，從那時的Rails包攬路由、驗證和視圖相關的工做，而JS則只用來寫一點點貌似很酷（？）的動畫。到後來backbone、ember、angular等等技術和框架的出現，JS已經能夠作到解決路由、驗證和視圖等這些之前是Rails作的工做。

同構的好處

1. Code Sharing（代碼模塊能夠共享）

2. Perceived Performance（有些腳本能夠放在前端來執行，體驗更好）

3. SEO（搜索引擎對單頁面應用的收錄還不夠好）

代碼示例

用一系列代碼示例來解決了如下問題

1. View共享： react-dom的ReactDOMServer.renderToString()

2. 路由共享：client端用react-router的browserHistory, server端則使用 match 功能（服務器端作配置是爲了解決瀏覽器端禁用 JS 後，頁面還可否渲染出來的問題），server端和client端能夠共用一套路由的配置文件，能夠參照ServerRendering

3. 數據： 可使用redux等數據流的庫，在服務端渲染時將data賦值給window.__DATA__

4. 初始化數據： 這裏提到在一些須要拉取數據的組件裏，封裝一個fetchData的方法，而後在初始化應用時能夠調用一個fetchAllData方法實現組件的數據初始化。介紹了一個isomorphic-fetch的庫，能夠在瀏覽器端和node端使用fetch api, 這樣能夠實現一個api封裝的文件能夠在server端和client端共用。

一些代價

1. 從各個平臺遷移到node+react同構仍是須要作大量的工做

2. node是單線程的，能夠考慮使用Clousure

微信Web APP開發最佳實踐

演講人是來自微信的江劍鋒

微信應用使用Web APP的狀況

有微信城市，微信搜索結果等

微信JSSDK

JSSDK給開發者提供了調用微信功能和手機功能的能力。
爲何作一個靜態頁面，也須要進行服務端簽名呢，這裏JF介紹說主要是爲了安全。
開發者可使用微信的測試號來測試（域名沒備案也能夠測）。
小提示：
簽名失敗的緣由，注意在取url加密時不要後面的hash，還有就是contentType注意設置爲json

微信用戶分佈

能夠看出使用2G網絡用戶有8%之多

X5內核

抹平不一樣Android機型的webview差別，減小適配的工做量

目前的X5內核坑仍是很多的：

1. 緩存很嚴重，甚至html文件也會緩存，清理緩存有個黑科技：在聊天框輸入//triggerWebViewCacheCleanup

2. flex佈局部分不支持，不支持flex-wrap等，可使用老寫法

3. 動畫卡頓，僞元素不支持動畫效果

4. 視頻：controll控制條必須存在（產品層面考慮，防止用戶沒法關閉視頻）；autoplay無效，能夠用touchstarts事件觸發；currentTime不許

5. 可能出現cookie或者localstorage失效，多是內存不足、進程被殺、微信主動殺或用戶主動清理形成，能夠多管齊下，同時啓用兩種方案

WeUI

快速打造一套微信風格的UI界面

微信調試工具

還提到了weinre

X5內核升級了

這個月底，微信X5內核將全量從webkit內核升級到blink內核，用戶無須升級客戶端版本就能夠升級到最新內核，上面的坑基本沒有了~

• 標準緩存

• 支持flex

• canvas支持css背景色

• filter:blur()有效

• 動畫卡頓

• 僞元素支持動畫

• autoplay有效

React Tips

演講人是Fackebook前端工程師黃士旗。

Container Component

Flux Store & Reduce Store

Functional*

HOC高階組件

High-order Components 高階組件，本質上就是 Decorator 模式在React的一種實現，Debug友好

Composition over inheritance

RxJS

強烈推薦這個網址，https://github.com/ReactiveX/learnrx，學會了Rx以後你會發現JS原來還能夠這麼寫。

如何提早運用下一代Web技術提高Web性能和安全

主講人是陳子舜(PuterJam)。

一個常見的前端面試題

HTPP/2時代的Web性能