摘要：代表公司去參加今年的第二屆前端開發(fā)者年度大會，散會的時候，技術(shù)老大問我，今天感覺怎么樣，有什么收獲，當(dāng)時就零零碎碎的回答了一些，不算完美趁著還記得點(diǎn)什么，在這里做個自我回顧總結(jié)，謹(jǐn)代表個人見解，有不當(dāng)之處，或若涉及圖片隱私或者其它問題，煩請

代表公司去參加今年的 第二屆前端開發(fā)者年度大會，散會的時候，Team 技術(shù)老大問我，今天感覺怎么樣，有什么收獲，當(dāng)時就零零碎碎的回答了一些，不算完美；趁著還記得點(diǎn)什么，在這里做個自我回顧總結(jié)，謹(jǐn)代表個人見解，有不當(dāng)之處，或若涉及圖片隱私或者其它問題，煩請指正.

==================================================
記得小時候?qū)懽魑牡臅r候，老師都會強(qiáng)調(diào)三要素：時間，地點(diǎn)，人物；那下面就從這三要素來作為時間線回顧：

時間：2016 - 03 - 19
地點(diǎn)：廣州嘉裕太陽城廣場三樓金逸國際影城四號廳
演講嘉賓：絕對的重量級人物，看圖說話

由于是在電影院舉行這次前端大會，整個過程下來大屏幕的觀看效果還是挺贊的，人數(shù)目測也在400+，除了廣州本地，也有不少是從其他城市過來的，可見這次的會議還是挺高大上的

【進(jìn)入正文】

==================================================

這里沒啥好講的，正常的會議流程，二維碼簽到，發(fā)送紀(jì)念T恤，進(jìn)入會場

==================================================
09:45 使用 React、Redux 和 Node.js 構(gòu)建通用應(yīng)用
Facebook 前端工程師 Stepan

第一個主題是由 Facebook 前端工程師 Stepan 帶來有關(guān)react的分享：從使用 rails 生成的項(xiàng)目目錄結(jié)構(gòu)為切入點(diǎn)，講到大約在08以前的時候，JavaScript在人們的心中是只能做一些動畫的效果，整個JavaScript 腳本放在 Rails 項(xiàng)目目錄下面的一個 assets/javascripts 中，是不太受關(guān)注；而在09年左右出現(xiàn)了 BackboneJS，以及后來的AngularJS等前端框架，以及現(xiàn)在很熱門的 ReactJS，VueJS，EmberJS等等，大概的講述了這些年來 JavaScript的一個發(fā)展歷程；

接下來，拋出了一個問題：前端可以不依賴 rails 嗎，后端為什么不能也用JavaScript來寫？

之后順勢推出了 ReactJS，主推前后端都使用 JavaScript 來實(shí)現(xiàn)，前端主要使用react，redux，后端使用 nodejs 去構(gòu)建整個應(yīng)用程序； 使用reactRouter做前端路由，使用 express 作為中間鍵等等，由于本人還沒有使用react和nodejs去寫過項(xiàng)目，這里就不好描述更多了，以免誤人子弟 :(

前后端都使用通一套語言的好處：

代碼共享

使用nodejs，數(shù)據(jù)處理放在服務(wù)器，前端只要渲染，性能可以得到很高的優(yōu)化

SEO

然后就是一些相關(guān)問題的代碼演示：

how about create store?

initial data?

how about fetching data?

關(guān)鍵詞： rails、react 、express、react-dom/server、reactRouter

==================================================

微信團(tuán)隊(duì)UI工程師 江劍鋒（jf）

第二個主題是由微信團(tuán)隊(duì)UI工程師 jf 帶來的有關(guān)微信 Web APP 開發(fā)的最佳實(shí)踐；可謂是干貨滿滿，把在微信開發(fā)過程中遇到的坑一一做了總結(jié)，以及介紹微信團(tuán)隊(duì)出品的一個 UI庫：WeUI

jf 首先是展示了一些微信的數(shù)據(jù)：

微信 Android 客戶端機(jī)型分布

微信 Android 客戶端系統(tǒng)版本分布

微信用戶網(wǎng)絡(luò)分布

重點(diǎn)來了，在大概的了解微信的一個現(xiàn)狀后，jf 開始分享他們在微信開發(fā)的踩坑過程：

腦補(bǔ)一下，當(dāng)我們在微信打開一個網(wǎng)頁后，默認(rèn)是在微信里打開了一個瀏覽器，這個瀏覽器是微信基于 webkit 研發(fā)的一個名為 x5 內(nèi)核瀏覽器，做過微信開發(fā)的人都清楚，在微信瀏覽器里總會遇到一些你意向不到的 BUG，以及調(diào)試?yán)щy的情況，下面看看微信團(tuán)隊(duì)總結(jié)的一些常見的坑

常見的坑：

動畫卡頓

不支持偽元素動畫

只支持部分的 flex 布局

視頻默認(rèn)是會有控制條的(去不掉，據(jù)說是為了防止惡意的視頻播放問題)

autoplay無效

待補(bǔ)充...

緩存問題：
可能有時候做微信開發(fā)，你會碰到緩存失效的問題：
解決辦法：

打開微信，點(diǎn)擊“我”——> 設(shè)置 ——> 通用 ——> 清理微信存儲空間

同時設(shè)置 localStorage 和 cookie

黑科技：//triggerWebViewCacheCleanup

Web 開發(fā)者工具

X5升級：
據(jù) jf 介紹，目前微信 x5 瀏覽器正在升級，由以前基于webkit改為了基于Blink，填掉了許多在 x5 出現(xiàn)的坑，目前已經(jīng)有30%的用戶微信瀏覽器默認(rèn)是已經(jīng)升級了的，據(jù)說也是某種黑魔法，會自動升級，jf 透露，預(yù)計(jì)在4月底會全部更新完成

【下午場】

==================================================

Facebook 前端工程師 黃士旗(ShihChi Huang)

下午場的第一個主題是Facebook前端工程師黃士旗帶來的主題React Tips，黃士旗是臺灣人，普通話講的非常的有power；主要是分享使用 react 開發(fā)一個 TODO 示例程序進(jìn)行講解相關(guān)的知識點(diǎn)：

1. Container Component 的概念：
解決的問題：

Manage data/state

UI logic

Reusable

Needed tests

2. Flux ReduceStore

做資料（數(shù)據(jù)處理）

負(fù)責(zé)render (渲染）

Functional style

推薦使用 reduceStore, StateLess Component
提到一個 HOC 的概念 ，沒理解，后續(xù)在消化更新...
這個主題講的非常的棒，可是一時不知道該寫些什么...

==================================================

騰訊云平臺產(chǎn)品中心總監(jiān) 陳子舜(PuterJam)

主要講解與前端性能優(yōu)化相關(guān)的技術(shù)點(diǎn)，從兩個常見的前端面試題引申話題：

問：如何做前端優(yōu)化：
答：

Yahoo xxx原則

js 文件請求合并

css 雪碧圖

拆分域名

壓縮

...

問：頁面白屏?xí)鞘裁丛颍?/strong>
答：

“好前端才分對錯，成年人只分利弊” -- winter