引言
進入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系統，聚合支付收單，供應鏈，金融貸款
大前端技術全景
美團點評在多業務、多容器、多端上都有非常豐富的業務場景，於是在大前端領域沉淀了眾多的解決方案和框架。上圖是根據現有公開資料整理而成的技術全景圖，大體上能夠體現在大前端方面的積累，當然這可能僅僅是公司現有能力的冰山一角。
在技術推廣和宣傳方面，美團點評也是不遺余力，目前有幾個很好的途徑可以了解：
后面我會就各個部分進行展開的介紹，文末會有福利附上大量參考資料。
工程化
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…
寫在最后
這是美團點評大前端技術體系解密的上篇，主要介紹了工程化和代碼質量相關的沉淀，當然這些僅僅基於公開資料整理而成，僅僅是整個技術體系的冰山一角。
最后，美團點評上海、北京都在大量招前端資深/專家工程師，如果有興趣近距離接觸美團點評大前端技術框架，歡迎私信給我進行內推。
推薦閱讀
『奶爸碼農』從事互聯網研發工作10+年，經歷IBM、SAP、陸金所、攜程等國內外IT公司，目前在美團負責餐飲相關大前端技術團隊，定期分享關於大前端技術、投資理財、個人成長的思考與總結。