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

發(fā)表于2015-11-27 14:14| 682次閱讀| 來(lái)源AdMaster| 1 條評(píng)論| 作者劉越凡

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中國(guó)軟件開(kāi)發(fā)者大會(huì)已成功閉幕，主辦方總計(jì)邀請(qǐng)了95余位演講嘉賓，為參會(huì)者奉獻(xiàn)了10個(gè)主題演講，9大技術(shù)專場(chǎng)論壇及5場(chǎng)特色活動(dòng)。本文是AdMaster前端高級(jí)工程師劉越凡參加前端開(kāi)發(fā)專場(chǎng)的聽(tīng)課札記，以饗讀者。

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

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

以下是劉越凡的聽(tīng)課札記：

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

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

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

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

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

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

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

Strikingly的CTO 郭達(dá)峰，之前在論壇上有過(guò)一些交流，這次終于見(jiàn)到真人了。

達(dá)峰分享的側(cè)重點(diǎn)在于實(shí)踐，分享了很多?Strikingly?使用?React?過(guò)程中積累的經(jīng)驗(yàn)。

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

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

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

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

美團(tuán)技術(shù)終端組高級(jí)工程師呂偉 ?：前端分布式編譯系統(tǒng)的設(shè)計(jì)

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

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

餓了么資深前端架構(gòu)師兼大前端團(tuán)隊(duì)負(fù)責(zé)人林建鋒 ?：ELE.ME是如何運(yùn)行的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

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

總結(jié)

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

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