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

1 引言

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

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

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

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

上一篇已經詳盡介紹了阿裡巴巴集團整體技術體系涵蓋：基礎設施、服務層、應用層、UI元件層、跨平台、工程化、智能化，可以看到許多比較前沿的探索，對于想要了解前端發展趨勢的同學非常有幫助。強烈建議沒有看過的同學先看解密國内BAT等大廠前端技術體系-阿裡篇（長文建議收藏）。

這一篇從百度講起。

2 百度團隊介紹

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

但是，百度作為國内老牌網際網路公司，尤其是經曆多年搜尋大資料量的曆練，同時百度是國内工程師文化最為濃厚的一家公司，被譽為國内網際網路的黃埔軍校。

是以，業務/市值上雖然已經無法和阿裡巴巴、騰訊相提并論，但技術體系依舊還是國内頂尖的水準，下圖是百度前端技術體系一覽。

首先先大體介紹一下百度前端相關的技術團隊(有公開資訊的)

百度FEX

http://fex.baidu.com/

FEX名稱的來源是FE代表前端（front-end），X代表了每個人都能獨當一面，不僅所有事都了解一些，而且還有一個專長。就像X戰警一樣，每個人都有自己獨特的能力，但是作為團隊可以一起把事情做得更好。FEX 原屬于「Web 前端研發部」，現在核心成員都在百度雲，緻力于将前端技術做成技術産品。

FEX 緻力于針對百度的各産品線在 Web複雜應用，全端應用，全端資料監控及評估和前端工程優化等方面提升開發效率及頁面體驗，是百度内部最具影響力的前端團隊。

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

百度EFE

https://efe.baidu.com/

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

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

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

百度EUX

http://eux.baidu.com/

百度企業産品使用者體驗中心，網站首頁上披露的資訊不多，顧名思義應該是負責百度企業産品的互動、視覺、前端，從團隊照片來看小姐姐比例很高哦。

百度UXC

http://sux.baidu.com/

百度使用者體驗中心，于2016年5月17日成立，由原先的移動使用者體驗部（MUX）、搜尋使用者體驗部（SUX）、糯米設計團隊、鳳巢設計團隊、Hao123設計團隊等在行業内具有影響力的組織合并而成，覆寫了百度85%以上的産品體驗設計。

UXC品牌與設計日益繁榮的時代共鳴，與設計更具競争力的未來對接。面對未知與未來，我們将繼續推進藝術和科技的完美融合，确立我們獨特的審美和影響力，堅守“簡單極緻”的設計理念，以使用者為中心。我們的願景是打造中國的使用者體驗标杆，成為令人尊敬的使用者體驗組織。

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

3 基礎設施

https://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 解決方案

https://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-定制化前端工程化建構

http://fis.baidu.com/fis3/index.html

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網站、手機網站、百度智能小程式、微信小程式、支付寶小程式”五個端的站點。

AIPage具備可視化設計、海量模版元件、搜尋引擎優化、AI智能獲客、全終端、全球化、使用者營銷等特點。PC、H5、百度智能小程式、微信小程式、支付寶小程式5端覆寫，可視化拖拽設計和模闆元件可以為客戶節省不少建站時間。

8 總結

百度作為國内老牌的網際網路公司，其技術積累還是相當深厚的，可以看到在應用架構、資料可視化、智能小程式、工程化等方面都有很好的沉澱。當然，文章的内容都是基于公開資訊整理而成，内部的衆多技術架構依舊不得而知，希望有相關資訊的同學可以多多交流。