引言

進入2019年，大前端技術生態似乎進入到了一個相對穩定的環境，React在2013年釋出至今已經6年時間了，Vue 1.0在2015年釋出，至今也有4年時間了。

整個業界在前端框架不斷迭代中，也尋找到了許多突破方向，例如跨平臺中的RN、Flutter，服務端GraphQL、Serverless，前端和客戶端的融合越來越緊密，前端在Node和Electron的加持下，也擴充套件了自己的版圖到服務端和桌面。

同時，隨著前端開發越來越複雜，整個前端研發也經歷了人工化->工具化->工程化->智慧化的演變。目前各個大廠在工程化實踐不斷迭代，出現了許多Low/No Code等前端智慧化解決方案，工程化實踐也深入到研發的各個環節，不斷提升前端研發的標準化能力。而且，隨著機器學習的加入，各類UI2Code的解決方案也開始出現，前端研發進入了一個完全不同的時代。

隨著端上能力的不斷增強，現在在端上做的事情越來越多。首先，資料視覺化方向，各類圖表、地圖、3D等等資料視覺化的嘗試變得越來越多。其次，伴隨著人工智慧的加持，在端上的人工智慧應用也變的普及，減少了服務端的互動，提高了系統的實時響應能力。最後，隨著Webassembly等技術的應用，有可能將前端執行能力再提升一個檔次，可以進行更為複雜的端上計算。

為了瞭解當前前端的發展趨勢，讓我們從國內各大網際網路大廠開始，瞭解他們的最新動態和未來規劃。前面系列已經介紹過了阿里、騰訊、百度、攜程的大前端技術體系。

這一篇講介紹美團點評。

業務介紹

美團點評是一個連線消費者和商家的本地生活平臺，在C端涵蓋食、住、行、遊、購、娛等眾多本地生活服務，在B端也不斷深入，具備營銷、配送、IT、金融、供應鏈和運營等能力。

美團點評基於餐廳的本地點評和團購業務開始，每年不斷擴充套件新的業務，豐富業務品類增強使用者粘度，逐步成長為一個本地生活服務的超級平臺。

從業務方面主要包含以下幾個部分：

• 到家業務：餐飲外賣，配送
• 到店業務：到店餐飲，酒店，旅遊，到店綜合業務
• 新業務：生鮮超市，交通票務（飛機、火車、汽車、輪船等），共享單車，網約車
• 商家業務：營銷，及時配送，雲端ERP系統，聚合支付收單，供應鏈，金融貸款

大前端技術全景

美團點評在多業務、多容器、多端上都有非常豐富的業務場景，於是在大前端領域沉澱了眾多的解決方案和框架。上圖是根據現有公開資料整理而成的技術全景圖，大體上能夠體現在大前端方面的積累，當然這可能僅僅是公司現有能力的冰山一角。

在技術推廣和宣傳方面，美團點評也是不遺餘力，目前有幾個很好的途徑可以瞭解：

• 技術部落格：tech.meituan.com/
• 技術沙龍：tech.meituan.com/2019/01/03/…
• 技術年貨：tech.meituan.com/tags/技術年貨.h…

後面我會就各個部分進行展開的介紹，文末會有福利附上大量參考資料。

工程化

MCI - 客戶端持續整合

MCI是美團點評客戶端持續整合平臺，在客戶端功能越來越強大、程式碼庫越來越大、參與團隊越來越多，不可避免會導致客戶端持續整合面臨幾大挑戰：

• 依賴模組複雜
• 研發流程繁瑣
• 構建速度慢
• App出包質量差

MCI架構體系包含移動CI平臺、流程自動化建設、靜態檢查體系、日誌監控&分析、資訊管理配置，另外MCI還採取二進位制整合等措施來提升MCI的構建速度。

MCI實現了客戶端持續整合的平臺統一，極大提高了研發效率和保證客戶端質量，實現了研發流程的自動化，提升了打包的速度與效率，同時也配備了諸如包體積大小、程式碼質量檢測等能力。

詳細可以檢視參考資料[1]。

CAT - 全端監控平臺

