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公司，目前在美團負責餐飲相關大前端技術團隊，定期分享關於大前端技術、投資理財、個人成長的思考與總結。