前端視角對Rust的淺析
概述
本文將從 Rust 的歷史，前端的使用場景和業界使用案例一步步帶你走進 Rust的世界。并且通過一些簡單的例子，了解 Rust 如何應用到前端，提高前端的生產效率。
Rust簡史
2006年，軟件開發者Graydon Hoare在Mozilla工作期間，開始了Rust作為一個個人項目。根據他在麻省理工技術評論的一次采訪，Rust的靈感來自于Hoare公寓樓里一個壞掉的電梯。電梯操作系統的軟件崩潰了，Hoare意識到這類問題通常源于程序如何使用內存的問題。
通常，這些類型設備的軟件是用C或C++編寫的，但這些語言需要大量的內存管理，可能導致系統崩潰的錯誤。因此，Hoare著手研究如何創建一種既緊湊又無內存錯誤的編程語言。
Mozilla 于2009年開始贊助這個項目，并且在2010年首次公開。也在同一年，其編譯器源代碼開始由原本的 OCaml 語言轉移到用 Rust 語言，進行自我編譯工作，稱作“rustc”，并于2011年實際完成。這個可自我編譯的編譯器在架構上采用了 LLVM 作為它的后端。
第一個有版本號的Rust編譯器于2012年1月發布。Rust 1.0是第一個穩定版本，于2015年5月15日發布。
2021年2月8日，AWS、華為、Google、微軟以及 Mozilla 宣布成立Rust基金會，并承諾在兩年時間里每年投入不少于 100 萬美元的預算，以用于 Rust 項目的開發、維護和推廣
根據Rust 最新官方新聞，谷歌日前宣布向 Rust 基金會捐款 100 萬美元，這筆資金將用于改善 C++ 與 Rust 互操作性。谷歌當前正在使用 Rust 語言重寫在 Linux 核心之外的 Android 關鍵安全組件，從而進一步減少安全漏洞。而在 Android 13 中，就已經有約 21％的新原生代碼使用 Rust 語言開發。
Rust在前端能夠干什么？
- SWC: 基于 Rust 的前端構建工具，可以理解為 Rust 版本的 Babel，但是性能有 10 倍提升。目前被 Next.js、Deno , Rspack等使用。
- Tauri：Tauri 是目前最流行的 Electron 替代方案，通過使用 Rust 和 Webview2 成功解決了 Electron 的包體積大和內存占用高的問題。Atom 團隊也是看到了 Tauri 的成功，才決定基于 Rust 去做 Zed 編輯器。
- Parcel2：零配置構建工具，特點是快速編譯和不需要配置，和 Vite、Webpack等打包比起來更加簡單，而且是基于 Rust 開發
- Biome: 旨在取代許多現有的 JavaScript 工具，集代碼檢測、打包、編譯、測試等功能于一身。
- Rspack: 基于 Rust 的高性能 Web 構建工具, 對標 Webpack, 兼容大部分Webpack api
- Rocket: 可以幫助開發人員輕松編寫安全的Web應用程序, 對標 Expressjs，性能卓越，具體參考 Web Frameworks Benchmark
- Yew: 使用 Rust 開發 h5 頁面，支持類 jsx 的語法，和 React 類似開發前端網頁，打包產物是 wasm，挺有趣。
- Napi-rs: 用 Rust 和 N-API 開發高性能 Node.js 擴展，可以替代之前用 C++ 開發的 Node.js 擴展，許多基于 Rust 語言開發的前端應用都結合這個庫進行使用。
Rust為什么大受歡迎
- 高性能：所有程序都必須管理其運行時使用計算機內存的方式。一些語言(比如：JavaScript )中具有垃圾回收機制，在程序運行時不斷地尋找不再使用的內存，在另一些語言中，程序員必須親自分配和釋放內存。Rust 則選擇了第三種方式：通過所有權系統管理內存，編譯器在編譯時會根據一系列的規則進行檢查。如果違反了任何這些規則，程序都不能編譯。正是這種內存管理機制，使得 Rust 有驚人的內存利用率。
- 內存安全：Rust 豐富的類型系統和所有權模型保證了內存安全，讓你在編譯期就能夠消除各種各樣的錯誤。Rust 通過所有權系統管理內存，編譯器在編譯時會根據一系列的規則進行檢查，如果違反了任何這些規則，程序都不能編譯。
- 線程安全：Rust 通過一整套基礎設施和類型檢查，強迫這些線程問題暴露在編譯階段，相比花費大量時間嘗試重現運行時并發 bug 出現的特定情況，Rust 會拒絕編譯不正確的代碼并提供解釋問題的錯誤信息。
同時大量頭部公司比如華為，微軟，字節的應用和推廣，使得rust快速占領著前端基礎設施領域。Webpack、Babel、Prettier 這些熱門工具都已有了 Rust 替代方案，且性能有著 10～100 倍的提升。任何能夠用 Rust 實現的應用系統，最終都必將用 Rust 實現。
Rust 缺點
- 學習曲線陡峭：Rust 擁有復雜的語法和嚴格的規則，對于初學者來說可能會感到困難和挑戰。
- 編譯時間長：由于 Rust 的編譯器進行了大量的靜態檢查和優化，編譯時間可能相對較長，特別是對于大型項目。希望未來 Rust 針對這塊做出更多優化
- 生態系統相對不太完善：相比其他編程語言，Rust 的生態系統相對較小，可能缺乏一些常見的庫和工具。
- 錯誤處理繁瑣：Rust 采用了 Result 和 Option 等類型來處理錯誤和空值，這要求開發人員進行顯式的錯誤處理，導致一些額外的編碼工作量。
Rust 生產實踐優秀案例
Rust語言在IM客戶端的實踐 (https://juejin.cn/post/7336022842856177690)
結合了 Rust 語言的優點，成功地解決高并發接待 & 多開。
給 Web 前端工程師看的用 Rust 開發 wasm 組件實戰(https://juejin.cn/post/7308434321764794378)
利用 Rust 生成的wasm，處理大量計算的場景，取得很好的收益。(https://juejin.cn/post/7303347466219569203)
Bundler 的設計取舍：為什么要開發 Rspack?
文章作者通過使用了 Webpack、Vite、Esbuild、Rollup 等構建工具，對各個工具的優劣處和設計取舍后決定采用rust提升構建工具的性能。
通過上面幾個案例我們可以看到，對于前端我們前端來說，利用 Rust 可以做一些計算量比較大wasm和一些構建工具相關的基礎設施收益還是比較大的。當然也可以做跨端應用，可以參考用 Rust 實現跨平臺開發(iOS/Android/Web)經驗分享(https://zhuanlan.zhihu.com/p/677550790)
Rust 在 WebAssembly 中的應用
WebAssembly 是什么？
WebAssembly 是一門不同于 JavaScript 的語言，WebAssembly 是一門低級的類匯編語言。它有一種緊湊的二進制格式，使其能夠以接近原生性能的速度運行，并且為諸如 C++ 和 Rust 等擁有低級的內存模型語言提供了一個編譯目標以便它們能夠在網絡上運行。
wasm二進制內容如下圖
圖片
如何生成 WebAssembly？
- 使用 Emscripten 移植一個 C/C++ 應用程序。
- 直接在匯編層，編寫或生成 WebAssembly 代碼。
- 編寫 Rust 程序，將 WebAssembly 作為它的輸出。
- 使用 AssemblyScript，它類似于 TypeScript 并且可編譯成二進制 WebAssmebly 代碼
由于 Rust 生態天然支持 WebAssembly，并且有專門的生態去跟蹤和優化WebAssembly，我們可以利用 Wasm-Pack 腳手架生成 Wasm 項目。
首先安裝 Rust 相關的環境，和 wasm-pack 腳手架。
這是一個可以直接將你的 Rust 代碼打包成 Npm 包的工具，用法十分簡單，只有 4 個命令：
- new：使用模板生成一個新的 Rust Wasm 項目
- build: 從 Rust Wasm Crate 生成一個 Npm Wasm Pkg
- test：運行瀏覽器測試
- pack 和 publish：創建壓縮包，發布到鏡像倉庫
圖片
Pkg hello_wasm.js 就是最終wasm 入口文件，
html中異步引入
const { default: init } = await import("./pkg/hello_wasm.js");
const res = await init();異步引入 hello_wasm.js 后，會自動加載 hello_wasm_bg.wasm 二進制文件，res 可以獲取從二進制得到的變量。間接從獲得了從 Rust 語言到 Js 傳遞，當然 Rust 也可以調用 Js 的方法，可以通過
#[wasm_bindgen(js_namespace = console)]通過在 Rust 函數或結構體上使用 #[wasm_bindgen] 屬性和相應的配置，我們可以將 Rust 代碼暴露給 JavaScript 使用，以實現跨語言的交互和調用。在這種情況下，#[wasm_bindgen(js_namespace = console)] 指定了 JavaScript 中的 console 對象的命名空間，使得我們可以使用類似于
console.log() 的方式在 Rust 中輸出到 JavaScript 的控制臺。
Rust 和 Node 的綁定
哪些功能適合用 Native Addon 來完成
- 簡單的輸入輸出但是中間邏輯復雜的計算邏輯，比如直接用到 CPU simd 指令的 @node-rs/crc32 , 或者加密算法 @node-rs/bcrypt, 中文分詞 @node-rs/jieba 。這些庫的邏輯都有一個共同點：輸入輸出都非常簡單(避免額外的 N-API 調用)， 中間計算邏輯非常復雜。
- 一些需要調用系統級 API 能力的庫，比如提到的 SIMD 指令，還有類似 GPU 調用等。
社區已經有成熟的 Napi-rs 來封裝 Native Addon。
首先通過安裝 Napi-rs 腳手架生成項目
圖片
生成的項目大概長這種模樣。通過執行 npm run build 我們可以生成 index.js和 napi-demo.darwin-arm64.node 二進制文件。
const demo = require("./index.js");引入 index.js 就可以獲取到 Rust lib.rs 中暴露的變量和方法了。其實像 Swc，Rspack 這些重計算的工具底層也是通過此庫進行 Rust 語言和 Nodejs 進行交互的。Rust 提供一些核心底層能力，Node 可以結合現有的生態調用經過 Rust生成二進制文件創造更多性能卓越的應用。
總結
隨著前端開發越來越卷，前端基建的效率也將是下一個值得投入的地方。并且隨著 Rust 和 WebAssembly 發展，網頁應用也有很大的發展空間。最后希望在深入學習 Rust 后，做出一些有意思的應用。
附錄
https://zhuanlan.zhihu.com/p/101118828
https://developer.mozilla.org/zh-CN/docs/WebAssembly/Rust_to_wasm
https://zhuanlan.zhihu.com/p/234914336
https://www.zhihu.com/question/603518666/answer/3256663127
https://juejin.cn/post/7336022842856177690
https://juejin.cn/post/7317854227748847616
https://zhuanlan.zhihu.com/p/677550790
https://zh.wikipedia.org/zh-cn/Rust
https://juejin.cn/post/7076354498691596325