CAT（Central Application Tracking），是美團點評基於 Java 開發的一套開源的分散式實時監控系統。美團點評基礎架構部希望在基礎儲存、高效能通訊、大規模線上訪問、服務治理、實時監控、容器化及叢集智慧排程等領域提供業界領先的、統一的解決方案，CAT 目前在美團點評的產品定位是應用層的統一監控元件，在中介軟體（RPC、資料庫、快取、MQ 等）框架中得到廣泛應用，為各業務線提供系統的效能指標、健康狀況、實時告警等服務。

CAT從開發至今，一直秉承著簡單的架構就是最好的架構原則，主要分為三個模組：CAT-client、CAT-consumer、CAT-home。

• Cat-client 提供給業務以及中間層埋點的底層SDK。
• Cat-consumer 用於實時分析從客戶端提供的資料。
• Cat-home 作為使用者給使用者提供展示的控制端。

CAT專案從2011年開始做，到現在整個生產環境大概有三千應用，監控的服務端從零到幾千，再到今天的兩萬多的規模，整個專案是從歷時看起來是一個五年多的專案，但即使是做了五年多的這樣一個專案，目前還有很多的需求需要開發。

詳細可以檢視參考資料[2][3]。

Logan - 移動端整合日誌庫

Logan是美團點評集團移動端基礎日誌元件，這個名稱是Log和An的組合，代表個體日誌服務。同時Logan也是“金剛狼”大叔的名號，當然我們更希望這個產品能像金剛狼大叔一樣“犀利”。Logan已經穩定迭代了一年多的時間。目前美團點評絕大多數App已經接入並使用Logan進行日誌收集、上傳、分析。

目前儲存SDK部分已經開源，GitHub的專案地址參見：github.com/Meituan-Dia… 。

在移動App中，最擔心的場景就是無法還原使用者的錯誤場景，通過散落在各處的日誌無法完整的追溯使用者的操作情況，導致線上問題處理不及時甚至無法重現。

Logan框架就是一個移動端基礎日誌元件，能夠通過自動/手動方式來收集完整的使用者日誌資訊，並且通過友好、聚合的前端系統形式來展現，幫助開發者快速定位問題。

Logan其核心體系由四大模組構成：

• 日誌輸入：程式碼級日誌、網路日誌、使用者行為日誌、崩潰日誌、H5日誌等。
• 日誌儲存：Logan自研的日誌協議解決了日誌本地聚合儲存的問題，採用“先壓縮再加密”的順序，使用流式的加密和壓縮，避免了CPU峰值，同時減少了CPU使用。
• 後端系統：後端是接收和處理資料中心，相當於Logan的大腦。主要有四個功能：接收日誌、日誌解析歸檔、日誌分析、資料平臺。
• 前端系統：研發人員通過Logan前端系統搜尋日誌，進入日誌詳情頁檢視具體內容，從而定位問題，解決問題。具備了資料視覺化、篩選、過濾、搜尋、分享等功能。

詳細可以檢視參考資料[4]

ERA - 全棧前端框架

前端開發涉及建立專案、框架選型、業務邏輯、配置打點、收集日誌、構建測試、申請服務、上線檢查等一系列環節，在各個環節中又有大量的技術選型，這樣不斷耗費開發同學的精力，同時也很難做到技術棧的統一和標準化，進而缺乏技術沉澱，每次新專案開發都需要從零開始。

ERA提供了一整套前端工程化能力，目的是在專案開發流程中進行適當的收斂，同時又通過外掛方式提供了足夠定製化的能力。

• 初始化專案：可以通過外掛方式整合集團基礎的標準服務生成初始化的標準專案模板，同時也提供基於不同業務場景的專案模板
• 開發除錯：基於外掛方式可以快速整合各類服務，例如ABTest、Proxy、Mock、PWA等等，可以幫助業務開發同學快速進行業務邏輯程式碼編寫
• 編譯配置：基於Webpack，並且內建了babel/eslint的最佳實踐
• 部署釋出：可以實現Node服務和純靜態前端的釋出

程式碼質量

ESLint

為了能在團隊內實現 JavaScript 程式碼規範的統一，在分析和思考團隊規模化應用存在的問題後，我們設計了一套完整的技術解決方案。該方案包括多場景統一的 ESLint 規則配置、程式碼整合交付檢查、自動化接入工具、執行狀況監測分析等四個模組。通過各個模組協調配合，共同解決上文提出的問題，在降低維護成本、提升執行效率的同時，也保障了程式碼規範的統一。

