隨著科技的發(fā)展，終端種類越來越豐富，前端作為連接用戶終端與后端服務(wù)、提供視覺體驗的關(guān)鍵環(huán)節(jié)，發(fā)展迅速。相比十年前，前端的邊界和范圍變得更加廣泛，甚至有點模糊，一名優(yōu)秀的前端工程師不僅需要精通自己的專業(yè)領(lǐng)域，了解設(shè)備終端的特點、OS、運行環(huán)境，同時還需要具備良好的審美和對用戶體驗的感覺，以及了解服務(wù)部署、服務(wù)運維的知識。

前端的知識領(lǐng)域也從最初的單點，擴展到了現(xiàn)在的網(wǎng)狀結(jié)構(gòu)；開發(fā)方式也從最初的頁面級開發(fā)，發(fā)展到現(xiàn)在工程級的開發(fā)協(xié)作方式。技術(shù)體系歸根結(jié)底是圍繞業(yè)務(wù)發(fā)展、團隊規(guī)模和團隊特點量身打造的，主要目的是為了提升團隊整體的研發(fā)效率，確保線上的質(zhì)量和穩(wěn)定性。

結(jié)合前端研發(fā)的特點，一個完備的技術(shù)體系應(yīng)當(dāng)包括流程規(guī)范（涵蓋開發(fā)、構(gòu)建、部署、運行各個階段），技術(shù)工具棧（技術(shù)選型和基礎(chǔ)工具設(shè)施），構(gòu)建工具棧，自動化測試，部署流程和部署平臺，監(jiān)控體系（錯誤監(jiān)控、性能監(jiān)控、業(yè)務(wù)監(jiān)控、服務(wù)監(jiān)控）。

以上是美團點評酒旅前端團隊的技術(shù)體系結(jié)構(gòu)圖，我們有兩種共存的項目類型（靜態(tài)化項目和服務(wù)端項目），不同類型的項目技術(shù)工具棧和部署平臺略有不同，靜態(tài)化項目是通過CDN進行承載，前端使用輕量級的MVVM框架Vue進行功能開發(fā)，同時借助移動端樣式組件庫提升開發(fā)效率，通過離線包機制和KNB（Native Bridge）增強頁面在容器內(nèi)的表達(dá)能力，最后通過AWP（自建的靜態(tài)化發(fā)布系統(tǒng)）可以高效的進行上線部署。服務(wù)端項目不同的是使用NodeServer進行承載，前端通過AngularJS/Vue.js進行功能開發(fā)，同時配合NGUI（AngularJS樣式組件庫）快速進行頁面搭建，Node端框架選用的是Express，服務(wù)的部署通過OPS（內(nèi)部的運維發(fā)布系統(tǒng)）完成。靜態(tài)化項目和服務(wù)端項目有各自不同的適用場景，靜態(tài)化開發(fā)模式適合輕量型的項目，比如移動端H5就是一個典型的例子，服務(wù)端開發(fā)模式適合稍大型的獨立項目，這種模式開發(fā)可以一定程度上降低純前端開發(fā)的復(fù)雜度，而且可以進行服務(wù)端渲染，也適合對SEO非常敏感的項目。

人機識別服務(wù)是我們從前端角度設(shè)計和開發(fā)的一套安全機制，它包含前端SDK和基于Node實現(xiàn)的驗證服務(wù)，可以用于接口的防抓取、防止接口被第三方非法調(diào)用等場景。目前線上接入的業(yè)務(wù)平均攔截率在30%左右，接口Top90的響應(yīng)時間在9ms以內(nèi)，由此可見，Node的應(yīng)用很大程度上擴展了前端研發(fā)的能力范圍，使得前端的業(yè)務(wù)解決方案有了更多的可能性。

構(gòu)建工具棧中我們通過Yeoman開發(fā)了團隊的腳手架，開發(fā)者可以通過腳手架快速地進行項目搭建和組件開發(fā)，通過Gulp和Webpack進行項目的構(gòu)建和打包，NPM作為團隊統(tǒng)一的包管理工具，Sass作為CSS的預(yù)編譯工具提升CSS代碼的可維護性，Babel作為ES6的編譯工具，這樣我們代碼里可以用到ES6的一些新特性和語法糖，ESLint作為團隊的代碼檢查工具保證代碼的規(guī)范一致，并且接入了Sonar。同時借助一些開源的自動化測試工具提升開發(fā)階段的代碼質(zhì)量。

