解密阿里巴巴大廠裡的web前端技術體系，技術不斷迭代，我們如何突破？

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

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

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

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

為了瞭解當前前端的發展趨勢，讓我們從國內各大網際網路大廠開始，瞭解他們的最新動態和未來規劃。

阿里巴巴前端團隊介紹

阿里巴巴集團一定是國內前端技術發展的高地，其完整經歷了 PC 時代、移動時代和智慧時代，具有非常繁雜的業務場景，同時沉澱開源了眾多前端專案，因此非常值得學習借鑑。

螞蟻金服體驗科技

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

設計不只是好看，更關乎好用。體驗科技就是技術與設計的融合，是服務與使用者的連線。在前端技術上，不僅僅要實現頁面的互動，更要透過產品、技術、設計的融合，實現好的使用者體驗。

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

淘系前端團隊

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

餓了麼大前端團隊

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

• element：基於 Vue 的 PC 端的 UI 元件庫。
• mint-ui：基於 Vue 的移動端 UI 元件庫。

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

閒魚技術團隊

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

• Fish Redux 是一個基於 Redux 資料管理的組裝式 flutter 應用框架， 它特別適用於構建中大型的複雜應用。
• FlutterBoost 是一個 Flutter 外掛，它可以輕鬆地為現有原生應用程式提供 Flutter 混合整合方案。

基礎設施

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

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

CDN：CDN 可以用於靜態資源的儲存，發放資源到使用者就近的節點，極大地提高使用者訪問的速度體驗。

移動測試平臺：真機測試的雲平臺，幫助解決使用者的真機相容、效能等問題，提升使用者體驗。

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

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

前端服務層框架  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 層使用雲函式來實現，從而大大減少了伺服器資源的消耗，也極大地減少了前端開發同學對於伺服器運維的要求。

前端應用層框架 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 的約定式路由，無需再維護一份冗餘的路由配置，支援許可權、動態路由、巢狀路由等等。

前端 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 已全新升級，主要包含 G2、G6、F2、L7 以及一套完整的圖表使用和設計規範。得益於豐富的業務場景和使用者需求挑戰，AntV 經歷多年積累與不斷打磨，已支撐阿里集團內外 6000+ 業務系統。

AntV 作為資料視覺化的元件庫，從簡單的線圖到流程圖，再到地理空間圖應有盡有。下面給大家看幾個例子：

跨平臺

移動端跨平臺、動態化始終是一個永恆不變的挑戰，阿里巴巴作為電商平臺也擁有眾多 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 的優勢。

工程化智慧化

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

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

如果對程式設計師感興趣的，想學習web前端開發的朋友，可以加web前端學習秋秋裙767，web前端中間的數字是273，web前端最後是102 。7年全棧工程師，根據這些年從事開發經驗，整理了一份最適合2019年學習的web前端乾貨，web前端的大型網際網路技術教學影片，還有一份前端零基礎教程免費分享給大家。有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，歡迎大家加入，這裡是前端學習者的集中地

WebIDE

所謂 WebIDE 就是隻需要一個瀏覽器，就能夠讓你編寫程式碼、執行程式碼，甚至釋出程式碼。

WebIDE 有幾個好處：

• 無需本地安裝 IDE。
• 無需關注本地環境，例如環境變數、npm 設定等等。
• 多人協同編輯，結對程式設計變得更加有趣。
• 可以打通現有工程化的能力，深入整合腳手架、工程模板、視覺化元件程式設計、編譯、打包、部署等等。

雲構建

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

在阿里內部，雲構建目前日活躍使用者有 1500+，日構建量 5w+，物理機器 20+，使用量還是非常大的，而且覆蓋研發團隊也非常廣泛。

智慧化 - imgcook

imgcook 可以實現從設計 (design) 到程式碼 (code) 的轉換，目前可以支援 sketch、psd 和 JPG 檔案。全鏈路採用計算機視覺、深度學習等智慧化手段依次去除對設計稿的約束，透過對 Font 字型識別、Iconfont 圖示識別、Layout 佈局識別，智慧生成程式碼，保證程式碼和視覺的高度還原。同時支援多種 DSL 程式碼生成，支援小程式、H5、Rax、Weex 等框架。

Ant Design Next

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

• 視覺化、低程式碼：透過視覺化拖拽介面生成頁面程式碼，自動生成 css 檔案完成佈局，並且透過封裝實現資料繫結、傳送請求等操作，簡化 JS 的編寫。
• 提高效率：基於 REST API 介面定義，自動生成 CRUD 頁面，完成 80% 業務場景。
• 提升體驗：透過設計規範提高頁面佈局規範，同時減少頁面元件渲染提升頁面效能，透過也會對構建進行大量最佳化，預設沉澱大量最佳實踐。

總 結

阿里作為國內最大的網際網路公司，基於其龐大的業務孵化出了眾多技術框架，再加上其對開源社群的開放性，因此可以透過這篇文章一窺阿里的前端技術體系。當然，文章的內容都是基於公開資訊整理而成，內部的眾多技術框架依舊不得而知，希望透過本篇文章大家都能對自己的技術如何提升有所思考，共勉！