前端技術體系大局觀

前後端分離

前後端分離的含義不只是前後端代碼的分離，而是系統級的分離。

前端要有一整套獨立的開發、線上服務與周邊保障體系，從而更全面地支撐用戶端業務的快速發展，並且實現跨業務線的技術資源橫向復用。

前後端分離不是說前端工程師只需要關注瀏覽器或者App內的部分，由於系統級分離的需要，反而要更有全局意識，關注各種支撐系統的建設與發展。

前端技術體系

整個前端技術體系可以分為四個層次。線下層的重點在於提高開發效率，基礎設施層重點關注穩定性，保障層重點關注質量與可用性，業務層重點關注服務的全面性和可復用性。

業務系統

公共樣式庫有利於各業務線之間保持用戶體驗的一致性。各業務線在公共樣式庫的基礎之上做可復用的UI組件，促進效率提升。

公共功能庫包括常用的功能模塊，比如登陸、支付、數據統計等等，可以用自動化測試的覆蓋度來保障質量。

第三方庫的組織構成：

• 樣式框架：Bootstrap Material design

• UI框架：React Vue

• 第三方功能庫：Fetch Modernizr Sentry GA

• 第三方基礎庫：jQuery Zetpo Underscore Lodash

業務系統輔助

• 配置系統 - 集中管理各種配置項，比如功能開關，鏈接地址，AB測試控制等等。使用配置系統的好處是不用改代碼並發布即可實現實時控制。集中配置項也更便於展示他們之間的關係。

• 消息系統 - 通知發布 信息推送 客服等即時通訊場景

• 鑒權系統 - 集中處理登陸、支付等需要風險控制較高的公共業務

監控系統

前端的監控系統要解決的問題是如何從用戶的角度判斷系統的可用性。只有用戶端的可用才是真正的可用。

如果監控沒有覆蓋到終端，那麼很可能會造成嚴重的倖存偏誤。比如某個介面從後端的角度來看成功率接近百分之百，但事實上多數用戶的請求都失敗了，因為請求沒有正確發到後端。

監控系統的功能分類：

• 可用性監控 - 頁面訪問成功率 介面成功率

• 錯誤監控 - 收集並匯總應用系統拋出的錯誤信息
• 業務指標監控 - 實時訂單量 事件觸發量

統計系統

統計系統和監控系統的區別在於，監控關注的是實時數據，統計關注的是全量數據，監控是為了提高團隊的故障響應能力，統計是為產品與業務分析提供基礎。

統計系統的功能分類：

• 性能統計

• 訪問量統計

• 用戶行為統計

測試系統

自動化測試是是一個塔型體系。靜態檢查是必須的，作為團隊規範存在，覆蓋全部代碼。UT是局部覆蓋的，關注基礎功能。E2E是可選的，關注主流程和回歸測試。

• 靜態檢查 - Eslint JSCS

• Unit Test - Karma Jasmine Mocha

• End to End Test - Protractor Nightwatch Selenium

• 持續集成 - TravisCI CircleCI

基礎設施層

• 資源管理系統 - CDN 圖片管理 發布工具 離線包管理

• 數據持久化系統 - 存儲上層系統的非核心業務數據，比如錯誤數據或者用戶行為數據
• 運維繫統 - 版本控制 發布腳本

工具集

• 代碼管理 - Git Stash

• 包管理 - NPM Bower Yarn

• 構建工具 - Webpack

• 任務管理工具 - Gulp Grunt

• 腳手架 - Yeoman

組件系統

組件系統的作用在於集中管理可復用的開發資源。不止包括UI組件，也包括功能組件。

各業務線優先從系統中選取可復用的部分，同時向系統中沉澱組件。

組件系統要點：

• 組件的質量標準

• 組件的測試用例

• 組件的復用機制

• Demo與Gallery

總結

前後端的分離是系統級的分離，前端要有一整套完整的技術體系以更好地支持產品在終端形態上的快速演進，同時實現技術資源的橫向復用。技術體系的線下層重點關注開發效率，基礎設施層重點關注穩定性，保障層重點關注質量與可用性，業務層重點關注服務的全面性和可復用性。

求賢

美團點評餐飲平台前端團隊持續招聘各級別前端人才，感興趣的同學發簡歷到zhangxin19@meituan.com

微信公眾號：張鑫技術男