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

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

同時服務(wù)于開發(fā)團隊和用戶

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

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

為服務(wù)型的平臺保駕護航

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

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

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

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

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

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

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

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

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

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

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

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

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

穩(wěn)定為王

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

【講師簡介】

[[207856]]

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

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

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