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

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

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

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

隨着端上能力的不斷加強，如今在端上作的事情愈來愈多。首先，數據可視化方向，各種圖表、地圖、3D等等數據可視化的嘗試變得愈來愈多。其次，伴隨着人工智能的加持，在端上的人工智能應用也變的普及，減小了服務端的交互，提升了系統的實時響應能力。最後，隨着Webassembly等技術的應用，有可能將前端運行能力再提高一個檔次，能夠進行更爲複雜的端上計算。

爲了瞭解當前前端的發展趨勢，讓咱們從國內各大互聯網大廠開始，瞭解他們的最新動態和將來規劃。

第一篇先從阿里巴巴開始。

1 阿里巴巴前端團隊介紹

阿里巴巴集團必定是國內前端技術發展的高地，其完整經歷了PC時代、移動時代和智能時代，具備很是繁雜的業務場景，同時沉澱開源了衆多前端項目，所以很是值得學習借鑑。

螞蟻金服體驗科技

技術專欄：zhuanlan.zhihu.com/xtech

螞蟻金服體驗技術部，是阿里巴巴經濟體內，一支以用戶體驗、大前端和創新產品爲核心競爭力的年輕團隊。「那些年的體驗技術部」開源了 Ant Design、AntV、Egg.js、Umi 等一系列項目。

設計不僅是好看，更關乎好用。體驗科技就是技術與設計的融合，是服務與用戶的鏈接。在前端技術上，不只僅要實現頁面的交互，更要經過產品、技術、設計的融合，實現好的用戶體驗。

螞蟻金服體驗科技提供了完整的前端解決方案：

淘系前端團隊

技術博客：fed.taobao.org/

淘系前端團隊是服務於淘寶、天貓、聚客寶等電商業務的前端團隊，他們面臨國內最複雜的電商系統，也須要面對大量的終端用戶。在這個團隊中孵化了許多開源項目，例如Rax-通用模板渲染引擎，飛冰-前端可視化搭建平臺，imgcook-前端智能化生成平臺等等。

餓了麼大前端團隊

技術專欄：zhuanlan.zhihu.com/ElemeFE

餓了麼大前端團隊是一個集前端、iOS、Android、BFF後端一塊兒的技術研發團隊，其最著名的是基於Vue的兩個開源項目

• element：基於Vue的PC端的UI組件庫

• mint-ui：基於Vue的移動端UI組件庫

同時還有各類基於Vue的封裝組件庫，例如vue-amap是一個高德地圖組件，v-charts是一個基於Vue2.0和ECharts封裝的圖表組件庫。

閒魚技術團隊

技術博客：www.yuque.com/xytech

閒魚技術團隊過去一年在Flutter技術方向的沉澱很是豐富，目前已經大量採用Flutter於閒魚App中，同時開源了若干Flutter生態相關的項目：

• Fish Redux 是一個基於 Redux 數據管理的組裝式 flutter 應用框架， 它特別適用於構建中大型的複雜應用。

• FlutterBoost是一個Flutter插件，它能夠輕鬆地爲現有原生應用程序提供Flutter混合集成方案。

2 基礎設施

基礎設施依賴於阿里雲的基礎設施，提供Serverless、AI、IoT、雲計算、安全等基礎能力

Serverless函數計算：阿里雲提供了雲函數計算能力，同時能夠輔助與現有的BaaS能力，進行存儲、數據庫、通訊的能力。

CDN：CDN能夠用於靜態資源的存儲，發放資源到用戶就近的節點，極大的提升用戶訪問的速度體驗。

移動測試平臺：真機測試的雲平臺，幫助解決用戶的真機兼容、性能等問題，提高用戶體驗。

應用實時監控服務ARMS：是一款應用性能管理產品，包含前端監控，應用監控和Prometheus監控三大子產品，能幫助你實現全棧式的性能監控和端到端的全鏈路追蹤診斷。

Node.js 性能平臺：是面向中大型 Node.js 應用提供 性能監控、安全提醒、故障排查、性能優化 等服務的總體性解決方案。

3 前端服務層框架

BFF - Backend for Frontend

BFF是一種目前先後端分離的經常使用研發模式，一般BFF做爲膠水層，解決了終端對於數據多樣性的問題，經過對於後端微服務進行聚合，從而提供各類定製化的數據給到終端應用。

在BFF技術選型上，選用Node是爲了技術棧的統一，從而可讓前端同窗從前端UI實現到聚合層接口實現都經過JavaScript完成。這樣服務端同窗只須要按照領域設計原則暴露各個領域的標準化接口，其餘部分前端同窗能夠經過靈活組合知足各類頁面的數據服務需求，達到先後端的分離和研發效率提高。

