SDCC 2015前端專場札記：Facebook、百度、騰訊、美團、餓了么等互聯網公司的前端實戰

發表于2015-11-27 14:14| 682次閱讀| 來源AdMaster| 1 條評論| 作者劉越凡

SDCC札記前端 width="22" height="16" src="http://hits.sinajs.cn/A1/weiboshare.html?url=http%3A%2F%2Fwww.csdn.net%2Farticle%2F2015-11-27%2F2826342-SDCC&type=3&count=&appkey=&title=SDCC2015%E4%B8%AD%E5%9B%BD%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E8%80%85%E5%A4%A7%E4%BC%9A%E5%B7%B2%E6%88%90%E5%8A%9F%E9%97%AD%E5%B9%95%EF%BC%8C%E4%B8%BB%E5%8A%9E%E6%96%B9%E6%80%BB%E8%AE%A1%E9%82%80%E8%AF%B7%E4%BA%8695%E4%BD%99%E4%BD%8D%E6%BC%94%E8%AE%B2%E5%98%89%E5%AE%BE%EF%BC%8C%E4%B8%BA%E5%8F%82%E4%BC%9A%E8%80%85%E5%A5%89%E7%8C%AE%E4%BA%8610%E4%B8%AA%E4%B8%BB%E9%A2%98%E6%BC%94%E8%AE%B2%EF%BC%8C9%E5%A4%A7%E6%8A%80%E6%9C%AF%E4%B8%93%E5%9C%BA%E8%AE%BA%E5%9D%9B%E5%8F%8A5%E5%9C%BA%E7%89%B9%E8%89%B2%E6%B4%BB%E5%8A%A8%E3%80%82%E6%9C%AC%E6%96%87%E6%98%AFAdMaster%E5%89%8D%E7%AB%AF%E9%AB%98%E7%BA%A7%E5%B7%A5%E7%A8%8B%E5%B8%88%E5%88%98%E8%B6%8A%E5%87%A1%E5%8F%82%E5%8A%A0%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%93%E5%9C%BA%E7%9A%84%E5%90%AC%E8%AF%BE%E6%9C%AD%E8%AE%B0%EF%BC%8C%E4%BB%A5%E9%A3%A8%E8%AF%BB%E8%80%85%E3%80%82&pic=&ralateUid=&language=zh_cn&rnd=1448710407183" frameborder="0" scrolling="no" allowtransparency="true">摘要：SDCC2015中國軟件開發者大會已成功閉幕，主辦方總計邀請了95余位演講嘉賓，為參會者奉獻了10個主題演講，9大技術專場論壇及5場特色活動。本文是AdMaster前端高級工程師劉越凡參加前端開發專場的聽課札記，以饗讀者。

【編者按】11月21日，為期三天的 SDCC2015中國軟件開發者大會成功閉幕，主辦方總計邀請了95余位演講嘉賓，為參會者奉獻了10個主題演講，9大技術專場論壇（80余場技術演講），另外還有5場特色活動。另外，據官方統計參會人數高達1067名（不含工作人員）。

其中20日的前端開發專場，現場聽講人數一度爆滿，而沒有機會親臨現場的童鞋們，我們特邀請了業內專家、與會者分享他們的聽課感受及他們眼中的前端專場。以下是來自AdMaster前端高級工程師劉越凡參加前端開發專場的聽課札記，以饗讀者。

以下是劉越凡的聽課札記：

Facebook前端工程師ShihChi Huang(黃士旗)：Why?React?matters/scale

來自Facebook的 ShihChi?Huang(黃士旗)分享的內容更側重于知識普及，從幾個核心技術要點講解了一些內容。

UI?=?f(state)React?的?render()?函數便是其中的?f，將state渲染成Virtual?DOM，Virtual?DOM被React渲染成真正的DOM。我們不需要再關心DOM是如何變更的，我們只需要將我們想渲染的東西告訴?React，然后重新渲染Virtual?DOM，它會自動幫你把UI的改變渲染到真正的DOM上。

Predictable同樣的input應該返回同樣的output。UI在相同state的條件下，應該渲染出相同的界面。

ImmutableVirtual?DOM會小限度的修改DOM，但是有時候還是不夠，通過在?shouldComponentUpdate?階段比較?state，我們可以更精細的控制component?是否渲染，但是這樣就遇到一個問題，javascript?中對比兩個對象有先天性不足，React?社區得到?clojure?的啟發，引入了?immutable?數據，即函數式編程中的不可變數據，我們就放心的對對象進行任意操作，進行簡單對比就可以判斷出?state?有沒有發生變化，是否需要渲染。React?吸收了很多函數式編程的思想，組件的形式也是函數式的用法。

Flux最后還提到了flux?，單向數據流，官方的flux還比較簡陋，只提供了思想，有很多不錯的第三方實現，其中?Redux?目前比較受歡迎。

Strikingly CTO、聯合創始人郭達峰 ：?React.js?in?Strikingly

Strikingly的CTO 郭達峰，之前在論壇上有過一些交流，這次終于見到真人了。

達峰分享的側重點在于實踐，分享了很多?Strikingly?使用?React?過程中積累的經驗。

React?與?第三方庫的融合使用?React?的時候會遇到一個問題，有現成的?jQuery?的插件，但是不確定是否能使用在?React?中，用?React?重新實現的話可能又要花費大量的精力。達峰用一個?jQuery?插件?Sortable?舉例，將其封裝成了一個?React?component，使用時不僅能修改?DOM?也會更新?state?。感覺他對于?React?的態度比較理性，不是原旨主義，不追求所有的東西一律?React?化，而是去融合，這一點我很贊同。

