SDCC 2015前端專場札記：Facebook、百度、騰訊、美團、餓了么等互聯(lián)網(wǎng)公司的前端實戰(zhàn)

發(fā)表于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中國軟件開發(fā)者大會已成功閉幕，主辦方總計邀請了95余位演講嘉賓，為參會者奉獻了10個主題演講，9大技術專場論壇及5場特色活動。本文是AdMaster前端高級工程師劉越凡參加前端開發(fā)專場的聽課札記，以饗讀者。

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

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

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

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

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

UI?=?f(state)React?的?render()?函數(shù)便是其中的?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?社區(qū)得到?clojure?的啟發(fā)，引入了?immutable?數(shù)據(jù)，即函數(shù)式編程中的不可變數(shù)據(jù)，我們就放心的對對象進行任意操作，進行簡單對比就可以判斷出?state?有沒有發(fā)生變化，是否需要渲染。React?吸收了很多函數(shù)式編程的思想，組件的形式也是函數(shù)式的用法。

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

Strikingly CTO、聯(lián)合創(chuàng)始人郭達峰 ：?React.js?in?Strikingly

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

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

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

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

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

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

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

呂偉分享的內(nèi)容是前端分布式編譯系統(tǒng)，有種鳥槍換大炮的感覺。

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

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

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

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

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

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

百度EFE團隊資深工程師，百度ECharts產(chǎn)品工程師喬剛：前端數(shù)據(jù)可視化實踐

Echarts團隊的喬剛分享的內(nèi)容是數(shù)據(jù)可視化的一些案例和?echarts?v3.0?的一些新特性。

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

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

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

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

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

已經(jīng)開始使用?ES2015?的同學應該都有一些自己的體會。快結(jié)束的時候還不忘引發(fā)圣戰(zhàn)，SPACE?VS?TAB。

騰訊互聯(lián)網(wǎng)增值業(yè)務前端團隊負責人鐘鵬飛 ?：Hybrid模式的深度融合

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

總結(jié)

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。