進入2019年，大前端技術生態似乎進入到了一個相對穩定的環境，React在2013年釋出至今已經6年時間了，Vue 1.0在2015年釋出，至今也有4年時間了。
整個業界在前端框架不斷迭代中，也尋找到了許多突破方向，例如跨平臺中的RN、Flutter，服務端GraphQL、Serverless，前端和客戶端的融合越來越緊密，前端在Node和Electron的加持下，也擴充套件了自己的版圖到服務端和桌面。
同時，隨著前端開發越來越複雜，整個前端研發也經歷了人工化->工具化->工程化->智慧化的演變。目前各個大廠在工程化實踐不斷迭代，出現了許多Low/No Code等前端智慧化解決方案，工程化實踐也深入到研發的各個環節，不斷提升前端研發的標準化能力。而且，隨著機器學習的加入，各類UI2Code的解決方案也開始出現，前端研發進入了一個完全不同的時代。
隨著端上能力的不斷增強，現在在端上做的事情越來越多。首先，資料視覺化方向，各類圖表、地圖、3D等等資料視覺化的嘗試變得越來越多。其次，伴隨著人工智慧的加持，在端上的人工智慧應用也變的普及，減少了服務端的互動，提高了系統的實時響應能力。最後，隨著Webassembly等技術的應用，有可能將前端執行能力再提升一個檔次，可以進行更為複雜的端上計算。
為了瞭解當前前端的發展趨勢，讓我們從國內各大網際網路大廠開始，瞭解他們的最新動態和未來規劃。
第一篇先從阿里巴巴開始。
1 阿里巴巴前端團隊介紹
阿里巴巴集團一定是國內前端技術發展的高地，其完整經歷了PC時代、移動時代和智慧時代，具有非常繁雜的業務場景，同時沉澱開源了眾多前端專案，因此非常值得學習借鑑。
螞蟻金服體驗科技
螞蟻金服體驗技術部，是阿里巴巴經濟體內，一支以使用者體驗、大前端和創新產品為核心競爭力的年輕團隊。「那些年的體驗技術部」開源了 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完成。這樣服務端同學只需要按照領域設計原則暴露各個領域的標準化介面，其他部分前端同學可以通過靈活組合滿足各種頁面的資料服務需求，達到前後端的分離和研發效率提升。
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 已全新升級，主要包含 G2、G6、F2、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設定等等
-
多人協同編輯，結對程式設計變得更加有趣
-
可以打通現有工程化的能力，深入整合腳手架、工程模板、視覺化元件程式設計、編譯、打包、部署等等
雲構建
本地構建存在許多問題，例如依賴本地機器效能效率低下、構建工具不統一、本地環境不統一等等。因此，阿里基於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%業務場景。
-
提升體驗：通過設計規範提高頁面佈局規範，同時減少頁面元件渲染提升頁面效能，通過也會對構建進行大量優化，預設沉澱大量最佳實踐。
8 總結
阿里作為國內最大的網際網路公司，基於其龐大的業務孵化出了眾多技術框架，再加上其對開源社群的開放性，因此可以通過這篇文章一窺阿里的前端技術體系。當然，文章的內容都是基於公開資訊整理而成，內部的眾多技術框架依舊不得而知，希望有相關資訊的同學可以多多交流。
這是大廠前端技術體系解密第一篇，後續還會有其他大廠的內容，有興趣的同學可以關注本公眾號【奶爸碼農】第一時間獲得資訊。
『奶爸碼農』從事網際網路研發工作10+年，經歷IBM、SAP、陸金所、攜程等國內外IT公司，目前在美團負責餐飲相關大前端技術團隊，定期分享關於大前端技術、投資理財、個人成長的思考與總結。