前端服務層基於Node.js和Koa實現了Egg框架，Egg.js 爲企業級框架和應用而生，由 Egg.js 孕育出更多上層框架，幫助開發團隊和開發人員下降開發和維護成本。Egg提供了一個完善靈活的插件機制，而且奉行約定優於配置。在Egg上層，各個業務團隊又各自封裝了不一樣的服務層框架，例如螞蟻Chair、淘寶Midway、UC Nut等等。

BFF in Serverless

Serverless是阿里內部一個很是重要的方向，目前阿里雲已經提供雲函數的能力，而後再基於現有的BaaS能力（通訊、用戶、存儲、運維、通知），能夠實現BFF層使用雲函數來實現，從而大大減小了服務器資源的消耗，也極大的減小了前端開發同窗對於服務器運維的要求。

4 前端應用層框架

TWA - Techless Web Apps

TWA是指望可以實現技術無感化的應用，經過全棧研發框架，將前端客戶端代碼和服務端代碼整合在一個代碼倉庫。經過一站式的研發運維平臺，提供極簡研發流程和自助式的運維體驗，讓研發更加關注業務實現，不用太關心「應用」、「構建」、「部署」、「流程」等細節。

前端應用框架-Bigfish/Umi

Bigfish是螞蟻金服前端的開發框架，從上圖中能夠看到Bigfish是一個前端研發全流程的研發框架，涵蓋設計師（設計師工具、資產市場、文檔、培訓）、開發者（部署、插件市場、基礎開源框架），同時也包含外部服務（體驗、監控等等）。

Umi是一個可拔插企業級的React應用框架，它經過實現沉澱大量最佳實踐，極大的統一了React應用框架的統一性，同時它也具有很是強的插件擴展能力。它有幾大特色：

• 插件化：umi 的整個生命週期都是插件化的，甚至其內部實現就是由大量插件組成，好比 pwa、按需加載、一鍵切換 preact、一鍵兼容 ie9 等等，都是由插件實現。

• 開箱即用：你只需一個umi依賴就可啓動開發，無需安裝 react、preact、webpack、react-router、babel、jest 等等。

• 約定式路由：類next.js的約定式路由，無需再維護一份冗餘的路由配置，支持權限、動態路由、嵌套路由等等。

5 前端UI組件庫

阿里前端UI組件庫包括：

• Ant Design - 前端中後臺React UI組件庫

• Element - 前端中後臺Vue UI組件庫

• AntV - 數據可視化組件庫

• ...

Ant Design

Ant Design 服務於企業級產品的設計體系，基於肯定和天然的設計價值觀上的模塊化解決方案，讓設計者和開發者專一於更好的用戶體驗。

Ant Design不只僅是一套組件庫，並且仍是一種設計語言，基於『肯定』和『天然』的設計價值觀，經過模塊化的解決方案，下降冗餘的生產成本，讓設計者專一於更好的用戶體驗。

Ant Design基於React框架，提供了總共63個UI組件，涵蓋各類基本交互元素，例如按鈕、佈局、數據錄入、數據展現等等。

Element

Element是餓了麼團隊基於Vue打造的一套UI組件庫，基於一致、反饋、效率、可控的設計原則。和Ant Design相似，它也提供了豐富的組件，而且提供了樣式主題配置化以及國際化等功能。

Element和Ant Design幾乎已經成爲中後臺前端的標準UI組件庫，每每根據不一樣的技術棧配合使用。Ant Design每每配合React進行使用，而Element則會配合Vue進行使用。

AntV

AntV 3.0 已全新升級，主要包含 G二、G六、F二、L7 以及一套完整的圖表使用和設計規範。得益於豐富的業務場景和用戶需求挑戰，AntV 經歷多年積累與不斷打磨，已支撐阿里集團內外 6000+ 業務系統。

AntV做爲數據可視化的組件庫，從簡單的線圖到流程圖，再到地理空間圖應有盡有。下面給你們看幾個例子：

6 跨平臺

移動端跨平臺、動態化始終是一個永恆不變的挑戰，阿里巴巴做爲電商平臺也擁有衆多App，所以其在跨平臺方面有很是豐富的嘗試。首先就是基於Vue的Weex跨端解決方案，這是一個徹底對標React Native的方案，在阿里淘系內部獲得了大量實踐。最近一年，閒魚技術團隊大量採用Flutter，同時也沉澱了大量實踐，開源了很多Flutter相關項目。

Weex

和RN的設計理念很是相似，經過Vue進行UI代碼的編寫，而後經過Virtual Dom轉換成原生組件進行渲染，從而達到Web開發的體驗和原生的渲染體驗，並且也實現了跨iOS、Android、Web三端，極大的提高了研發效率。

可是，Weex一度外界認爲被阿里廢棄，開源社區相對RN也不夠活躍，因此讓不少人望而卻步。不過，最近Weex被Apache社區接納，彷佛從新煥發了青春。

