[轉] 美團點評酒旅前端的技術體系

何謂技術體系

技術體系指社會中各類技術之間相互做用、相互聯繫、按必定目的、必定結構方式組成的技術總體。技術體系是科技生產力的一種具體形式。

前端技術體系的範圍和做用

隨着科技的發展，終端種類愈來愈豐富，前端行業也在迅猛發展，目前前端早已成爲鏈接用戶終端、視覺體驗、服務端的重要一環，相比十年前前端的邊界和範圍也更普遍甚至模糊，一名優秀的前端工程師不只須要精通本身的專業領域，還須要瞭解設備終端的特色、OS、運行環境，同時還須要具有良好的審美和對用戶體驗的感受，此外還須要瞭解服務部署、服務運維的知識。

前端的知識領域也從最初的單點擴展到了如今的網狀結構，開發方式也從最初的頁面級開發到了如今的工程級的開發協做方式。技術體系歸根結底是要圍繞業務發展、團隊規模和團隊特色量身打造的，主要目的是爲了提高團隊總體的研發效率，確保線上的質量和穩定性。

結合前端研發的特色，一個完備的技術體系應當包括流程規範（涵蓋開發、構建、部署、運行的各個階段）、技術工具棧（技術選型和基礎工具設施）、構建工具棧、自動化測試、部署流程和部署平臺、監控體系（錯誤監控、性能監控、業務監控、服務監控）。

酒旅前端團隊的技術體系

以上是酒旅前端團隊的技術體系結構圖，咱們有兩種共存的項目類型（靜態化項目和服務端項目），不一樣類型的項目技術工具棧和部署平臺略有不一樣，靜態化項目是經過CDN進行承載，前端使用輕量級的MVVM框架Vue進行功能開發，同時藉助移動端樣式組件庫提高開發效率，經過離線包機制和KNB (Native Bridge)加強頁面在容器內的表達能力，最後經過AWP（自建的靜態化發佈系統）能夠高效的進行上線部署。服務端項目不一樣的是使用NodeServer進行承載，前端經過AngularJS/VueJS進行功能開發，同時配合NGUI（AngularJS樣式組件庫）快速進行頁面搭建，Node端框架選用的是Express，服務的部署經過OPS（內部的運維發佈系統）完成。靜態化項目和服務端項目有各自不一樣的適用場景，靜態化開發模式適合輕量型的項目，好比移動端H5就是一個典型的例子，服務端開發模式適合稍大型的獨立項目，這種模式開發能夠必定程度上下降純前端開發的複雜度，並且能夠進行服務端渲染，也很是適合對SEO很是敏感的項目。

人機識別服務是咱們在前端角度設計和開發的一套安全機制，它包含前端SDK和基於Node實現的驗證服務，能夠用於接口的防抓取、防止接口被第三方非法調用等場景。目前線上接入的業務平均攔截率在30%左右，接口TOP90的響應時間在9ms之內，因而可知，Node的應用很大程度上擴展了前端研發的能力範圍，使得前端的業務解決方案有了更多的可能性。

構建工具棧中咱們經過Yeoman開發了團隊的腳手架，開發者能夠經過腳手架快速的進行項目搭建和組件開發，經過Gulp和Webpack進行項目的構建和打包，NPM做爲團隊統一的包管理工具，Sass做爲CSS的預編譯工具提高CSS代碼的可維護性，Babel做爲ES6的編譯工具，這樣咱們代碼裏能夠用到ES6的一些新特性和語法糖，ESLint做爲團隊的代碼檢查工具保證代碼的規範一致，而且接入了Sonar。同時藉助一些開源的自動化測試工具提高開發階段的代碼質量。

監控體系中Sentry用於線上錯誤信息的收集和監控，Perf平臺用於Web端性能數據的收集，靈犀用於業務的統計和埋點，Falcon一方面用於Server的監控報警，一方面用於業務監控和報警（好比火車票的搶票失敗率和接口調用狀況），PM25是咱們自建的一套針對NodeServer進程粒度的開源的監控報警系統，用於確保線上Node服務的穩定性，它能夠針對進程級別進行監控和遠程操做，當現場出現異常時能夠第一時間進行現場信息的收集和保留，同時經過日誌平臺實時上報服務端的日誌用於後續進行數據分析和追查問題。

當前技術體系下的效果

技術體系的基本架構原則

• 圍繞業務發展
• 結合團隊規模和特色
• 自動化、組件化、標準化
• 聚焦效率、體驗和質量
• 如無必要，勿增實體

團隊技術選型的一些思考

爲何選用Node做爲先後端中間層，以及它所發揮的做用

• 做爲很薄的中間層，前端可以獨立部署獨立發佈，同時下降大型項目的純前端開發複雜度
• 全棧開發拓展前端的能力範圍，可以更好地支撐業務，同時也能讓工程師獲得能力提高

爲何移動端採用強混合的開發方式

• 新業務層出不窮，須要快速迭代上線並驗證業務模式，H5開發有自然的優點
• 採用強混合的開發方式能夠兼顧開發效率和體驗，使得H5頁面在客戶端接近原生的體驗

移動端爲何選用Vue而非React

• 很是輕量的一款MVVM框架，生態健全、高性能、高可控性和優秀的組件化機制
• 便於技術棧統一，Vue2.0已經支持SSR，PC端和移動端能夠採用相同的技術選型
• 阿里開源的Weex基於Vue（Vue-Native），是一種全新的Hybrid開發途徑，會持續關注
• 自然適合移動端場景，雖然不支持IE8，但兼容性要求較高的PC端項目較少
• 移動端基於Vue和AWP的純靜態化開發方案能夠應用離線包等離線化方案提高加載速度
• 尤雨溪目前全職開發，更新及時（前不久剛發佈了2.0版本，已經支持服務端渲染）
• React雖有專業團隊維護，但Licence有潛在的商業風險，而且較Vue而言體積龐大

自動化、組件化、標準化

咱們團隊目前近80人的規模，經過自動化、組件化和標準化的方式可以解放生產力，讓工程師和開發者聚焦在業務邏輯、技術創新上。目前團隊內各項核心指標的監控和推送都會集成內部的IM系統，能夠經過自動化工具進行故障通報、我的和項目方面可以對時間投入進行追蹤和分析，重複工做能夠經過腳手架進行一鍵傻瓜式操做，組件化方面沉澱了移動和PC的樣式組件庫、組件平臺，標準化主要體如今整個團隊的技術棧高度統一，從而更可以在技術上有深耕和積累、而且抹平了項目間人員流動的成本。

過去未去，將來已來。前端沒有終點，當你覺得是終點的時候，實際上是還未看到新的起跑線。前端行業的發展太過迅速，所以做爲一名優秀的前端工程師，咱們必須使用動態的思惟去搭建、優化咱們的技術體系，更好的服務於業務、支撐業務的快速發展。

做者簡介

郭凱，美團點評酒旅事業羣前端團隊負責人，高級技術專家，資深互聯網人，全棧工程師，工做狂，崇尚工匠精神，曾就任於音悅臺、淘寶旅行。翻譯做品有《編寫可維護的JavaScript》、《第三方JavaScript編程》，有In、Juicer、jSQL、F2E.im、PM25等開源項目，業餘時間負責開源前端技術社區F2E的開發和維護。