監(jiān)控體系中Sentry用于線上錯誤信息的收集和監(jiān)控，Perf平臺用于Web端性能數(shù)據(jù)的收集，靈犀用于業(yè)務(wù)的統(tǒng)計和埋點，F(xiàn)alcon一方面用于Server的監(jiān)控報警，一方面用于業(yè)務(wù)監(jiān)控和報警（比如火車票的搶票失敗率和接口調(diào)用情況），PM25（詳情可以參考之前的博客文章《美團酒店Node全棧開發(fā)實踐》）是我們自建的一套針對NodeServer進程粒度的開源的監(jiān)控報警系統(tǒng)，用于確保線上Node服務(wù)的穩(wěn)定性，它可以針對進程級別進行監(jiān)控和遠(yuǎn)程操作，當(dāng)現(xiàn)場出現(xiàn)異常時可以第一時間進行現(xiàn)場信息的收集和保留，同時通過日志平臺實時上報服務(wù)端的日志用于后續(xù)進行數(shù)據(jù)分析和追查問題。

• 圍繞業(yè)務(wù)發(fā)展。

• 結(jié)合團隊規(guī)模和特點。

• 自動化、組件化、標(biāo)準(zhǔn)化。

• 聚焦效率、體驗和質(zhì)量。

• 如無必要，勿增實體。

為什么選用Node作為前后端中間層，以及它所發(fā)揮的作用

• 作為很薄的中間層，前端能夠獨立部署獨立發(fā)布，同時降低大型項目的純前端開發(fā)復(fù)雜度。

• 全棧開發(fā)拓展前端的能力范圍，能夠更好地支撐業(yè)務(wù)，同時也能讓工程師得到能力提升。

為什么移動端采用強混合的開發(fā)方式

• 新業(yè)務(wù)層出不窮，需要快速迭代上線并驗證業(yè)務(wù)模式，H5開發(fā)有天然的優(yōu)勢。

• 采用強混合的開發(fā)方式可以兼顧開發(fā)效率和體驗，使得H5頁面在客戶端接近原生的體驗。

移動端為什么選用Vue而非React

• 非常輕量的一款MVVM框架，生態(tài)健全、高性能、高可控性和優(yōu)秀的組件化機制。

• 便于技術(shù)棧統(tǒng)一，Vue2.x已經(jīng)支持SSR，PC端和移動端可以采用相同的技術(shù)選型。

• 阿里開源的Weex基于Vue（Vue-Native），是一種全新的Hybrid開發(fā)途徑，會持續(xù)關(guān)注。

• 天然適合移動端場景，雖然不支持IE8，但兼容性要求較高的PC端項目較少。

• 移動端基于Vue和AWP的純靜態(tài)化開發(fā)方案可以應(yīng)用離線包等離線化方案提升加載速度。

• 尤雨溪目前全職開發(fā)，更新及時（最新的2.x版本已經(jīng)支持服務(wù)端渲染）。

• React雖有專業(yè)團隊維護，但Licence有潛在的商業(yè)風(fēng)險，并且較Vue而言體積龐大。

我們前端團隊目前100多人的規(guī)模，通過標(biāo)準(zhǔn)化、組件化和自動化的方式能夠解放生產(chǎn)力，讓工程師和開發(fā)者聚焦在業(yè)務(wù)邏輯、技術(shù)創(chuàng)新上。目前團隊內(nèi)各項核心指標(biāo)的監(jiān)控和推送都會集成內(nèi)部的IM系統(tǒng)，可以通過自動化工具進行故障通報、個人和項目方面能夠?qū)r間投入進行追蹤和分析，重復(fù)工作可以通過腳手架進行一鍵傻瓜式操作，組件化方面沉淀了移動和PC的樣式組件庫、組件平臺，標(biāo)準(zhǔn)化主要體現(xiàn)在整個團隊的技術(shù)棧高度統(tǒng)一，從而更能夠在技術(shù)上有深耕和積累、并且抹平了項目間人員流動的成本。

過去未去，未來已來。前端沒有終點，當(dāng)你以為是終點的時候，其實是還未看到新的起跑線。前端行業(yè)的發(fā)展太過迅速，因此作為一名優(yōu)秀的前端工程師，我們必須使用動態(tài)的思維去搭建、優(yōu)化我們的技術(shù)體系，更好的服務(wù)于業(yè)務(wù)、支撐業(yè)務(wù)的快速發(fā)展。