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

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

==================================================
記得小時候寫作文的時候，老師都會強調三要素：時間，地點，人物；那下面就從這三要素來作為時間線回顧：

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

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

【進入正文】

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

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

==================================================
09:45 使用 React、Redux 和 Node.js 構建通用應用
Facebook 前端工程師 Stepan

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

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

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

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

代碼共享

使用nodejs，數據處理放在服務器，前端只要渲染，性能可以得到很高的優化

SEO

然后就是一些相關問題的代碼演示：

how about create store?

initial data?

how about fetching data?

關鍵詞： rails、react 、express、react-dom/server、reactRouter

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

微信團隊UI工程師 江劍鋒（jf）

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

jf 首先是展示了一些微信的數據：

微信 Android 客戶端機型分布

微信 Android 客戶端系統版本分布

微信用戶網絡分布

重點來了，在大概的了解微信的一個現狀后，jf 開始分享他們在微信開發的踩坑過程：

腦補一下，當我們在微信打開一個網頁后，默認是在微信里打開了一個瀏覽器，這個瀏覽器是微信基于 webkit 研發的一個名為 x5 內核瀏覽器，做過微信開發的人都清楚，在微信瀏覽器里總會遇到一些你意向不到的 BUG，以及調試困難的情況，下面看看微信團隊總結的一些常見的坑

常見的坑：

動畫卡頓

不支持偽元素動畫

只支持部分的 flex 布局

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

autoplay無效

待補充...

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

打開微信，點擊“我”——> 設置 ——> 通用 ——> 清理微信存儲空間

同時設置 localStorage 和 cookie

黑科技：//triggerWebViewCacheCleanup

Web 開發者工具

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

【下午場】

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

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

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

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

Manage data/state

UI logic

Reusable

Needed tests

2. Flux ReduceStore

做資料（數據處理）

負責render (渲染）

Functional style

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

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

騰訊云平臺產品中心總監 陳子舜(PuterJam)

主要講解與前端性能優化相關的技術點，從兩個常見的前端面試題引申話題：

問：如何做前端優化：
答：

Yahoo xxx原則

js 文件請求合并

css 雪碧圖

拆分域名

壓縮

...

問：頁面白屏會是什么原因：
答：

網絡問題

兼容問題

終端問題

作為面試者, 我們可能常常會想到以上一些關于前端性能優化的點，可是，做為騰訊云的技術總監，顯然不會給我們分享這么簡單的知識點：下面看看大牛們是從哪些方面考慮性能優化的，直接上圖：

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

計算機之子，阿里高級技術專家 程劭非(winter)

winter帶來的主題沒有涉及太多的技術細節，而是非常系統，站在某一個高度上分享他自己的學習經驗；強調前端不在于難學，而在于不知道怎么學；在他看來，如果前端分成100等分，前端技術知識點只占據20%，而能力則占據80%，這里的能力主要包括編程能力，架構能力，工程能力（管理）

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

上面這句話表面看不出什么意思，可仔細想想，其實他描述的是一種想象：一個好的優秀的前端是會區分對和錯的，應該是能看到事情的本質的一面，而不是僅僅只區分利與弊，能用就好的一個心態；更具體的講，winter 推薦我們可以從以下幾個方面去學習培養前端能力：

尋找線索

附錄

源代碼

反射（在瀏覽器運行查看效果，找到知識點的脈絡）

建立聯系

美感

完備性（如果有insertAfter方法，那我們應該想到會有insertBefore方法）

操作同一組數據（進行分類）

歸類

按照關聯關系建立起連接，對偶性，對稱性
例如：insertBefore對應insertAfter，bind對應unbind

追本溯源
當遇到問題有不同的見解時，我們應該具有追本溯源的心態，去google，看wiki，找到問題的關鍵本質，要有考據的過程，比如說閉包：

大部分可能會說： 閉包就是能夠讀取其他函數內部變量的函數

那如果我們去追本溯源，在深入一點去研究：

簡單的說： 閉包是什么

深入一點：閉包有什么作用

在深入一點：常見的用法

在在深入一點：會什么會有閉包這個東西

在在在深入一點：......

能力培養

習題很重要 習題很重要 習題很重要

能力是需要訓練的

主動性

習慣養成

系統訓練

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

國際知名Web設計師/前端工程師 Holger Bartel

最后一個主題是由Holger帶來的HTTP/2時代的web性能，由下面的一張圖可以看出人們正在排隊等待的一個過程，由此引申出當我們去訪問一個網頁時，如果需要等待一段時間才能得到反饋的這個過程

等待，是指我們需要一個特定的時間和特定的動作去執行，然而當我們需要做一件事情時，期望的應該是立即去執行，而不是需要等待一段時間

性能，主要是關乎用戶的一個期望，如果是2s內打開一個網頁，用戶是不會抱怨的，5s內如果能打開，那么用戶也還是可以接受的，但是如果是8s還不能打開，用戶是會失望的，他們會認為這個網站已經掛掉了；這個大概就是前端性能優化時我們經常會提到的一個2、5、8概念。

接著簡單說了目前一些常見的基礎優化策略：

inline image

css sprite

.....

講解頁面的渲染流程, 強調現有的優化主要是：阻塞資源，請求開銷，文件放置的位置，關鍵文件渲染的路徑等等，這些是在HTTP/1.1 時代做的事情，那么在HTTP/2,性能優化應該怎么處理，引申出 HTTP/2 的知識點：

HTTP/2 相比 HTTP/1.1 的更新大部分集中于：

多路復用

HEAD 壓縮

優先級請求

...

Holger Bartel 講解的 HTTP/2 涉及的新概念太多，這里不能一一道來，只能是在大海里取一瓢水的感覺，這里只能暫時的記錄一下，后面在去學習更新...

總的來講，HTTP/2 對未來 Web 性能優化工作起到很重要的作用，是一切優化的基礎。

推薦兩篇有關HTTP/2的文章：

HTTPS, SPDY和HTTP/2性能的簡單對比

HTTP2講解

在前端這個迭代更新如此快的領域，我們需要關注新的技術熱點，但是也要保持自己的步伐；在幾年前，MVC剛剛興起的時候，backoneJS，angularJS是比較火熱的，可是今天ReactJS、VueJS，EmberJS等的熱度已經遠遠超過了backboneJS，angularJS；很多新的前端框架可能會讓我們應接不暇；這個時候，我想應該靜下來仔細想想，最本質的東西是什么；

注釋：以上內容，謹代表個人見解，有不當之處，或若涉及圖片隱私或者其它問題，煩請指正.

最后： 感謝前端圈組織的這次活動 ，希望明年會越辦越好.