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

1 引言

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

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

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

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

上一篇已經詳盡介紹了阿里巴巴集團總體技術體系涵蓋：基礎設施、服務層、應用層、UI組件層、跨平臺、工程化、智能化，能夠看到許多比較前沿的探索，對於想要了解前端發展趨勢的同窗很是有幫助。建議沒有看過的同窗先看阿里篇。

這一篇從百度講起。

2 百度團隊介紹

百度進入2019年業務上就一直精神萎頓，團隊、組織架構上也不斷調整，從今年股價走勢也能看出發展的確不順。市值上，也連續被美團、京東超越，自此江湖上再也沒有BAT，只剩下AT了。

可是，百度做爲國內老牌互聯網公司，尤爲是經歷多年搜索大數據量的歷練，百度是國內工程師文化最爲濃厚的一家公司，被譽爲國內互聯網的黃埔軍校。

所以，業務/市值上雖然已經沒法和阿里巴巴、騰訊相提並論，但技術體系依舊仍是國內頂尖的水平，下圖是百度前端技術體系一覽。

下面大致介紹一下百度前端相關的技術團隊(有公開信息的)

百度FEX

fex.baidu.com/

FEX名稱的來源是FE表明前端（front-end），X表明了每一個人都能獨當一面，不只全部事都瞭解一些，並且還有一個專長。就像X戰警同樣，每一個人都有本身獨特的能力，可是做爲團隊能夠一塊兒把事情作得更好。FEX 原屬於「Web 前端研發部」，如今核心成員都在百度雲，致力於將前端技術作成技術產品。

FEX 致力於針對百度的各產品線在 Web複雜應用，全端應用，全端數據監控及評估和前端工程優化等方面提高開發效率及頁面體驗，是百度內部最具影響力的前端團隊。

FEX 是百度最先的開源實踐者，前後推出了 Tangram、UEditor、FIS、GMU、Chassis、KityMinder 等庫和工具，如今主要產品有 aipage、sugar 和 amis。

百度EFE

efe.baidu.com/

百度EFE（Excellent FrontEnd）技術體系，前身是ECOM前端團隊，後通過技術的發展，逐漸造成一套完善的前端技術體系。

EFE技術體系現由多個遵循該技術體系的前端團隊所組成。E(Excellent)表明咱們追求卓越的技術態度。

EFE團隊有很是多的開源項目，最著名的當屬可視化圖表庫ECharts，在百度內部也是一個很是有影響力的團隊。

百度EUX

eux.baidu.com/

百度企業產品用戶體驗中心，網站主頁上披露的信息很少，顧名思義應該是負責百度企業產品的交互、視覺、前端，從團隊照片來看小姐姐比例很高哦。

百度UXC

sux.baidu.com/

百度用戶體驗中心，於2016年5月17日成立，由原先的移動用戶體驗部（MUX）、搜索用戶體驗部（SUX）、糯米設計團隊、鳳巢設計團隊、Hao123設計團隊等在行業內具備影響力的組織合併而成，覆蓋了百度85%以上的產品體驗設計。UXC品牌與設計日益繁榮的時代共鳴，與設計更具競爭力的將來對接。面對未知與將來，咱們將繼續推動藝術和科技的完美融合，確立咱們獨特的審美和影響力，堅守「簡單極致」的設計理念，以用戶爲中心。咱們的願景是打造中國的用戶體驗標杆，成爲使人尊敬的用戶體驗組織。

坦誠、互助、學習、堅持，這些優秀的品質要繼續傳承，爲咱們的使命保駕護航！

3 基礎設施

cloud.baidu.com

相似於阿里，百度也有智能雲服務，針對前端領域提供了Serverless函數計算、CDN、人工智能、數據可視化、IoT可視化、安全防禦、開發者服務例如AR平臺和性能監控APM等等