Lazy?load?component利用?webpack?的特性實現?js?文件的按需加載，達到的最終效果是需要渲染某個?component?時，才去請求對應的?js?文件這一點對于被?SPA?js?文件過大困擾的人很有誘惑力。grunt?和?gulp?現在的問題是需要自己組裝大量的插件，插件的質量也是參差不齊，插件不好用的時候，自己就要去折騰，去砍樹之前，需要自己做把刀。webpack?配合? React?Hot?Loader?還能實現代碼熱插拔，開發效率上也能提高很多，有時候等?browserify?編譯其實也挺痛苦的。

Container?component劃分特定用途的?component，之前有類似的使用，但是沒有接觸過這樣明確的概念behaviour?Container?=>?Sortable?component?動作UI?Layout?Container?=>?SplitPane?component?布局Data?Container?=>?為?pure?component?提供?state

Global?state?object這是我最感興趣的一個，可以用?Global?state?object?將頁面完全還原，前端開發中?debug?是個很糾結的問題，有些?bug?很難重現出來，但是如果能復制出一摸一樣的頁面，這個問題就簡單多了，當測試人員/用戶遇到問題時，自動將當時的?state?發送給開發人員，開發人員利用?state?還原現場，非常有助于定位?bug。

美團技術終端組高級工程師呂偉 ?：前端分布式編譯系統的設計

呂偉分享的內容是前端分布式編譯系統，有種鳥槍換大炮的感覺。

大型系統的分布式編譯挺常見，但前端代碼倒真是第一次聽說，目前開發的產品用的是grunt?+?browserify， 雖然代碼并不是很多，但也會有個不長不短的編譯時間， 也是有點難受。同時我非常好奇美團的前端代碼究竟是有多少，都到了分布式編譯的地步。 核心思想還是共享運算資源，具體原理沒有細聽，目的是取代webpack?和?browserify， 正式投產后會完全開源，github見。

餓了么資深前端架構師兼大前端團隊負責人林建鋒 ?：ELE.ME是如何運行的

來自餓了么的林建鋒也就是sofish魚哥分享的內容是餓了么在前段工程化上的一些實踐。

前后端分離這個不需要解釋。Rest?API，Nginx?托管靜態資源。

開發與發布構建了一套成熟的開發/發布體系，而且封裝成了簡單的命令，甚至還做了一個界面化的?nginx?配置，不過手寫?nginx?配置應該算是前端的必備技能了吧？

優化使用了? Rest?api?batch?的做法，將一批請求包括多個API調用合并成一個HTTP請求，減少?HTTP?連接數，有人質疑到合并后會不會影響到頁面的分步渲染速度，但據說并不會，因為瀏覽器對同一域下并發連接數是有限的，一次太多的?http?請求過去也是4個4個的走，所以影響并不大。

百度EFE團隊資深工程師，百度ECharts產品工程師喬剛：前端數據可視化實踐

Echarts團隊的喬剛分享的內容是數據可視化的一些案例和?echarts?v3.0?的一些新特性。

目前的產品中正在使用?echarts，可以說真的是非常熟悉， 算是一個挺不錯的圖表庫，簡單易用，圖表種類繁多， 雖然不是?svg?但也支持很多交互事件，之前文檔組織的不夠清晰， 但自從有了那個配置參考之后方便了很多，當然也存在一些不足， 我比較看重的是移動端展現的問題，幾乎擠成一團，移動端的產品只好換成?chartjs?展現，希望能在接下來的?v3.0?中有所改善。

百姓網資深前端工程師賀師俊：如何制定和實施ES6+代碼風格和質量標準

百姓網的賀師俊，也就是前端圈內的老司機hax，他提到了coding?style?的制定和實施，確保實施的關鍵點在于工具，這一點很有體會， 如果團隊里的開發工具都是千奇百怪的，coding?style?的統一就更難保證了。我們的團隊在開發工具的統一上做的比較好，統一使用?Vim，連接到遠端機器編寫代碼， 只要手里有一臺有鍵盤、能聯網的機器，就能進行開發。

賀老一直在力推ES2015，這次還分享了一些使用中的一些疑難問題，

• arrow?VS?function，
• async?VS?generator，
• const?VS?let，
• template?VS?安全，

已經開始使用?ES2015?的同學應該都有一些自己的體會。快結束的時候還不忘引發圣戰，SPACE?VS?TAB。

騰訊互聯網增值業務前端團隊負責人鐘鵬飛 ?：Hybrid模式的深度融合

騰訊的鐘鵬飛分享的內容是騰訊手機QQ?H5優化與監控自動化建設。這部分由于臨時有事，只聽了一部分，有些遺憾。hybrid?也是最近很火的一個話題， 具有native?app?的系統福利，又有?web?app?的開發效率。 由于之前這方面接觸的不多，學習到了一個新的知識，hybrid?app?啟動中?Webview?的耗時占比很大。

總結

說實話，這次參會主要還是奔著React?來的，然后還看到了很多前端工程化方面的實踐， 收獲頗豐，解決了之前的一些疑惑， 也看到了一些方向。

React?打開了前端開發的新的思路， Virtual?DOM，組件化，State?數據流，函數式編程；webpack?使代碼編譯變得更加簡單； 美團的分布式編譯讓人覺得前端開發正在向客戶端開發靠攏；其實前端開發的演化也是在不斷借鑒客戶端開發的經驗， 畢竟我們在開發的已經不是一個單調的?page，而是一個功能豐富的?application。

也許有一天，當前端把客戶端走過的路再走一遍的時候，前端工程體系會變得成熟完善， 我們能把更多的時間集中在真正的開發中。

總結

以上是生活随笔為你收集整理的SDCC 2015前端专场札记：Facebook、百度、腾讯、美团、饿了么等互联网公司的前端实战的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。