Flutter

做爲過去一年的當紅炸子雞，Flutter的出現讓跨平臺的技術方案又出現一個徹底不同的思路。

Flutter徹底摒棄了iOS/Android的UI層，基於C/C++本身實現了一套UI渲染引擎，在引擎之上，基於Dart語言實現了完整的UI框架。因爲Flutter本身徹底實現了一整套UI框架和底層渲染引擎，因此開發者基於這套框架能夠徹底實現跨端能力，而且也能得到很是良好的渲染體驗。

閒魚團隊在其App中大量實踐Flutter而且開源了Flutter Boost、Fish Redux等項目。

Flutter Boost

FlutterBoost是一個Flutter插件，它能夠輕鬆地爲現有原生應用程序提供Flutter混合集成方案。FlutterBoost的理念是將Flutter像Webview那樣來使用。在現有應用程序中同時管理Native頁面和Flutter頁面並不是易事。FlutterBoost幫你處理頁面的映射和跳轉，你只需關心頁面的名字和參數便可（一般能夠是URL）。

Flutter Redux

Fish Redux 經過 Redux 作集中化的可觀察的數據管理。然不只於此，對於傳統 Redux 在使用層面上的缺點，在面向端側 flutter 頁面緯度開發的場景中，咱們經過更好更高的抽象，作了改良。

State、Action、Reducer、Store、Middleware 以上概念和社區的 ReduxJS 是徹底一致的。咱們將原汁原味地保留全部的 Redux 的優點。

7 工程化智能化

阿里前端技術委員會主席圓心曾經分享過前端過去的發展歷程，2016年後前端進入到中後臺重塑的時代，從原有的Pro Code逐步演進到Low/No Code。玉伯曾經也展望過前端將來發展的趨勢：人工化->工具化->工程化->智能化。隨着人工智能技術的加持，前端進入了一個全新的時代。

首先，聊聊阿里在前端工程化的發展。隨着前端的系統架構愈來愈複雜，技術棧也愈來愈多樣，對於大型研發團隊而言，工程化能夠在技術棧標準化、研發效率、質量提高等方面起到極大的做用。

WebIDE

所謂WebIDE就是隻須要一個瀏覽器，就可以讓你編寫代碼、運行代碼，甚至發佈代碼。

WebIDE有幾個好處：

• 無需本地安裝IDE

• 無需關注本地環境，例如環境變量、npm設置等等

• 多人協同編輯，結對編程變得更加有趣

• 能夠打通現有工程化的能力，深刻集成腳手架、工程模板、可視化組件編程、編譯、打包、部署等等

雲構建

本地構建存在許多問題，例如依賴本地機器性能效率低下、構建工具不統1、本地環境不統一等等。所以，阿里基於Docker虛擬機搭建前端系統構建環境，解決了環境不一致和構建性能低的問題，同時還提供了完備的灰度管理、實時日誌的能力。

在阿里內部，雲構建目前日活躍用戶有1500+，日構建量5w+，物理機器20+，使用量仍是很是大的，並且覆蓋研發團隊也很是普遍。

智能化 - imgcook

imgcook能夠實現從設計(design)到代碼(code)的轉換，目前能夠支持sketch、psd和JPG文件。全鏈路採用計算機視覺、深度學習等智能化手段依次去除對設計稿的約束，經過對Font字體識別、Iconfont圖標識別、Layout佈局識別，智能生成代碼，保證代碼和視覺的高度還原。同時支持多種DSL代碼生成，支持小程序、H五、Rax、Weex等框架。

Ant Design Next

基於Ant Design的設計規範和組件庫，阿里對中後臺前端研發實現了一套low code的方式。

• 可視化、低代碼：經過可視化拖拽界面生成頁面代碼，自動生成css文件完成佈局，而且經過封裝實現數據綁定、發送請求等操做，簡化JS的編寫

• 提升效率：基於REST API接口定義，自動生成CRUD頁面，完成80%業務場景。

• 提高體驗：經過設計規範提升頁面佈局規範，同時減小頁面組件渲染提高頁面性能，經過也會對構建進行大量優化，默認沉澱大量最佳實踐。

8 總結

阿里做爲國內最大的互聯網公司，基於其龐大的業務孵化出了衆多技術框架，再加上其對開源社區的開放性，所以能夠經過這篇文章一窺阿里的前端技術體系。固然，文章的內容都是基於公開信息整理而成，內部的衆多技術框架依舊不得而知，但願有相關信息的同窗能夠多多交流。

這是大廠前端技術體系解密第一篇，後續還會有其餘大廠的內容，有興趣的同窗能夠關注本公衆號【奶爸碼農】第一時間得到信息。

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