參加第二屆前端開發者年度大會總結

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

知乎話題

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

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

感覺下大會的現場：

因爲是在電影院舉行此次前端大會，整個過程下來大屏幕的觀看效果仍是挺讚的，人數目測也在400+，除了廣州本地，也有很多是從其餘城市過來的，可見此次的會議仍是挺高大上的

【進入正文】

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

09:00 簽到

這裏沒啥好講的，正常的會議流程，二維碼簽到，發送記念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

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

10:50 微信Web APP開發最佳實踐

微信團隊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月底會所有更新完成

【下午場】

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

13:10 React Tips

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 的概念 ，沒理解，後續在消化更新...
這個主題講的很是的棒，但是一時不知道該寫些什麼...

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

14:20 下一代Web技術運用

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

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

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

• Yahoo xxx原則

• js 文件請求合併

• css 雪碧圖

• 拆分域名

• 壓縮

• ...

問：頁面白屏會是什麼緣由：
答：

• 網絡問題

• 兼容問題

• 終端問題

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

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

16:30 下前端能力的培養

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

winter帶來的主題沒有涉及太多的技術細節，而是很是系統，站在某一個高度上分享他本身的學習經驗；強調前端不在於難學，而在於不知道怎麼學；在他看來，若是前端分紅100等分，前端技術知識點只佔據20%，而能力則佔據80%，這裏的能力主要包括編程能力，架構能力，工程能力（管理）

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

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

尋找線索

• 附錄

• 源代碼

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

創建聯繫

• 美感

• 完備性（若是有insertAfter方法，那咱們應該想到會有insertBefore方法）

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

歸類

• 按照關聯關係創建起鏈接，對偶性，對稱性
  例如：insertBefore對應insertAfter，bind對應unbind

追本溯源
當遇到問題有不一樣的看法時，咱們應該具備追本溯源的心態，去google，看wiki，找到問題的關鍵本質，要有考據的過程，好比說閉包：

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

那若是咱們去追本溯源，在深刻一點去研究：

1. 簡單的說： 閉包是什麼

2. 深刻一點：閉包有什麼做用

3. 在深刻一點：常見的用法

4. 在在深刻一點：會什麼會有閉包這個東西

5. 在在在深刻一點：......

能力培養

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

• 能力是須要訓練的

• 主動性

• 習慣養成

• 系統訓練

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

17:35 HTTP/2 時代的Web性能

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

最後一個主題是由Holger帶來的HTTP/2時代的web性能，由下面的一張圖能夠看出人們正在排隊等待的一個過程，由此引伸出當咱們去訪問一個網頁時，若是須要等待一段時間才能獲得反饋的這個過程

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

性能，主要是關乎用戶的一個指望，若是是2s內打開一個網頁，用戶是不會抱怨的，5s內若是能打開，那麼用戶也仍是能夠接受的，可是若是是8s還不能打開，用戶是會失望的，他們會認爲這個網站已經掛掉了；這個大概就是前端性能優化時咱們常常會提到的一個二、五、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的文章：

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

2. HTTP2講解

總結：

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

註釋：以上內容，謹表明我的看法，有不當之處，或若涉及圖片隱私或者其它問題，煩請指正.

最後： 感謝前端圈組織的此次活動 ，但願明年會越辦越好.