過(guò)年期間我沒(méi)怎么發(fā)文章，但是我也沒(méi)閑著。在這個(gè)空閑時(shí)間，把 rust 基礎(chǔ)以及個(gè)別生態(tài)技術(shù)方案扎扎實(shí)實(shí)的，系統(tǒng)的學(xué)習(xí)了一下。學(xué)習(xí)他的初衷是因?yàn)?rust 可以支持鴻蒙應(yīng)用的原生級(jí)別的開(kāi)發(fā)，為進(jìn)階資深級(jí)別的鴻蒙開(kāi)發(fā)者做技術(shù)儲(chǔ)備。

可這不學(xué)不知道，一學(xué)嚇一跳。這才發(fā)現(xiàn) rust 生態(tài)，正在以一種銳不可當(dāng)?shù)臍鈩?shì)，全方位、無(wú)死角的入侵前端開(kāi)發(fā)的方方面面。最關(guān)鍵的是，由于有后發(fā)優(yōu)勢(shì)，這些技術(shù)方案往往都比已有的前端方案更加先進(jìn)、更加科學(xué)、性能更高...

0

Farm

Farm 是一個(gè)使用 rust 編寫(xiě)的極速構(gòu)建引擎。在它的宣傳文檔中，認(rèn)為自己比 Webpack 快 10 倍以上，比 vite 快 5 倍。很顯然，這是一款想要精準(zhǔn)狙擊 vite 的前端項(xiàng)目構(gòu)建工具。

由于 vite 對(duì)于項(xiàng)目?jī)?nèi)的模塊采取的是請(qǐng)求時(shí)編譯的策略，并且對(duì)源碼不 bundle，因此，根據(jù)字節(jié)架構(gòu)團(tuán)隊(duì)內(nèi)部的經(jīng)驗(yàn)，當(dāng)項(xiàng)目規(guī)模巨大的時(shí)候，vite 的首次頁(yè)面加載時(shí)間可能長(zhǎng)達(dá)數(shù)十秒「頁(yè)面首次加載時(shí)，加載了大量的模塊」，刷新時(shí)極其卡頓，并且由于巨大的請(qǐng)求量可能導(dǎo)致瀏覽器崩潰，影響開(kāi)發(fā)體驗(yàn)。

而且 vite 在開(kāi)發(fā)環(huán)境使用 esbuild 進(jìn)行預(yù)編譯，在生成環(huán)境使用 bundler rollup，處理方式不一樣，偶爾可能會(huì)出現(xiàn)開(kāi)發(fā)環(huán)境與線上行為不一致的情況，一旦出現(xiàn)不一致，則意味著巨大的排查成本。

針對(duì) vite 的痛點(diǎn)，F(xiàn)arm 使用 rust 重新實(shí)現(xiàn)了對(duì) css/ts/js/sass 的編譯能力，能實(shí)現(xiàn)毫秒級(jí)啟動(dòng)項(xiàng)目，對(duì)于大部分情況，能講 hmr 時(shí)間控制在 10ms 以?xún)?nèi)。

1

Turbopack

相比于 Farm，Turbopack 則顯得更加和值得信賴(lài)，并且由于 next.js 的加持，它也得到了更多的關(guān)注。

Turbopack 同樣是一款基于 rust 構(gòu)建的前端項(xiàng)目構(gòu)建工具。Turbopack 建立在新的增量架構(gòu)上，在打包時(shí)只關(guān)注開(kāi)發(fā)所需的最小資源，因此不管是啟動(dòng)速度還是 hmr 速度，都有遠(yuǎn)超 vite 的性能。

在具有 3000 個(gè)模塊的應(yīng)用上，Turbopack 只需要 1.8s，而 Vite 需要 11.4s。

Turbopack 是由 Vercel 團(tuán)隊(duì)提供的，專(zhuān)注于提高 Next.js 速度的打包工具。并且未來(lái)的目標(biāo)是取代 webpack，成為新一代的前端打包工具。因此 Next.js 的成熟與大熱，也會(huì)帶動(dòng) Turbopack 成為更值得信賴(lài)的打包工具。

2

Rspack

Rspack 是一款由字節(jié)團(tuán)隊(duì)提供的項(xiàng)目打包工具。和 Turbopack 一樣，它也充分發(fā)揮了 Rust 語(yǔ)言的性能優(yōu)勢(shì)，在打包速度上都有顯著的提升。

但是與 Turbopack 不同的是，Rspack 選擇了優(yōu)先對(duì) webpack 生態(tài)兼容的路線。一方面，這些兼容可能會(huì)帶來(lái)一定的性能開(kāi)銷(xiāo)，但是在實(shí)際的業(yè)務(wù)落地中，這寫(xiě)性能開(kāi)銷(xiāo)是可以接受的。另外一方面，這些兼容也使得 Rspack 可以更好的與上層框架和生態(tài)進(jìn)行集成，能夠?qū)崿F(xiàn)業(yè)務(wù)的漸進(jìn)式遷移。

