標籤：

參加第二屆前端開發者年度大會是個什麼樣的體驗？

01-07

比如聽到什麼新的技術，遇到什麼好玩的事情，最大的收穫是什麼，都可以說說

代表公司去參加今年的 第二屆前端開發者年度大會，散會的時候，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，以及調試困難的情況，下面看看微信團隊總結的一些常見的坑

常見的坑：

  1. 動畫卡頓
  2. 不支持偽元素動畫
  3. 只支持部分的 flex 布局
  4. 視頻默認是會有控制條的(去不掉，據說是為了防止惡意的視頻播放問題)
  5. autoplay無效
  6. 待補充...

緩存問題：

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

解決辦法：

  1. 打開微信，點擊「我」——&> 設置 ——&> 通用 ——&> 清理微信存儲空間

  2. 同時設置 localStorage 和 cookie

  3. 黑科技：//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 (渲染）

3. 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還不能打開，用戶是會失望的，他們會認為這個網站已經掛掉了；這個大概就是前端性能優化時我們經常會提到的一個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；很多新的前端框架可能會讓我們應接不暇；這個時候，我想應該靜下來仔細想想，最本質的東西是什麼；

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

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

文章同步在http://www.beansmile.com/blog/posts/feday-2016

更多文章可以訪問 http://beansmile.com/blog

出現最多的關鍵詞是react，

主要做pc端，公司對pc端要求兼容IE7，表示對react累感不愛，

移動端在用react，考慮要不要轉去做移動端好了

想聽我的真實感觸么？

都尼瑪廣告！！！

都尼瑪混臉熟的！！！

都在念文檔！！！

大多數來參加的都是準備或正在找工作的。

哈哈哈，我知道很多人要不爽了，不過這確實是我多次參加這種大型活動的感觸，不過沒有參加過你說的這次，不認同請摺疊。

推薦閱讀：

※參加2017年5月20日北京首屆VueConf大會是個什麼樣的體驗？
※APP開發者是否有權停止更新WP版本？
※XcodeGhost 事件會造成什麼影響？
※個人開發者在 iOS 或 Android 開發市場獲得成功的機會是不是越來越少，為什麼？
※個人開發者（非營利）如何應對不友善的用戶?

TAG:前端開發 | 開發者 |