【51CTO.com原創(chuàng)稿件】2017年12月01日-02日，由51CTO主辦的WOTD全球軟件開發(fā)技術(shù)峰會(huì)將在深圳中州萬(wàn)豪酒店隆重舉行。本次峰會(huì)以軟件開發(fā)為主題，數(shù)十位專家級(jí)嘉賓將帶來(lái)多場(chǎng)精彩的技術(shù)內(nèi)容分享。屆時(shí)，餓了么高級(jí)技術(shù)經(jīng)理張龍先生將在前端開發(fā)實(shí)戰(zhàn)分會(huì)場(chǎng)與來(lái)賓分享"餓了么前端基礎(chǔ)設(shè)施的建設(shè)"主題演講，為大家詳細(xì)闡述餓了么團(tuán)隊(duì)打造前端基礎(chǔ)設(shè)施的歷程，以及在實(shí)踐中獲得的一些經(jīng)驗(yàn)和思考。51CTO誠(chéng)邀您蒞臨大會(huì)，與我們共享技術(shù)帶來(lái)的喜悅。

51CTO記者對(duì)即將參加大會(huì)演講的張龍老師進(jìn)行了專訪，讓我們先睹為快，探聽一下他是如何解讀前端基礎(chǔ)設(shè)施建設(shè)的。

同時(shí)服務(wù)于開發(fā)團(tuán)隊(duì)和用戶

當(dāng)今，軟件開發(fā)技術(shù)日新月異，其中，前端基礎(chǔ)設(shè)施的建設(shè)意義重大：一方面在于獲得更好的用戶體驗(yàn)，從而留存用戶，另一方面是為了加快開發(fā)速度，提高開發(fā)效率，為公司創(chuàng)造更大的價(jià)值。

當(dāng)一個(gè)公司的前端工程師超過(guò) 50 人之后，如果沒(méi)有一個(gè)團(tuán)隊(duì)提供工具和服務(wù)來(lái)提高效率，就會(huì)造成一定程度的資源浪費(fèi)。因?yàn)槊總€(gè)前端開發(fā)小團(tuán)隊(duì)都會(huì)有公共的需求，如果有專業(yè)的團(tuán)隊(duì)來(lái)支持這樣的公共需求，就比每個(gè)小團(tuán)隊(duì)做這些重復(fù)的工作要高效的多。另外，基礎(chǔ)設(shè)施的性能和穩(wěn)定性也會(huì)影響終端用戶的體驗(yàn)，更需要專業(yè)團(tuán)隊(duì)的開發(fā)和維護(hù)。

為服務(wù)型的平臺(tái)保駕護(hù)航

“餓了么”是中國(guó)知名的在線外賣訂餐平臺(tái)，已覆蓋中國(guó)數(shù)百個(gè)城市，數(shù)千萬(wàn)用戶，聚集了數(shù)十萬(wàn)家餐飲商戶，為中國(guó)廣泛地區(qū)的用戶提供豐富多樣的便捷生活服務(wù)。在餓了么高級(jí)技術(shù)經(jīng)理張龍老師看來(lái)，作為一個(gè)服務(wù)性的平臺(tái)，餓了么前端基礎(chǔ)設(shè)施建設(shè)服務(wù)的***對(duì)象是用戶，其次才是前端開發(fā)者。對(duì)于終端用戶，前端基礎(chǔ)設(shè)施的建設(shè)可以保證出色的用戶體驗(yàn)，例如訪問(wèn)速度的改善以及服務(wù)的穩(wěn)定，讓用戶感受到產(chǎn)品的魅力。對(duì)于開發(fā)者，前端基礎(chǔ)設(shè)施的建設(shè)可以為他們提供一些配套的工具或服務(wù)，以提高他們的開發(fā)效率，更好的與他人溝通合作。

餓了么前端基礎(chǔ)設(shè)施的建設(shè)之路

據(jù)張龍老師介紹，在他剛加入餓了么的時(shí)候還沒(méi)有大前端這個(gè)部門，只有一些代碼及協(xié)作規(guī)范。大前端部門成立之后，他帶領(lǐng)架構(gòu)與機(jī)動(dòng)組解決團(tuán)隊(duì)的一些痛點(diǎn)需求。

首先要解決的就是開發(fā)不重復(fù)勞作的問(wèn)題。張龍老師帶領(lǐng)團(tuán)隊(duì)研發(fā)了兩款基于 Vue.js 的組件庫(kù) Element(PC 端)、Mint UI (移動(dòng)端)，并對(duì)外開源，在開源社區(qū)取得了一些影響力。

