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

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

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

時(shí)間：2016 - 03 - 19
地點(diǎn)：廣州嘉裕太陽(yáng)城廣場(chǎng)三樓金逸國(guó)際影城四號(hào)廳
演講嘉賓：絕對(duì)的重量級(jí)人物，看圖說(shuō)話

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

【進(jìn)入正文】

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

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

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

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

接下來(lái)，拋出了一個(gè)問(wèn)題：前端可以不依賴 rails 嗎，后端為什么不能也用JavaScript來(lái)寫？

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

前后端都使用通一套語(yǔ)言的好處：

代碼共享

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

SEO

然后就是一些相關(guān)問(wè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）

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

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

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

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

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

重點(diǎn)來(lái)了，在大概的了解微信的一個(gè)現(xiàn)狀后，jf 開始分享他們?cè)谖⑿砰_發(fā)的踩坑過(guò)程：

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

常見的坑：

動(dòng)畫卡頓

不支持偽元素動(dòng)畫

只支持部分的 flex 布局

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

autoplay無(wú)效

待補(bǔ)充...

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

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

同時(shí)設(shè)置 localStorage 和 cookie

黑科技：//triggerWebViewCacheCleanup

Web 開發(fā)者工具

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

【下午場(chǎng)】

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

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

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

1. Container Component 的概念：
解決的問(wèn)題：

Manage data/state

UI logic

Reusable

Needed tests

2. Flux ReduceStore

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

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

Functional style

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

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

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

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

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

Yahoo xxx原則

js 文件請(qǐng)求合并

css 雪碧圖

拆分域名

壓縮

...

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

“好前端才分對(duì)錯(cuò)，成年人只分利弊” -- winter