進入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完成。這樣服務端同學只需要按照領域設計原則暴露各個領域的標准化接口，其他部分前端同學可以通過靈活組合滿足各種頁面的數據服務需求，達到前后端的分離和研發效率提升。
前端服務層基於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 已全新升級，主要包含 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公司，目前在美團負責餐飲相關大前端技術團隊，定期分享關於大前端技術、投資理財、個人成長的思考與總結。