之后要解決的問(wèn)題就是上線簡(jiǎn)單且自動(dòng)化，于是餓了么大前端團(tuán)隊(duì)開發(fā)了一套發(fā)布系統(tǒng)，這套發(fā)布系統(tǒng)提供不同的測(cè)試環(huán)境和生產(chǎn)環(huán)境，可以將前端業(yè)務(wù)的靜態(tài)資源發(fā)送到不同的環(huán)境。測(cè)試環(huán)境供開發(fā)人員自測(cè)或者測(cè)試人員根據(jù) PRD 進(jìn)行測(cè)試，生產(chǎn)環(huán)境供終端用戶使用。通過(guò)這套系統(tǒng)，發(fā)布時(shí)間從原先的7天縮短到了如今的5分鐘。

接下來(lái)要解決的問(wèn)題是想要更快的訪問(wèn)速度。于是餓了么大前端團(tuán)隊(duì)拋棄了原先配置繁碎的 CDN 服務(wù)，在發(fā)布服務(wù)的基礎(chǔ)上推出了一個(gè)可以直接拉取 Github、Gitlab、NPM 資源的 CDN 服務(wù)，大大簡(jiǎn)化了 CDN 的使用流程。

***，為了保證服務(wù)的穩(wěn)定可靠，針對(duì)頁(yè)面性能、報(bào)錯(cuò)、Nginx 以及 CDN 層面都做了監(jiān)控，以確保終端用戶的使用。

在餓了么前端基礎(chǔ)設(shè)施的建設(shè)之路上，張龍老師和他的團(tuán)隊(duì)遇到了很多困難，張龍老師簡(jiǎn)單介紹了他們今年遇到的一個(gè)比較大的問(wèn)題：“發(fā)布系統(tǒng)”的穩(wěn)定性。

餓了么服務(wù)鏈路中的某一個(gè)環(huán)會(huì)在運(yùn)行一段時(shí)間后莫名其妙的掛掉，然而當(dāng)一個(gè)產(chǎn)品所依賴的服務(wù)愈發(fā)龐大時(shí)，就很難定位到產(chǎn)品問(wèn)題的根源。雖然這個(gè)產(chǎn)品僅供內(nèi)部前端開發(fā)者使用，但是問(wèn)題得定位和解決占用了大量時(shí)間，極大地影響了開發(fā)者的使用體驗(yàn)。因此，痛定思痛之后，餓了么大前端團(tuán)隊(duì)做了兩件事：

1. 事前預(yù)防：把所有的服務(wù)都加上監(jiān)控，在用戶報(bào)問(wèn)題之前，可以主動(dòng)的發(fā)現(xiàn)問(wèn)題。

2. 事后恢復(fù)：為關(guān)鍵服務(wù)加入災(zāi)備，當(dāng)出現(xiàn)故障時(shí)可以迅速切換到正常的服務(wù)上，并根據(jù)梳理好的服務(wù)架構(gòu)、文檔對(duì)事故服務(wù)進(jìn)行快速恢復(fù)。

發(fā)布服務(wù)構(gòu)架

發(fā)布服務(wù)流程

穩(wěn)定為王

***，張龍老師表示，純粹的前端基礎(chǔ)設(shè)施工作并不多，因?yàn)榍岸恕⒁苿?dòng)端、后端的基礎(chǔ)設(shè)施建設(shè)的思路大同小異。張龍老師認(rèn)為“穩(wěn)定”是決定一個(gè)服務(wù)是否被用戶接受的重要因素。“你要想清楚三點(diǎn)：為什么我的服務(wù)會(huì)掛?服務(wù)掛了我怎么定位?定位到了怎么恢復(fù)?保證了穩(wěn)定性你就已經(jīng)贏在了起跑線上了。”

【講師簡(jiǎn)介】

[[207856]]

張龍，工作近 10 年，現(xiàn)任餓了么大前端部高級(jí)研發(fā)經(jīng)理。在加入餓了么之前，有 5 年的時(shí)間負(fù)責(zé)一款商業(yè)產(chǎn)品的前端組件研發(fā)工作。15 年初加入餓了么大前端，擔(dān)任架構(gòu)與機(jī)動(dòng)組負(fù)責(zé)人，帶領(lǐng)團(tuán)隊(duì)研發(fā)了兩款基于 Vue.js 的組件庫(kù) Element(PC 端)、Mint UI (移動(dòng)端)，并對(duì)外開源，在開源社區(qū)取得了一些影響力。除此之外，還帶領(lǐng)團(tuán)隊(duì)創(chuàng)建了一些前端基礎(chǔ)設(shè)施，提升了前端項(xiàng)目的開發(fā)、部署的效率。

使用優(yōu)惠碼[2017WOTDSZ]，和我一起去WOTD全球軟件開發(fā)技術(shù)峰會(huì)。8折優(yōu)惠，僅限72小時(shí)!詳情點(diǎn)擊wot.51cto.com

【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為51CTO.com】