【百度技术分享】San介绍以及在百度APP的实践
導讀：San是百度自研的高性能MVVM框架，它是一個快速、輕量、靈活的JavaScript組件框架，體積小巧，兼容性好，性能卓越，目前已落地百度APP包括搜索、feed、小程序等核心業務，服務于億級用戶，開源社區已超過36位貢獻者，Star數量超過4.3K。
?
一、前端開發的演進
?
在過去的 10 到 15 年中，Javascript 無疑是發展最快的編程語言之一，它不再使用丑陋的、非結構化的代碼和插件在網站上編寫簡單的邏輯，而是發展為具有構建功能完備的跨平臺應用程序能力的強大生態。
?
隨著對 web 平臺的需求變得越來越復雜，前端開發者確實需要重新設計新的輪子。一些優秀的 JavaScript 框架和庫陸續登上舞臺：
| jQuery | 2006 |
| Backbone | 2010 |
| AngularJS | 2010 |
| React | 2013 |
| Vue | 2014 |
| Svelte | 2016 |
| San | 2016 |
隨著 Angular、React、Vue 等框架和庫的興起，前端開發人員的焦點也從「如何編寫代碼」轉移到了「選擇哪種開發框架」。
?
二、San 的誕生
?
記得在 2016 年之前的時候，我所在部門的同學雖然對 React、Vue、Angular 等主流框架都有所嘗試，但最終核心業務里面用的仍然是 jQuery。從我們業務的用戶數據來看，IE8 - 仍占據著一定的市場份額：https://gs.statcounter.com/browser-market-share/all/china/2016。
?
如果把 Vue、React 這些 MVVM 框架比做洋槍大炮，那 jQuery 只能算是大刀長矛，面對洋槍大炮，低版本 IE 兼容性問題讓做 2C 業務的同學只能摩拳擦掌、望洋興嘆。IE 兼容性相關的問題未來終將不再是問題，但是我們已經等不及要解決它了；出于對現狀的不滿意，我們開始了 San 的研發，并于 2016 正式推出。PC 端瀏覽器的?兼容性是個繞不開的理由，San 為這類的業務需求提供了技術選型方案。
如果拿車來比喻，我們想造的是一臺陸巡。相比轎車甚至多數 SUV，它沒有那么好開，看不到很多 2.0T 的車尾燈；相比牧馬人和 benz G，他越野能力和通過性也沒那么強。但是它很可靠，能穩穩當當、舒適地帶你到任何想去的地方。(@Erik)
?
三、San的特性介紹
?
San 是一個做了無數減法后誕生的東西，它專注于一個輕快的，注重性能和兼容性的，數據為驅動形式的 UI 框架，配合相應的狀態管理等庫來形成生態。從功能上來看，San 并沒有出奇的地方，其設計初衷是更好的性能、體積和兼容性，提高應用的天花板，減少應用開發者的后顧之憂。
?
San 通過聲明式的類 HTML 視圖模板，在支持所有原生 HTML 的語法特性外，還支持了數據到視圖的綁定指令、業務開發中最常使用的分支、循環指令等，在保持良好的易用性基礎上，由框架完成基于字符串的模板解析，并構建出視圖層的 節點關系樹，通過高性能的視圖引擎快速生成 UI 視圖。San 中定義的數據會被封裝，使得當數據發生有效變更時通知 San 組件，San 組件依賴模板編譯階段生成的節點關系樹，確定需要變更的最小視圖，進而完成視圖的異步更新，保證了視圖更新的高效性。
?
組件是 San 的基本單位，是獨立的數據、邏輯、視圖的封裝單元。從頁面角度看，組件是 HTML 元素的擴展；從功能模式角度看，組件是一個 ViewModel。San 組件提供了完整的生命周期，與 WebComponent 的生命周期相符合，組件間是可嵌套的樹形關系，完整的支持了組件層級、組件間的通信，方便組件間的數據流轉。San 的組件機制，可以有效支撐業務開發上的組件化需求。
?
San 支持組件反解，以此提供服務端渲染能力，可以解決純前端渲染導致的響應用戶交互時延長、SEO 問題。除此之外，San 還提供了一些周邊開源產品，與 San 配合使用，可以幫助開發者快速搭建可維護的大型 SPA 應用。
?
作為一個 MVVM 的組件框架。它體積小巧，兼容性好（IE6），性能卓越，是一個可靠、可依賴的實現響應式用戶界面的解決方案。對于用過 Vue 或者 React 的開發者來說，San 框架非常容易上手，學習成本很低。
Size 對比?
性能對比數據來源：https://krausest.github.io/js-framework-benchmark/current.html
?
四、淺談其他框架
?
San 尤其適合前端業務邏輯相對簡單的業務。目前，在百度內部已有多個產品線把 San 定為業務首選前端開發框架，相關的業務已服務于億級用戶，這足以證明 San 是可靠、可依賴的前端框架。
?
而框架之間的對比似乎又是一個繞不過的話題，我們不能無視房間里面的大象。
?
對比 React
React 是經過實戰檢驗的領導者，得到了企業和龐大的開源社區的支持。該庫可以更好地擴展，讓你創建復雜的企業級應用。從虛擬 DOM 到 JSX，從 Immutable 到 React Hooks，React 社區提出了很多偉大的革命性的想法。React 作為一個庫而不是框架，許多依賴都源于由社區構建和支持的第三方庫，無論是技術選型還是應用開發，都有著極大的靈活性，它的學習曲線相對也更加陡峭。
?
對比 Vue
Vue 使用一種更傳統的方法，可以用簡潔的模板語法來聲明式地將數據渲染進 DOM 系統。還提供單文件組件的模塊化方式，將 HTML 模板、樣式和 JS 代碼通過標簽分隔。這種開發方式容易讓前端開發人員更親切，也使得框架易于學習。另外，Vue 的文檔和生態方面，堪稱業界典范。
?
San 汲取了 Vue 的一些優秀設計，同時也體現了一些新的思路。例如：在 Vue 中，數據直接置于組件下，methods 被規約。而在 San 中，method 直接置于組件下，數據被規約（其實已經被封裝）。
?
相較于 Vue，San 在 API 的設計上更加節制。Vue 在組件通訊上，就提供了至少 6 種方案（參考 https://juejin.cn/post/6844903784963899405）；而 San 則只提供 4 種方案（https://baidu.github.io/san/practice/），包含 store。San 不提倡使用 mixin，mixin 意味著組件有隱式依賴，組件在不同的 mixin 環境下，渲染結果和行為可能不同，同一個組件在不同環境下是不可預期的。目前 Vue3 也推薦使用 Composition api 來取代 mixin。
?
五、San 的生態建設
?
圍繞著 San 生態的建設也在持續進行中，目前已經有了包括 San CLI、無極組件庫、Santd、San DevTools、San SSR 等，周邊生態已基本和 Vue 等業內主流框架對齊，足以滿足當前的業務需求。當然，繁榮程度還有很大差距。需要廣大開發者跟我們一起，共同建設繁榮的 San 技術生態。
?
目前 San 跟 Vue/React 的主流框架生態對比如下：
San、Vue 和 React 的生態對比?
San CLI
CLI 工具致力于將打包構建等基礎工具標準化，使開發人員專注于業務開發，不必花太多時間在 webpack、babel、postcss 等工具配置上。CLI 工具經歷了 Hulk CLI1.0、Hulk CLI2.0、San CLI 三個版本的迭代（Hulk 是一開始做的偏業務的公司內部版本），現已對外開源。
?
目前 San-CLI 的主要功能：
-
提供交互式項目腳手架，開箱即用。支持 Smarty 和 HTML 兩種模板
-
集成前端生態常用工具，初始化?Webpack?常用配置
-
內置?Webpack，提供插件化系統支持自定義擴展
-
圖形化的創建和管理 San 項目的 Web 界面，可集成常用輔助開發工具
?
?
UI 組件庫
San 無極組件庫是公司內部一套基于無極產品設計中臺規范而開發的 San 版本的 UI 組件，主要用于百度各個產品線的 C 端業務。
?
Santd（官網 https://ecomfe.github.io/santd/）是一套基于 Ant Design 設計規范的 UI 組件庫，目前主要用在多個內部的后臺系統。
Santd 開源地址：https://github.com/ecomfe/santd
?
San DevTools
San DevTools 是前端開發工具中的利器，它能輔助開發者快速定位問題，發現性能瓶頸。
當你無法快速找到自定義事件 (Event) 在哪個組件上觸發，消息（message）被哪個組件捕獲，出了問題的界面對應哪個數據字段時，DevTools 都能助你一臂之力。
開源地址：https://github.com/baidu/san-devtools
?
San SSR
為 San 提供一個 SSR 代碼框架和工具，將組件渲染為服務器端的 HTML 代碼，實現同一組件同時運行在服務端和瀏覽器中，實現前后端同構。
San SSR 開源地址：https://github.com/baidu/san-ssr
?
六、San 在百度 APP 中的應用
?
這些年，隨著移動開發技術的發展，我們的業務和團隊都得到了長足的發展，但是技術棧卻越來越亂，這是十分糟糕的。
?
對于一個大的研發團隊來說，統一技術棧可以加深前端團隊技術沉淀，防止重復造輪子，也有利于架構和解決方案的遷移，從而提升整體代碼質量和開發效率，避免重復踩坑。
?
2018 年底開始，百度 APP 高工開始推動前端技術棧的統一，基于前端技術選型做項目腳手架、開發 CLI 工具、封裝公共函數庫、業務通用組件庫。終極目標是實現一套代碼，多端統一，先后用 San 做 H5、小程序、San-native 方案、San-SSR 服務端渲染等。
?
技術選型：為什么是 San
選擇 San 作為統一技術棧的前端框架，主要基于以下幾個原因：
?
首先是業務特點，百度 APP 的業務主要是以展現為主，核心業務的前端頁面都是多 Webview 隔開的多頁面的，交互相對比較簡單，所以一個輕量和靈活的框架是首選；業務上我們不僅僅有移動端還有功能相同的 PC 頁面，San 出色的兼容性，能輕松實現 PC 和移動端組件復用，我們可以做到一套組件在 PC 和移動上都可用。
?
其次，移動端采用開源方案（Vue/React）也是可以考慮的，外部庫的好處在于發展的非常快，經常會有些新的 feature。但這也將會是個很大的風險，開源庫的快速迭代意味著隨時有新的最佳實踐取代舊的模式而頻繁的破壞性更改，讓早期采用者承擔重構成本。
?
最后，San 是一個普適性的前端框架，我們的小程序、San-native（類似 react-native）和 San SSR 都是基于 San，實現底層架構框架統一，真正做到從「Learn Once，Write Anywhere」到「 Write Once，Run AnyWhere」。
?
目前 San 作為主流的前端框架，被廣泛應用到百度 APP 下包括百度 APP Feed 落地頁（包括 PC）、移動端搜索結果頁（百度搜索結果頁，包括 PC）、個人動態落地頁、用戶個人主頁（包括 PC 版）、話題、百度 APP 和搜索頻道（san-native）等多個產品業務方向之中。
?
七、San 技術棧典型落地場景
?
Wise 搜索前端
-
面向用戶：C 端
-
用戶規模：億級
-
技術選型
-
san
-
san-ssr
-
san-ssr-target-php
-
基于 San SSR 的改造，搜索業務實現了跨平臺的同時，保證了老版架構遷移的平滑過渡：
組件化：把歷史 Smarty 模板遷移 San 組件定義；
過渡期：通過跨平臺的 SSR，一份代碼分別編譯到 PHP、 Node.js；
最終態：SSR 只編譯到 Node.js，業務代碼無需重寫。
?
San 采取和 Vue/React 完全不同的方式進行 SSR，把解析和編譯工作移到編譯期，進一步減小運行時開銷。
數據來源：https://github.com/searchfe/san-ssr-target-php/tree/master/test/perf
?
項目收益
提升開發效率：通過架構升級，從舊的技術棧遷移到 San，實現業務的組件化，降低了后續的維護成本；
性能小幅提升：從測試數據來看 San SSR + PHP 和 Smarty+PHP 在一些場景下互有優劣，而在實際的業務場景（搜索結果頁）有一定的是正向收益。
?
百度 APP Feed 圖文落地頁前端
-
面向用戶：C 端
-
用戶規模：億級
-
技術選型
-
san + san-store + san-update
-
san-ssr
-
san-cli
-
老的 feed 圖文落地頁需要同時維護 smarty + react 兩份模板代碼，維護成本高。由于開發人員的變動，對于一些歷史業務邏輯都很模糊。通過使用 san 技術棧的重構，取得了不錯的收益：
?
項目收益
代碼開發從開發雙語言代碼遷移為統一語言，落地無極規范，減少樣式問題的開發量，將開發效率提升 30% 以上；
首字節到達時間減少 26%，同步內容渲染結束時間減少 56%，各項性能耗時減少 20% 以上；
HTML 平均內容體積減小 16%。
?
Feed 頻道 / 搜索六合頻道
-
面向用戶：C 端
-
用戶規模：億級
-
技術選型
-
san
-
san-native
-
san-native-cli
-
talos
Talos 是百度研發的一套動態 Native 視圖框架，渲染引擎融合 Webview 和 NA，能同時支持 NA 和 Hybrid 的開發需求。它既能滿足獨立 App 的開發，也能滿足平臺型 App 內嵌。它專注性能優化，主要指標均優于同類框架。
?
San Native 作為 Talos 中的一種 DSL, 采用 San UI 框架作為底層驅動，通過重寫 Document 以及 Element 類來驅動端渲染，使得 Web 前端工程師可以十分方便的編寫原生移動應用，一套代碼多端運行。目前主要應用在百度 APP 首頁 Feed 頻道和搜索結果頁六合頻道。
?
Talos 與 Hippy 性能對比 ：
?
百度小程序
-
面向用戶：小程序開發者 / C 端
-
用戶規模：億級
-
技術選型
-
san
-
talos
-
san-native
San 作為百度小程序底層渲染框架，提供了小程序所需的渲染機制，保證能夠以組件化的方式進行小程序開發。同時提供了很多性能優化機制，很好的提升整體的運行性能。
?
San 底層提供簡潔清晰的模板結構 ANode，能夠被小程序框架所修飾，從而實現部分高頻基礎組件原生化，使得運行時渲染性能提升 50%。
?
San 提供壓縮模板線下打包機制，將 template 編譯成 ANode，可以避免在瀏覽器端進行 template 解析，提高初始裝載性能。同時提供一種壓縮方式將其轉化成 APack，讓其體積更小、網絡傳輸成本更低，小程序接入后啟動時間將縮短 20ms+。
?
附：San 生態相關
San 核心庫
-
san : 一個快速、輕量、靈活的 JavaScript 組件框架
-
san-router: 支持 hash 和 html5 模式的 router，單頁或同構的 Web 應用通常需要它。
-
san-factory: 組件工廠能幫助你在不同環境下更靈活的裝配組件。
-
san-store: 應用狀態管理套件，其理念是類似 flux 的單向流。
-
san-update: Immutable 的對象更新庫，和 san-store 配合進行應用狀態數據更新。
工具鏈
-
san-cli: 幫助你快速搭建 San 應用的命令行工具，讓你專注于應用本身，避免在配置上花費太多時間。
-
san-loader: San 單文件組件的 Webpack loader。
-
san-hot-loader: 提供熱更新功能，讓開發調試更方便。
-
san-ssr: 服務端渲染框架與工具庫。
-
san-devTools: 基于 Chrome 擴展的開發者工具。
-
drei: VSCode 插件。
-
san-test-utils: San 的單元測試實用工具庫。
-
san-anode-utils: 一些工具方法能夠幫助你處理 ANode.
-
docit: 基于 san 的 Markdown 文檔建站工具
UI 庫
-
無極產品設計中臺: 服務于百度生態產品的產品設計中臺，基于確定和自然的設計價值觀上的模塊化解決方案
-
santd: 基于 Ant-Design 設計規范的組件庫
-
san-mui: 基于 Material Design 設計規范的組件庫
跨端方案
-
基于 san-native 的動態視圖框架 talos
?
延伸閱讀
-
San - 一個傳統的 MVVM 組件框架：https://efe.baidu.com/blog/san-a-traditional-mvvm-component-framework/
-
San 為什么會這么快：https://efe.baidu.com/blog/san-perf/
-
如何評價百度新造的 MVVM 輪子 San？https://www.zhihu.com/question/65498751/answer/294265707
?
最后歡迎參與 san 周邊的開發：
-
為 san 相關的類庫貢獻有價值的 issue（https://github.com/baidu/san）；
-
貢獻 san-cli 的 plugin，可以將常用的 webpack 插件，集成到 san-cli（了解更多 https://ecomfe.github.io/san-cli/#/architecture）；
-
貢獻 san-cli-ui 的 plugin，可以將常用的工具集成到 san-cli 的可視化界面 (了解更多 https://ecomfe.github.io/san-cli/#/ui/structure)。
?
?
原文鏈接：https://mp.weixin.qq.com/s/cSD5lAXF83B5gnlrksbJyA
百度架構師
百度官方技術公眾號上線啦！
技術干貨?·?行業資訊 ·?線上沙龍?·?行業大會
招聘信息 ·?內推信息 ·?技術書籍?·?百度周邊
歡迎各位同學關注！
?
總結
以上是生活随笔為你收集整理的【百度技术分享】San介绍以及在百度APP的实践的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 闪银奇异安全负责人：互金行业安全建设的四
- 下一篇： 快速编制桩位偏差竣工图（桩位偏移竣工图）