何謂技術體系
技術體系指社會中各種技術之間相互作用、相互聯系、按一定目的、一定結構方式組成的技術整體。技術體系是科技生產力的一種具體形式。
前端技術體系的范圍和作用
隨着科技的發展，終端種類越來越豐富，前端行業也在迅猛發展，目前前端早已成為連接用戶終端、視覺體驗、服務端的重要一環，相比十年前前端的邊界和范圍也更廣泛甚至模糊，一名優秀的前端工程師不僅需要精通自己的專業領域，還需要了解設備終端的特點、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的開發和維護。