進(jìn)入2019年，大前端技術(shù)生態(tài)似乎進(jìn)入到了一個(gè)相對(duì)穩(wěn)定的環(huán)境，React在2013年發(fā)布至今已經(jīng)6年時(shí)間了，Vue 1.0在2015年發(fā)布，至今也有4年時(shí)間了。
整個(gè)業(yè)界在前端框架不斷迭代中，也尋找到了許多突破方向，例如跨平臺(tái)中的RN、Flutter，服務(wù)端GraphQL、Serverless，前端和客戶(hù)端的融合越來(lái)越緊密，前端在Node和Electron的加持下，也擴(kuò)展了自己的版圖到服務(wù)端和桌面。
同時(shí)，隨著前端開(kāi)發(fā)越來(lái)越復(fù)雜，整個(gè)前端研發(fā)也經(jīng)歷了人工化->工具化->工程化->智能化的演變。目前各個(gè)大廠(chǎng)在工程化實(shí)踐不斷迭代，出現(xiàn)了許多Low/No Code等前端智能化解決方案，工程化實(shí)踐也深入到研發(fā)的各個(gè)環(huán)節(jié)，不斷提升前端研發(fā)的標(biāo)準(zhǔn)化能力。而且，隨著機(jī)器學(xué)習(xí)的加入，各類(lèi)UI2Code的解決方案也開(kāi)始出現(xiàn)，前端研發(fā)進(jìn)入了一個(gè)完全不同的時(shí)代。
隨著端上能力的不斷增強(qiáng)，現(xiàn)在在端上做的事情越來(lái)越多。首先，數(shù)據(jù)可視化方向，各類(lèi)圖表、地圖、3D等等數(shù)據(jù)可視化的嘗試變得越來(lái)越多。其次，伴隨著人工智能的加持，在端上的人工智能應(yīng)用也變的普及，減少了服務(wù)端的交互，提高了系統(tǒng)的實(shí)時(shí)響應(yīng)能力。最后，隨著Webassembly等技術(shù)的應(yīng)用，有可能將前端運(yùn)行能力再提升一個(gè)檔次，可以進(jìn)行更為復(fù)雜的端上計(jì)算。
為了了解當(dāng)前前端的發(fā)展趨勢(shì)，讓我們從國(guó)內(nèi)各大互聯(lián)網(wǎng)大廠(chǎng)開(kāi)始，了解他們的最新動(dòng)態(tài)和未來(lái)規(guī)劃。
第一篇先從阿里巴巴開(kāi)始。
阿里巴巴集團(tuán)一定是國(guó)內(nèi)前端技術(shù)發(fā)展的高地，其完整經(jīng)歷了PC時(shí)代、移動(dòng)時(shí)代和智能時(shí)代，具有非常繁雜的業(yè)務(wù)場(chǎng)景，同時(shí)沉淀開(kāi)源了眾多前端項(xiàng)目，因此非常值得學(xué)習(xí)借鑒。
螞蟻金服體驗(yàn)科技
技術(shù)專(zhuān)欄：zhuanlan.zhihu.com/xtech
螞蟻金服體驗(yàn)技術(shù)部，是阿里巴巴經(jīng)濟(jì)體內(nèi)，一支以用戶(hù)體驗(yàn)、大前端和創(chuàng)新產(chǎn)品為核心競(jìng)爭(zhēng)力的年輕團(tuán)隊(duì)?！改切┠甑捏w驗(yàn)技術(shù)部」開(kāi)源了 Ant Design、AntV、Egg.js、Umi 等一系列項(xiàng)目。
設(shè)計(jì)不只是好看，更關(guān)乎好用。體驗(yàn)科技就是技術(shù)與設(shè)計(jì)的融合，是服務(wù)與用戶(hù)的連接。在前端技術(shù)上，不僅僅要實(shí)現(xiàn)頁(yè)面的交互，更要通過(guò)產(chǎn)品、技術(shù)、設(shè)計(jì)的融合，實(shí)現(xiàn)好的用戶(hù)體驗(yàn)。
螞蟻金服體驗(yàn)科技提供了完整的前端解決方案：
淘系前端團(tuán)隊(duì)
技術(shù)博客：fed.taobao.org/
淘系前端團(tuán)隊(duì)是服務(wù)于淘寶、天貓、聚客寶等電商業(yè)務(wù)的前端團(tuán)隊(duì)，他們面臨國(guó)內(nèi)最復(fù)雜的電商系統(tǒng)，也需要面對(duì)大量的終端用戶(hù)。在這個(gè)團(tuán)隊(duì)中孵化了許多開(kāi)源項(xiàng)目，例如Rax-通用模板渲染引擎，飛冰-前端可視化搭建平臺(tái)，imgcook-前端智能化生成平臺(tái)等等。
餓了么大前端團(tuán)隊(duì)
技術(shù)專(zhuān)欄：zhuanlan.zhihu.com/ElemeFE
餓了么大前端團(tuán)隊(duì)是一個(gè)集前端、iOS、Android、BFF后端一起的技術(shù)研發(fā)團(tuán)隊(duì)，其最著名的是基于Vue的兩個(gè)開(kāi)源項(xiàng)目
element：基于Vue的PC端的UI組件庫(kù)
mint-ui：基于Vue的移動(dòng)端UI組件庫(kù)
同時(shí)還有各種基于Vue的封裝組件庫(kù)，例如vue-amap是一個(gè)高德地圖組件，v-charts是一個(gè)基于Vue2.0和ECharts封裝的圖表組件庫(kù)。
閑魚(yú)技術(shù)團(tuán)隊(duì)
技術(shù)博客：www.yuque.com/xytech
閑魚(yú)技術(shù)團(tuán)隊(duì)過(guò)去一年在Flutter技術(shù)方向的沉淀非常豐富，目前已經(jīng)大量采用Flutter于閑魚(yú)App中，同時(shí)開(kāi)源了若干Flutter生態(tài)相關(guān)的項(xiàng)目：
Fish Redux 是一個(gè)基于 Redux 數(shù)據(jù)管理的組裝式 flutter 應(yīng)用框架， 它特別適用于構(gòu)建中大型的復(fù)雜應(yīng)用。
FlutterBoost是一個(gè)Flutter插件，它可以輕松地為現(xiàn)有原生應(yīng)用程序提供Flutter混合集成方案。
基礎(chǔ)設(shè)施依賴(lài)于阿里云的基礎(chǔ)設(shè)施，提供Serverless、AI、IoT、云計(jì)算、安全等基礎(chǔ)能力
Serverless函數(shù)計(jì)算：阿里云提供了云函數(shù)計(jì)算能力，同時(shí)可以輔助與現(xiàn)有的BaaS能力，進(jìn)行存儲(chǔ)、數(shù)據(jù)庫(kù)、通信的能力。
CDN：CDN可以用于靜態(tài)資源的存儲(chǔ)，發(fā)放資源到用戶(hù)就近的節(jié)點(diǎn)，極大的提高用戶(hù)訪(fǎng)問(wèn)的速度體驗(yàn)。
移動(dòng)測(cè)試平臺(tái)：真機(jī)測(cè)試的云平臺(tái)，幫助解決用戶(hù)的真機(jī)兼容、性能等問(wèn)題，提升用戶(hù)體驗(yàn)。
應(yīng)用實(shí)時(shí)監(jiān)控服務(wù)ARMS：是一款應(yīng)用性能管理產(chǎn)品，包含前端監(jiān)控，應(yīng)用監(jiān)控和Prometheus監(jiān)控三大子產(chǎn)品，能幫助你實(shí)現(xiàn)全棧式的性能監(jiān)控和端到端的全鏈路追蹤診斷。
Node.js 性能平臺(tái)：是面向中大型 Node.js 應(yīng)用提供 性能監(jiān)控、安全提醒、故障排查、性能優(yōu)化 等服務(wù)的整體性解決方案。
BFF - Backend for Frontend
BFF是一種目前前后端分離的常用研發(fā)模式，通常BFF作為膠水層，解決了終端對(duì)于數(shù)據(jù)多樣性的問(wèn)題，通過(guò)對(duì)于后端微服務(wù)進(jìn)行聚合，從而提供各種定制化的數(shù)據(jù)給到終端應(yīng)用。
在BFF技術(shù)選型上，選用Node是為了技術(shù)棧的統(tǒng)一，從而可以讓前端同學(xué)從前端UI實(shí)現(xiàn)到聚合層接口實(shí)現(xiàn)都通過(guò)JavaScript完成。這樣服務(wù)端同學(xué)只需要按照領(lǐng)域設(shè)計(jì)原則暴露各個(gè)領(lǐng)域的標(biāo)準(zhǔn)化接口，其他部分前端同學(xué)可以通過(guò)靈活組合滿(mǎn)足各種頁(yè)面的數(shù)據(jù)服務(wù)需求，達(dá)到前后端的分離和研發(fā)效率提升。
BFF in Serverless
Serverless是阿里內(nèi)部一個(gè)非常重要的方向，目前阿里云已經(jīng)提供云函數(shù)的能力，然后再基于現(xiàn)有的BaaS能力（通信、用戶(hù)、存儲(chǔ)、運(yùn)維、通知），可以實(shí)現(xiàn)BFF層使用云函數(shù)來(lái)實(shí)現(xiàn)，從而大大減少了服務(wù)器資源的消耗，也極大的減少了前端開(kāi)發(fā)同學(xué)對(duì)于服務(wù)器運(yùn)維的要求。
TWA - Techless Web Apps
TWA是期望能夠?qū)崿F(xiàn)技術(shù)無(wú)感化的應(yīng)用，通過(guò)全棧研發(fā)框架，將前端客戶(hù)端代碼和服務(wù)端代碼整合在一個(gè)代碼倉(cāng)庫(kù)。通過(guò)一站式的研發(fā)運(yùn)維平臺(tái)，提供極簡(jiǎn)研發(fā)流程和自助式的運(yùn)維體驗(yàn)，讓研發(fā)更加關(guān)注業(yè)務(wù)實(shí)現(xiàn)，不用太關(guān)心“應(yīng)用”、“構(gòu)建”、“部署”、“流程”等細(xì)節(jié)。
前端應(yīng)用框架-Bigfish/Umi
Bigfish是螞蟻金服前端的開(kāi)發(fā)框架，從上圖中可以看到Bigfish是一個(gè)前端研發(fā)全流程的研發(fā)框架，涵蓋設(shè)計(jì)師（設(shè)計(jì)師工具、資產(chǎn)市場(chǎng)、文檔、培訓(xùn)）、開(kāi)發(fā)者（部署、插件市場(chǎng)、基礎(chǔ)開(kāi)源框架），同時(shí)也包含外部服務(wù)（體驗(yàn)、監(jiān)控等等）。
Umi是一個(gè)可拔插企業(yè)級(jí)的React應(yīng)用框架，它通過(guò)實(shí)現(xiàn)沉淀大量最佳實(shí)踐，極大的統(tǒng)一了React應(yīng)用框架的統(tǒng)一性，同時(shí)它也具備非常強(qiáng)的插件擴(kuò)展能力。它有幾大特點(diǎn)：
插件化：umi 的整個(gè)生命周期都是插件化的，甚至其內(nèi)部實(shí)現(xiàn)就是由大量插件組成，比如 pwa、按需加載、一鍵切換 preact、一鍵兼容 ie9 等等，都是由插件實(shí)現(xiàn)。
開(kāi)箱即用：你只需一個(gè)umi依賴(lài)就可啟動(dòng)開(kāi)發(fā)，無(wú)需安裝 react、preact、webpack、react-router、babel、jest 等等。
約定式路由：類(lèi)next.js的約定式路由，無(wú)需再維護(hù)一份冗余的路由配置，支持權(quán)限、動(dòng)態(tài)路由、嵌套路由等等。
阿里前端UI組件庫(kù)包括：
Ant Design - 前端中后臺(tái)React UI組件庫(kù)
Element - 前端中后臺(tái)Vue UI組件庫(kù)
AntV - 數(shù)據(jù)可視化組件庫(kù)
...
Ant Design
Ant Design 服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系，基于確定和自然的設(shè)計(jì)價(jià)值觀(guān)上的模塊化解決方案，讓設(shè)計(jì)者和開(kāi)發(fā)者專(zhuān)注于更好的用戶(hù)體驗(yàn)。
Ant Design不僅僅是一套組件庫(kù)，而且還是一種設(shè)計(jì)語(yǔ)言，基于『確定』和『自然』的設(shè)計(jì)價(jià)值觀(guān)，通過(guò)模塊化的解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專(zhuān)注于更好的用戶(hù)體驗(yàn)。
Ant Design基于React框架，提供了總共63個(gè)UI組件，涵蓋各種基本交互元素，例如按鈕、布局、數(shù)據(jù)錄入、數(shù)據(jù)展示等等。
Element
Element是餓了么團(tuán)隊(duì)基于Vue打造的一套UI組件庫(kù)，基于一致、反饋、效率、可控的設(shè)計(jì)原則。和Ant Design類(lèi)似，它也提供了豐富的組件，并且提供了樣式主題配置化以及國(guó)際化等功能。
Element和Ant Design幾乎已經(jīng)成為中后臺(tái)前端的標(biāo)準(zhǔn)UI組件庫(kù)，往往根據(jù)不同的技術(shù)棧配合使用。Ant Design往往配合React進(jìn)行使用，而Element則會(huì)配合Vue進(jìn)行使用。
AntV
AntV 3.0 已全新升級(jí)，主要包含 G2、G6、F2、L7 以及一套完整的圖表使用和設(shè)計(jì)規(guī)范。得益于豐富的業(yè)務(wù)場(chǎng)景和用戶(hù)需求挑戰(zhàn)，AntV 經(jīng)歷多年積累與不斷打磨，已支撐阿里集團(tuán)內(nèi)外 6000+ 業(yè)務(wù)系統(tǒng)。
AntV作為數(shù)據(jù)可視化的組件庫(kù)，從簡(jiǎn)單的線(xiàn)圖到流程圖，再到地理空間圖應(yīng)有盡有。下面給大家看幾個(gè)例子：
移動(dòng)端跨平臺(tái)、動(dòng)態(tài)化始終是一個(gè)永恒不變的挑戰(zhàn)，阿里巴巴作為電商平臺(tái)也擁有眾多App，因此其在跨平臺(tái)方面有非常豐富的嘗試。首先就是基于Vue的Weex跨端解決方案，這是一個(gè)完全對(duì)標(biāo)React Native的方案，在阿里淘系內(nèi)部得到了大量實(shí)踐。最近一年，閑魚(yú)技術(shù)團(tuán)隊(duì)大量采用Flutter，同時(shí)也沉淀了大量實(shí)踐，開(kāi)源了不少Flutter相關(guān)項(xiàng)目。
Weex
和RN的設(shè)計(jì)理念非常類(lèi)似，通過(guò)Vue進(jìn)行UI代碼的編寫(xiě)，然后通過(guò)Virtual Dom轉(zhuǎn)換成原生組件進(jìn)行渲染，從而達(dá)到Web開(kāi)發(fā)的體驗(yàn)和原生的渲染體驗(yàn)，而且也實(shí)現(xiàn)了跨iOS、Android、Web三端，極大的提升了研發(fā)效率。
但是，Weex一度外界認(rèn)為被阿里廢棄，開(kāi)源社區(qū)相對(duì)RN也不夠活躍，所以讓很多人望而卻步。不過(guò)，最近Weex被Apache社區(qū)接納，似乎重新煥發(fā)了青春。
Flutter
作為過(guò)去一年的當(dāng)紅炸子雞，F(xiàn)lutter的出現(xiàn)讓跨平臺(tái)的技術(shù)方案又出現(xiàn)一個(gè)完全不一樣的思路。
Flutter完全摒棄了iOS/Android的UI層，基于C/C++自己實(shí)現(xiàn)了一套UI渲染引擎，在引擎之上，基于Dart語(yǔ)言實(shí)現(xiàn)了完整的UI框架。由于Flutter自己完全實(shí)現(xiàn)了一整套UI框架和底層渲染引擎，所以開(kāi)發(fā)者基于這套框架可以完全實(shí)現(xiàn)跨端能力，并且也能獲得非常良好的渲染體驗(yàn)。
閑魚(yú)團(tuán)隊(duì)在其App中大量實(shí)踐Flutter并且開(kāi)源了Flutter Boost、Fish Redux等項(xiàng)目。
Flutter Boost
FlutterBoost是一個(gè)Flutter插件，它可以輕松地為現(xiàn)有原生應(yīng)用程序提供Flutter混合集成方案。FlutterBoost的理念是將Flutter像Webview那樣來(lái)使用。在現(xiàn)有應(yīng)用程序中同時(shí)管理Native頁(yè)面和Flutter頁(yè)面并非易事。FlutterBoost幫你處理頁(yè)面的映射和跳轉(zhuǎn)，你只需關(guān)心頁(yè)面的名字和參數(shù)即可（通?？梢允荱RL）。
Flutter Redux
Fish Redux 通過(guò) Redux 做集中化的可觀(guān)察的數(shù)據(jù)管理。然不僅于此，對(duì)于傳統(tǒng) Redux 在使用層面上的缺點(diǎn)，在面向端側(cè) flutter 頁(yè)面緯度開(kāi)發(fā)的場(chǎng)景中，我們通過(guò)更好更高的抽象，做了改良。
State、Action、Reducer、Store、Middleware 以上概念和社區(qū)的 ReduxJS 是完全一致的。我們將原汁原味地保留所有的 Redux 的優(yōu)勢(shì)。
阿里前端技術(shù)委員會(huì)主席圓心曾經(jīng)分享過(guò)前端過(guò)去的發(fā)展歷程，2016年后前端進(jìn)入到中后臺(tái)重塑的時(shí)代，從原有的Pro Code逐步演進(jìn)到Low/No Code。玉伯曾經(jīng)也展望過(guò)前端未來(lái)發(fā)展的趨勢(shì)：人工化->工具化->工程化->智能化。隨著人工智能技術(shù)的加持，前端進(jìn)入了一個(gè)全新的時(shí)代。
首先，聊聊阿里在前端工程化的發(fā)展。隨著前端的系統(tǒng)架構(gòu)越來(lái)越復(fù)雜，技術(shù)棧也越來(lái)越多樣，對(duì)于大型研發(fā)團(tuán)隊(duì)而言，工程化可以在技術(shù)棧標(biāo)準(zhǔn)化、研發(fā)效率、質(zhì)量提升等方面起到極大的作用。
WebIDE
所謂WebIDE就是只需要一個(gè)瀏覽器，就能夠讓你編寫(xiě)代碼、運(yùn)行代碼，甚至發(fā)布代碼。
WebIDE有幾個(gè)好處：
無(wú)需本地安裝IDE
無(wú)需關(guān)注本地環(huán)境，例如環(huán)境變量、npm設(shè)置等等
多人協(xié)同編輯，結(jié)對(duì)編程變得更加有趣
可以打通現(xiàn)有工程化的能力，深入集成腳手架、工程模板、可視化組件編程、編譯、打包、部署等等
云構(gòu)建
本地構(gòu)建存在許多問(wèn)題，例如依賴(lài)本地機(jī)器性能效率低下、構(gòu)建工具不統(tǒng)一、本地環(huán)境不統(tǒng)一等等。因此，阿里基于Docker虛擬機(jī)搭建前端系統(tǒng)構(gòu)建環(huán)境，解決了環(huán)境不一致和構(gòu)建性能低的問(wèn)題，同時(shí)還提供了完備的灰度管理、實(shí)時(shí)日志的能力。
在阿里內(nèi)部，云構(gòu)建目前日活躍用戶(hù)有1500+，日構(gòu)建量5w+，物理機(jī)器20+，使用量還是非常大的，而且覆蓋研發(fā)團(tuán)隊(duì)也非常廣泛。
智能化 - imgcook
imgcook可以實(shí)現(xiàn)從設(shè)計(jì)(design)到代碼(code)的轉(zhuǎn)換，目前可以支持sketch、psd和JPG文件。全鏈路采用計(jì)算機(jī)視覺(jué)、深度學(xué)習(xí)等智能化手段依次去除對(duì)設(shè)計(jì)稿的約束，通過(guò)對(duì)Font字體識(shí)別、Iconfont圖標(biāo)識(shí)別、Layout布局識(shí)別，智能生成代碼，保證代碼和視覺(jué)的高度還原。同時(shí)支持多種DSL代碼生成，支持小程序、H5、Rax、Weex等框架。
Ant Design Next
基于Ant Design的設(shè)計(jì)規(guī)范和組件庫(kù)，阿里對(duì)中后臺(tái)前端研發(fā)實(shí)現(xiàn)了一套low code的方式。
可視化、低代碼：通過(guò)可視化拖拽界面生成頁(yè)面代碼，自動(dòng)生成css文件完成布局，并且通過(guò)封裝實(shí)現(xiàn)數(shù)據(jù)綁定、發(fā)送請(qǐng)求等操作，簡(jiǎn)化JS的編寫(xiě)
提高效率：基于REST API接口定義，自動(dòng)生成CRUD頁(yè)面，完成80%業(yè)務(wù)場(chǎng)景。
提升體驗(yàn)：通過(guò)設(shè)計(jì)規(guī)范提高頁(yè)面布局規(guī)范，同時(shí)減少頁(yè)面組件渲染提升頁(yè)面性能，通過(guò)也會(huì)對(duì)構(gòu)建進(jìn)行大量?jī)?yōu)化，默認(rèn)沉淀大量最佳實(shí)踐。
阿里作為國(guó)內(nèi)最大的互聯(lián)網(wǎng)公司，基于其龐大的業(yè)務(wù)孵化出了眾多技術(shù)框架，再加上其對(duì)開(kāi)源社區(qū)的開(kāi)放性，因此可以通過(guò)這篇文章一窺阿里的前端技術(shù)體系。當(dāng)然，文章的內(nèi)容都是基于公開(kāi)信息整理而成，內(nèi)部的眾多技術(shù)框架依舊不得而知，希望有相關(guān)信息的同學(xué)可以多多交流。
這是大廠(chǎng)前端技術(shù)體系解密第一篇，后續(xù)還會(huì)有其他大廠(chǎng)的內(nèi)容，有興趣的同學(xué)可以關(guān)注本公眾號(hào)【奶爸碼農(nóng)】第一時(shí)間獲得信息。
『奶爸碼農(nóng)』從事互聯(lián)網(wǎng)研發(fā)工作10+年，經(jīng)歷IBM、SAP、陸金所、攜程等國(guó)內(nèi)外IT公司，目前在美團(tuán)負(fù)責(zé)餐飲相關(guān)大前端技術(shù)團(tuán)隊(duì)，定期分享關(guān)于大前端技術(shù)、投資理財(cái)、個(gè)人成長(zhǎng)的思考與總結(jié)。
聯(lián)系客服