目前 Rspack 的開(kāi)發(fā)團(tuán)隊(duì)也在積極的招聘，很顯然，他們對(duì)于未來(lái)的發(fā)展有非常明確的規(guī)劃。

3

Vite 正在用 rust 重構(gòu)

Vite 作為新一代高性能打包工具，剛出場(chǎng)時(shí)確實(shí)驚艷了眾人。但是架不住各種瘋狂的卷王使用 rust 彎道超車(chē)啊。Vite 反而成為了背景板，被按在地上瘋狂摩擦。因此為了能夠不在性能上被壓制太多，Vite 團(tuán)隊(duì)正在基于 rust 研發(fā)各種替代方案以解決 Vite 目前的痛點(diǎn)。

Rolldown

Vite 團(tuán)隊(duì)正在研發(fā) Rolldown 并且已經(jīng)開(kāi)源，它是使用 rust 開(kāi)發(fā)的 Rollup 的替代品。它的重點(diǎn)將放在本地級(jí)別的性能上，同時(shí)保持與 Rollup 的兼容性。最終目標(biāo)是能悄悄在 Vite 中切換到 Rolldown，并且 Vite 的使用者產(chǎn)生最小的影響。

不過(guò)目前來(lái)看，Vite 要實(shí)現(xiàn) rust 重構(gòu)這個(gè)目標(biāo)壓力很大。因此 Vite 團(tuán)隊(duì)規(guī)劃了四個(gè)階段來(lái)推動(dòng)這個(gè)事情

1、替換 esbuild
2、替換 Rollup
3、使用 rust 實(shí)現(xiàn)常用需求的內(nèi)置轉(zhuǎn)化，如編譯 ts、JSX 等
4、使用 rust 完全重構(gòu) Vite

4

Leptos

Leptos 是一款基于 rust 的類(lèi) React/Solid 框架。也是基于 signal 實(shí)現(xiàn)的細(xì)粒度級(jí)別的響應(yīng)式更新。

基礎(chǔ)語(yǔ)法如下：

#[component]
fn App() -> impl IntoView {
  let (count, set_count) = create_signal(0);

  view! {
    <button 
      on:click=move |_| set_count.update(|n| *n += 1)
    >
      "click me"
    </button>

    <p>
      <strong>"Reactive"</strong>
      {count}
    </p>
  }
}

在語(yǔ)法層面與 Solid 非常相似。不過(guò)在語(yǔ)法細(xì)節(jié)設(shè)計(jì)上，比 Solid 設(shè)計(jì)得更加的合理。在語(yǔ)義上有更符合直覺(jué)的思考。這也就意味著，Leptos 基于 rust 的編譯做得更好。

#[component]
fn ProgressBar(
  #[prop(default = 100)]
  max: u16,
  #[prop(into)]
  progress: Signal<i32>
) -> impl IntoView {
  view! {
    <progress max=max value=progress />
  }
}

盡管 Leptos 設(shè)計(jì)得比較先進(jìn)，性能也非常強(qiáng)悍，但由于是基于 rust 編寫(xiě)，上手成本非常高，因此在推廣上可能會(huì)遇到大量的困境。不過(guò)這依然擋不住許多程序員對(duì)他的熱情。

我也是非常喜歡 Leptos 的開(kāi)發(fā)者之一，并且把它作為熟悉 rust 語(yǔ)法學(xué)習(xí)的主要項(xiàng)目之一，因?yàn)檫@是我們前端更熟悉的領(lǐng)域，因此前端開(kāi)發(fā)通過(guò)它掌握 rust 能達(dá)到事半功倍的效果。

當(dāng)然，該工具還有很多潛力我還沒(méi)徹底挖掘到，比如官方文檔里宣稱(chēng)自己是 full Stack 的框架，但是由于我還沒(méi)有消化完，所以暫時(shí)需要進(jìn)一步學(xué)習(xí)才能了解。

5

dioxus

dioxus 是一個(gè)野心更大的跨平臺(tái)客戶端開(kāi)發(fā)框架，與此同時(shí)，它又能做到全棧開(kāi)發(fā)。它在實(shí)現(xiàn)原理與語(yǔ)法設(shè)計(jì)上與 Leptos 有一定的相似之處，但是在 UI 語(yǔ)法的表現(xiàn)上又完全不同

一個(gè)簡(jiǎn)單的例子可以看出來(lái)

fn app() -> Element {
  let mut count = use_signal(|| 0);

  rsx! {
    h1 { "High-Five counter: {count}" }
    button { onclick: move |_| count += 1, "Up high!" }
    button { onclick: move |_| count -= 1, "Down low!" }
  }
}

從這個(gè)語(yǔ)法設(shè)計(jì)就可看出，它志在一統(tǒng)江湖。試圖將 web 開(kāi)發(fā)，移動(dòng)端 App 開(kāi)發(fā)，桌面端 App 開(kāi)發(fā)等場(chǎng)景一網(wǎng)打盡。