• Serverless 函數計算CFC：提供基於事件機制，彈性、高可用、擴展性好、極速響應的雲端無服務器計算能力。您能夠僅關注業務邏輯的代碼部分，無需關注和配置服務器資源，支持多種函數觸發器，知足多樣化的事件觸發場景。
• CDN: 百度智能雲CDN將內容發佈到最接近用戶的邊緣節點，智能調度、就近分發，依靠高可用性和高穩定性，以及百度自建的1000+優質節點對、100T+帶寬、單節點80G-160G、支持IPV6等高優特性，爲用戶提供與百度搜索、百度地圖、百度網盤同質的百度CDN服務，讓您的網站像百度搜索同樣快！
• 人工智能：提供了完整了人工智能的解決能力，包含語音技術、天然語言、圖像技術、人臉識別、視頻技術、文字識別等等
• 數據可視化-Sugar：提供報表及數據大屏可視化服務，圖表組件豐富，拖拽式編輯，支持下鑽、聯動等交互式數據分析。
• IoT可視化：無縫對接海量實時數據，零編程設計可視化儀表盤，完美支持手機/監控大屏展示，更有強大的定製和嵌入功能，讓開發物聯網可視化應用如此簡單。

• 安全防禦：百度雲提供了DDos防禦、防火牆、安全監測、滲透測試等服務，爲你的應用保駕護航。
• 開發者服務：提供了百度效率雲，AR平臺（提供人臉特效、肢體特效、環境特效、3D識別渲染等等），應用性能管理服務APM等。

效率雲從需求、開發到交付，涵蓋研發全流程，經過項目管理平臺iCafe、代碼管理平臺iCode和持續交付平臺iPipe，全方位賦能研發，保障研發流程。

應用性能管理服務APM主要包含撥測與移動端監測兩大功能，爲您的APP與網站提供真實、持續的性能監測，一併發現APP端到網絡層的各樣問題，及時定位問題，有效提高用戶體驗！

4 前端應用層框架

LAWAS-基於 Vue.js 的 PWA 解決方案

lavas.baidu.com/guide

Lavas 是一套基於 Vue 的 PWA 解決方案，可以幫助開發者快速搭建 PWA 應用，解決接入 PWA 的各類問題，對提高用戶體驗，用戶留存率等有明顯提高，且開發者無須過多的關注 PWA 開發自己。

Progressive Web App, 簡稱 PWA，是提高 Web App 的體驗的一種新方法，能給用戶原生應用的體驗。

PWA 能作到原生應用的體驗不是靠特指某一項技術，而是通過應用一些新技術進行改進，在安全、性能和體驗三個方面都有很大提高，PWA 本質上是 Web App，藉助一些新技術也具有了 Native App 的一些特性，兼具 Web App 和 Native App 的優勢。

可是PWA接入仍是比較複雜的，涵蓋了Web App Manifest、Service Worker、Notification API & Push API、App Shell & App Skeleton、HTTPS、SSR等等，因此接入成本仍是比較高的。Lavas基於Vue.js，提供了一套完整的PWA解決方案，能夠幫助開發者快速接入PWA，得到Native-Like的體驗。

San-MVVM前端框架

San，是一個 MVVM 的組件框架。它體積小巧（< 15K），兼容性好（IE6），性能卓越，是一個可靠、可依賴的實現響應式用戶界面的解決方案。

San 經過聲明式的類 HTML 視圖模板，在支持全部原生 HTML 的語法特性外，還支持了數據到視圖的綁定指令、業務開發中最常使用的分支、循環指令等，在保持良好的易用性基礎上，由框架完成基於字符串的模板解析，並構建出視圖層的 節點關係樹，經過高性能的視圖引擎快速生成 UI 視圖。

San相對於Vue、React等前端框架最大的優點是其體積小巧和性能卓越，能夠從下圖中看到，在作一些Table的行添加、替換、刪除等操做，性能上有必定優點。但它的問題在於生態不足，相對於Vue、React這類成熟框架，缺少其餘諸如工程化、狀態管理、測試相關等等工具。

5 UI組件庫

ECharts-數據可視化組件庫

ECharts，一個使用 JavaScript 實現的開源可視化庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。

ECharts應該是國內使用最爲普遍的數據可視化組件庫，其涵蓋的範圍也很是普遍，從最簡單的折線圖、柱狀圖，到高階展現例如地理位置、3D圖形等等，可謂組件庫很是豐富應有盡有。

除去豐富的圖形組件之外，ECharts可以接收多種數據格式，支持大數據量展現，針對移動端優化，支持數據圖表交互性以及無障礙化訪問等等。