• 多場景統一的 JavaScript 規範：該模組是整個方案的核心，藉助 ESLint 的特性，通過分層分類的結構設計，在保證基礎規則一致性的同時，實現了對不同場景、技術選型的支撐。

• 程式碼整合交付檢查：該模組是方案落地執行的保障，將程式碼靜態檢查整合到持續交付工作流中。具體設計實現上，在保證交付質量的同時，也通過定製整合檢查工具降低了開發者的應用執行成本。

• 自動化接入和升級方案：通過命令列工具提供“一鍵”接入/升級能力，同時整合到團隊腳手架中，大大降低了工程接入和維護的成本。

• 執行狀況監測分析：通過對工具執行和程式碼整合交付檢查過程進行埋點、檢查結果收集和分析，瞭解方案的應用狀態和效果。

詳細可以檢視參考資料[5]

Hades - 移動端靜態分析

按照 Hades 的架構目標進行基礎方案選型以後，我們來看下 Hades 的整體技術框架，可以用下圖所示的四層架構表示：

下面簡述下這幾層的不同職責。

• 編譯器架構層。Clang 的諸多優勢前文已經提到，這也是 Hades 的基礎依賴。

• Hades 核心層。在編譯器架構層，我們藉助 Clang 得到了程式碼的抽象語法結構表示 AST。而 Hades 核心層的職責便是將 AST 解析成人們更容易理解的，更高層級的語義模型。

• Hades 介面封裝層。抽象出的模型，能夠像 Clang 提供豐富 AST 訪問介面那樣，為開發者提供豐富的模型訪問介面。

• 靜態分析應用。通過 Hades 介面封裝，我們無需清楚底層模型是如何生成的，在這一層我們可以製作 Lint 或者其它監控、分析工具。

不同於傳統的Clang API或者OCLint，HadesModel 是基於 AST 的更高層級語義表達，它能夠序列化為 JSON 格式並描述完整的編譯單元，這種結構化資訊使得靜態分析能更接近於開發者閱讀理解原始碼的思維習慣。

Hades 作為大眾點評移動研發的基礎設施之一，在實踐中得到了廣泛的應用，為大型 App 專案的日常維護、程式碼分析提供支援。基於 HadesModel 的靜態分析易上手，開發接入成本低，能夠理解程式碼語義，具備全域性分析能力等諸多優點。

詳細可以檢視參考資料[6]

參考資料

[1]MCI-大眾點評千人移動研發團隊怎樣做持續整合？：mp.weixin.qq.com/s/XY3u-bMgs…

[2]開源實時監控系統CAT 3.0釋出：mp.weixin.qq.com/s/9uePYJpVE…

[3]深度剖析開源分散式監控CAT：tech.meituan.com/2018/11/01/…

[4]Logan-美團點評的開源移動端基礎日誌庫：mp.weixin.qq.com/s/XM4bhncHz…

[5]ESLint 在中大型團隊的應用實踐：mp.weixin.qq.com/s/jb8yozm-p…

[6]Hades-移動端靜態分析框架：mp.weixin.qq.com/s/CwKtLnxMW…

寫在最後

這是美團點評大前端技術體系解密的上篇，主要介紹了工程化和程式碼質量相關的沉澱，當然這些僅僅基於公開資料整理而成，僅僅是整個技術體系的冰山一角。

最後，美團點評上海、北京都在大量招前端資深/專家工程師，如果有興趣近距離接觸美團點評大前端技術框架，歡迎私信給我進行內推。

推薦閱讀

解密國內BAT等大廠前端技術體系-阿里篇（長文建議收藏）

解密國內BAT等大廠前端技術體系-百度篇（長文建議收藏）

解密國內BAT等大廠前端技術體系-騰訊篇（長文建議收藏）

解密國內BAT等大廠前端技術體系-攜程篇（長文建議收藏）

『奶爸碼農』從事網際網路研發工作10+年，經歷IBM、SAP、陸金所、攜程等國內外IT公司，目前在美團負責餐飲相關大前端技術團隊，定期分享關於大前端技術、投資理財、個人成長的思考與總結。