簡(jiǎn)單實(shí)用下來(lái)的感受就是，該框架有過(guò)渡模仿 React 的嫌疑，以致于熟悉 React 的我學(xué)習(xí)它比 Leptos 更加的得心應(yīng)手。

6

Tauri

Tauri 是一款 Electron 的替代方案。

Electron 主要有兩個(gè)痛點(diǎn)，一是包體積太大，二是內(nèi)存消耗嚴(yán)重。因此它的替代方案層出不窮。與前面介紹的幾款 rust 框架不同，Tauri 的發(fā)展已經(jīng)趨于成熟，并且已經(jīng)在許多商用項(xiàng)目中得以應(yīng)用。

最最最重要的是，我已經(jīng)開(kāi)始讓我的學(xué)生學(xué)習(xí)它，并作為一個(gè)核心項(xiàng)目亮點(diǎn)作為自己的競(jìng)爭(zhēng)力來(lái)應(yīng)對(duì)越來(lái)越卷的面試場(chǎng)景。并且取得的效果還不錯(cuò)。從最近這半年的面試的結(jié)果來(lái)看，許多國(guó)內(nèi)的公司已經(jīng)開(kāi)始重視 Tauri 帶來(lái)的利好。

由于 rust 放棄了體積巨大的 Chromiun 和 nodejs，同樣的項(xiàng)目，打包體積可以從 electron 的 60M減少到 4M，內(nèi)存消耗也能從 500M 減少到 150M 左右。

7

Servo

這是一款基于 rust 開(kāi)發(fā)，并且志在取代 chrome 的瀏覽器項(xiàng)目。該項(xiàng)目是早期 Mozilla 開(kāi)發(fā)的實(shí)驗(yàn)性項(xiàng)目，由于資金有限，中間擱置了很長(zhǎng)一段時(shí)間，現(xiàn)在眼看著 rust 大火又準(zhǔn)備加足馬力開(kāi)始搞，并且近期版本迭代非?？欤藭r(shí)的 Servo 已經(jīng)由 Linux 基金會(huì)接管。

Servo 試圖創(chuàng)造一個(gè)大規(guī)模并行計(jì)算的頁(yè)面渲染模式，來(lái)加速渲染、布局、HTML 解析、圖像解碼等，在 Arm 架構(gòu)上的測(cè)試顯示，Servo 的性能顯著優(yōu)于 Chromium。

然后我就去下載這個(gè)瀏覽器來(lái)玩了一下，結(jié)果發(fā)現(xiàn)這玩意兒還是一個(gè)簡(jiǎn)陋版本?；镜?UI 功能還沒(méi)有做出來(lái)。并且許多頁(yè)面的布局還存在亂序的問(wèn)題。

只能說(shuō)暫時(shí)值得關(guān)注，有很大的發(fā)展?jié)摿?。用的話，可能還早。

8

Deno

Deno 是一款基于 rust 構(gòu)建的 JavaScript 運(yùn)行時(shí)。和 node.js 一樣出自于同一個(gè)大佬之手。Deno 的最新版本也是基于 rust 開(kāi)發(fā)。

對(duì)我個(gè)人而言，Deno 最大的魅力在于直接原生支持 TypeScript，并且支持了 JSX/TSX。所以我非?？春?Deno 的后續(xù)發(fā)展，它正在越來(lái)越好，雖然現(xiàn)在生態(tài)還不足以于 node 抗衡。

9

總結(jié)

很明顯可以看出，rust 正在入侵前端的方方面面，在有的方面雖不夠成熟但已表現(xiàn)出潛力，在某些方面卻已經(jīng)確定了明確的優(yōu)勢(shì)。

我認(rèn)為前端開(kāi)發(fā)再也不能忽視 rust 的存在了。由于同時(shí)具備超高的性能于安全性，rust 在各個(gè)領(lǐng)域「操作系統(tǒng)層面、AI、游戲開(kāi)發(fā)、服務(wù)端、跨端方案、高性能 web 應(yīng)用...」都已經(jīng)被高度認(rèn)可，社區(qū)活躍度非常高，生態(tài)發(fā)展非常迅猛。

因此在去年年底到現(xiàn)在，我一直在投入 rust 的學(xué)習(xí)中，整體感受下來(lái)就是，從一個(gè)前端開(kāi)發(fā)的角度切入去學(xué)習(xí) rust，上手難度還是比較低的，大概花一天時(shí)間就能學(xué)完所有基礎(chǔ)語(yǔ)法，但是需要我們對(duì)內(nèi)存有非常準(zhǔn)確的理解，如果你對(duì)內(nèi)存一頭霧水，可能 rust 會(huì)很難學(xué)習(xí)。

然后我們需要花更多的時(shí)間去學(xué)習(xí) rust 的開(kāi)發(fā)思維與生態(tài)，對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，Leptos 是一個(gè)不錯(cuò)的學(xué)習(xí)練手項(xiàng)目。