Sugar-百度數據可視化平臺

Sugar基於ECharts和D3的可視化圖表，提供報表及數據大屏可視化服務，圖表組件豐富，拖拽式編輯，支持下鑽、聯動等交互式數據分析。

Sugar是一個數據可視化平臺，包含數據源、組件庫、拖拽式佈局、炫酷大屏、數據分析和權限管控，提供整套數據可視化全流程的能力，能夠用較低成本的實現企業數據可視化的述求。下圖展現了Sugar的大屏能力：

6 百度智能小程序

相似於微信小程序，百度智能小程序也是依託於百度Web/APP的生態而產生的一種小程序。在渲染層，基於WebView/Native-View，邏輯層經過JSCore獲取底層系統能力，同時也封裝了web/native組件，也可以對接百度智能雲端，提供基礎雲服務和AI服務。

在性能方面，只需第一次下載，同時提供預下載、預加載，本地客戶端容器等能力，在體驗流暢度上要遠遠好於傳統H5。

百度智能小程序最大的亮點在於依託百度生態環境，提供了搜索、信息流、百家號、貼吧的流量，能夠最大可能獲取到用戶資源。

7 工程化智能化

FIS-定製化前端工程化構建

fis.baidu.com/fis3/index.…

FIS3 是面向前端的工程構建工具。解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合併、內嵌）、模塊化開發、自動化工具、開發規範、代碼部署等問題。

FIS涵蓋了前端工程化開發的方方面面:

• 豐富的腳手架與組件倉庫，自動監聽、本地預覽，讓您的頁面快速Run起來。
• 靈活運用開發工具提速開發，自動雪碧圖、資源內嵌，文件校驗、壓縮、合併.
• 利用模塊化提高可維護性，靈活適配開發框架
• 全面管理整站靜態資源，輕鬆搞定性能優化

FIS3還支持插件能力，能夠方便在編譯、構建、打包等環節進行定製化，很是的靈活。不過，這套系統因爲研發時間比較久遠，當前前端工程化在社區已經有了一套基於Webpack、Babel等比較完整的實踐體系，所以FIS3相對就比較難以推廣了。

amis-Low Code中後臺配置平臺

amis前端低代碼框架，經過JSON配置就能生成各類後臺頁面。目前在百度大量用於內部平臺的前端開發，已有 100+ 部門使用，建立了 1.2w+ 頁面。

amis支持如下能力：

• 經過JSON配置的方式來編寫頁面組件，而且提供可視化編輯器
• 數據的綁定與聯動
• 支持多種Action類型
• 表單和CRUD頁面生成能力
• 後臺接口配置

經過amis，得到了極大的收益，一箇中等複雜頁面開發只需20分鐘，接入部門100+ 個，建立1.2w+ 頁面，活躍頁面1.8K。

AIPage-智能化建站平臺

百度智能門戶（AIPage）是百度智能雲面向中小企業用戶推出的一款智能化構建網站和小程序的SAAS應用產品。用戶無需任何編程基礎便可上手操做，如同作PPT同樣拖拽式設計製做本身的網站和小程序，內置海量行業模版及組件，輕鬆打造「PC網站、手機網站、百度智能小程序、微信小程序、支付寶小程序」五個端的站點。產品支持電商及預定功能，可普遍適用各種行業用戶的實際應用場景。強勢集成多項百度搜索權益及AI智能獲客能力，幫助企業精準把握每一條商機信息，高效提高推廣和轉化效果！

AIPage具有可視化設計、海量模版組件、搜索引擎優化、AI智能獲客、全終端、全球化、用戶營銷等特色。PC、H五、百度智能小程序、微信小程序、支付寶小程序5端覆蓋，可視化拖拽設計和模板組件能夠爲客戶節省很多建站時間。

總結

百度做爲國內老牌的互聯網公司，其技術積累仍是至關深厚的，能夠看到在應用框架、數據可視化、智能小程序、工程化等方面都有很好的沉澱。固然，文章的內容都是基於公開信息整理而成，內部的衆多技術框架依舊不得而知，但願有相關信息的同窗能夠多多交流。

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

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