1 引言
整個業界在前端框架不斷迭代中，也尋找到了許多突破方向，例如跨平臺中的RN、Flutter，服務端GraphQL、Serverless，前端和客戶端的融合越來越緊密，前端在Node和Electron的加持下，也擴充套件了自己的版圖到服務端和桌面。
同時，隨著前端開發越來越複雜，整個前端研發也經歷了人工化->工具化->工程化->智慧化的演變。目前各個大廠在工程化實踐不斷迭代，出現了許多Low/No Code等前端智慧化解決方案，工程化實踐也深入到研發的各個環節，不斷提升前端研發的標準化能力。而且，隨著機器學習的加入，各類UI2Code的解決方案也開始出現，前端研發進入了一個完全不同的時代。
隨著端上能力的不斷增強，現在在端上做的事情越來越多。首先，資料視覺化方向，各類圖表、地圖、3D等等資料視覺化的嘗試變得越來越多。其次，伴隨著人工智慧的加持，在端上的人工智慧應用也變的普及，減少了服務端的互動，提高了系統的實時響應能力。最後，隨著Webassembly等技術的應用，有可能將前端執行能力再提升一個檔次，可以進行更為複雜的端上計算。
為了瞭解當前前端的發展趨勢，讓我們從國內各大網際網路大廠開始，瞭解他們的最新動態和未來規劃。
上一篇已經詳盡介紹了阿里巴巴集團整體技術體系涵蓋：基礎設施、服務層、應用層、UI元件層、跨平臺、工程化、智慧化，可以看到許多比較前沿的探索，對於想要了解前端發展趨勢的同學非常有幫助。建議沒有看過的同學先看阿里篇。
這一篇從百度講起。
2 百度團隊介紹
百度進入2019年業務上就一直萎靡不振，團隊、組織架構上也不斷調整，從今年股價走勢也能看出發展的確不順。市值上，也連續被美團、京東超越，自此江湖上再也沒有BAT，只剩下AT了。
但是，百度作為國內老牌網際網路公司，尤其是經歷多年搜尋大資料量的歷練，百度是國內工程師文化最為濃厚的一家公司，被譽為國內網際網路的黃埔軍校。
因此，業務/市值上雖然已經無法和阿里巴巴、騰訊相提並論，但技術體系依舊還是國內頂尖的水平，下圖是百度前端技術體系一覽。
下面大體介紹一下百度前端相關的技術團隊(有公開資訊的)
百度FEX
FEX名稱的來源是FE代表前端（front-end），X代表了每個人都能獨當一面，不僅所有事都瞭解一些，而且還有一個專長。就像X戰警一樣，每個人都有自己獨特的能力，但是作為團隊可以一起把事情做得更好。FEX 原屬於「Web 前端研發部」，現在核心成員都在百度雲，致力於將前端技術做成技術產品。
FEX 致力於針對百度的各產品線在 Web複雜應用，全端應用，全端資料監控及評估和前端工程優化等方面提升開發效率及頁面體驗，是百度內部最具影響力的前端團隊。
FEX 是百度最早的開源實踐者，先後推出了 Tangram、UEditor、FIS、GMU、Chassis、KityMinder 等庫和工具，現在主要產品有 aipage、sugar 和 amis。
百度EFE
百度EFE（Excellent FrontEnd）技術體系，前身是ECOM前端團隊，後經過技術的發展，逐漸形成一套完善的前端技術體系。
EFE技術體系現由多個遵循該技術體系的前端團隊所組成。E(Excellent)代表我們追求卓越的技術態度。
EFE團隊有非常多的開源專案，最著名的當屬視覺化圖表庫ECharts，在百度內部也是一個非常有影響力的團隊。
百度EUX
百度企業產品使用者體驗中心，網站主頁上披露的資訊不多，顧名思義應該是負責百度企業產品的互動、視覺、前端，從團隊照片來看小姐姐比例很高哦。
百度UXC
百度使用者體驗中心，於2016年5月17日成立，由原先的移動使用者體驗部（MUX）、搜尋使用者體驗部（SUX）、糯米設計團隊、鳳巢設計團隊、Hao123設計團隊等在行業內具有影響力的組織合併而成，覆蓋了百度85%以上的產品體驗設計。UXC品牌與設計日益繁榮的時代共鳴，與設計更具競爭力的未來對接。面對未知與未來，我們將繼續推進藝術和科技的完美融合，確立我們獨特的審美和影響力，堅守“簡單極致”的設計理念，以使用者為中心。我們的願景是打造中國的使用者體驗標杆，成為令人尊敬的使用者體驗組織。
坦誠、互助、學習、堅持，這些優秀的品質要繼續傳承，為我們的使命保駕護航！
3 基礎設施
類似於阿里，百度也有智慧雲服務，針對前端領域提供了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 是一套基於 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-定製化前端工程化構建
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、H5、百度智慧小程式、微信小程式、支付寶小程式5端覆蓋，視覺化拖拽設計和模板元件可以為客戶節省不少建站時間。
總結
百度作為國內老牌的網際網路公司，其技術積累還是相當深厚的，可以看到在應用框架、資料視覺化、智慧小程式、工程化等方面都有很好的沉澱。當然，文章的內容都是基於公開資訊整理而成，內部的眾多技術框架依舊不得而知，希望有相關資訊的同學可以多多交流。
這是大廠前端技術體系解密系列第二篇，後續還會有其他大廠的內容，有興趣的同學可以關注本公眾號【奶爸碼農】第一時間獲得資訊。
『奶爸碼農』從事網際網路研發工作10+年，經歷IBM、SAP、陸金所、攜程等國內外IT公司，目前在美團負責餐飲相關大前端技術團隊，定期分享關於大前端技術、投資理財、個人成長的思考與總結。