Rust 在前端

題外話

Turbo[1] 在國外爆火,國內也不甘示弱,因爲我的朋友圈已經被刷屏了。當然最吸引我的並不是文章的內容,而是標題 《xxx 比 xxx 快 700 倍, xxx》,這句話的確出自於官網 [2],但是標題卻讓人心生厭惡。當標題開始內卷,一大堆提速千萬倍,一文搞懂,三天精通,從此吊打,xx 爲王,xx 已死,只會造成惡性循環。

原文:
Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust by the creators of Webpack and Next.js[3] at Vercel[4].

On large applications Turbopack updates 10x faster than Vite and 700x faster than Webpack. For the biggest applications the difference grows even more stark with updates up to 20x faster than Vite.

The secret to Turbopack's performance is twofold: highly optimized machine code and a low-level incremental computation engine that enables caching down to the level of individual functions. Once Turbopack performs a task it never does it again.

Our team has taken the lessons from 10 years of Webpack, combined with the innovations in incremental computation from Turborepo[5] and Google's Bazel, and created an architecture ready to support the coming decades of computing.

原文中:是在大型應用程序中,Turbopack 的更新速度比 Vite 快 10 倍,比 Webpack 快 700 倍。明確指出是在大型應用開發時的熱更新速度,而且隨着應用的體量增大,差距會越來越明顯。但標題中將 “應用體積”、“開發模式” 和“熱更新”等這些關鍵詞丟棄,似乎有點斷章取義。

我想說,如果都這麼起標題,那還是技術文章嗎?發出這樣的疑問不是想證明我自己有多清高,拉仇恨。文章是用來科普的,不是用來博眼球的。既然寫技術文章就要客觀一點,而不是斷章取義的就某一點進行誇大。標題提煉的關鍵詞既是對文章中心思想的高度概括,也是方便信息的快速檢索(如果標題都是 “一文搞懂,三天精通,從此吊打”,請問該如何對信息進行歸類整理)。

我最不能忍受的是:一篇技術文章從頭寫到尾,看不到一個引用。引用是文章的延伸閱讀,更是文章的理論支撐。如果通篇下來,看不到一處引用,這樣的文章,我想很多人心裏都是要打一個問號的(可不可信)?

有深度的往往是少數,造成精品必然不會太高產的原因是:鑽研需要花費大量的精力。遇到問題,拆解問題,提出解決方案,再到最後的沉澱輸出,都是在時間裏磨出來的。

用技術來賺錢,應該是一件值得被肯定的事情。因爲我自己也在寫文章,知道一篇文章從構思醞釀,邏輯梳理,再到最後的成品有多難。往往還是可遇不可求的,只有在遇到問題,解決問題,或者有新的思考纔會有東西可寫。一篇文章從構思到出稿少則一天,多則幾天或更長,所以真正的知識值得被肯定。投入的時間和回報往往不成比例,所以能堅持的人,更多的是用愛發電。但是知識的創作永遠都不是廉價的,應該對讀者負責。

Rust 是什麼?

A language empowering everyone to build reliable and efficient software.

一種使每個人都能建立可靠和高效的軟件的語言(系統級編程語言)。

特性

Wiki: 在計算機科學中,垃圾回收(Garbage Collection,簡稱 GC)是指一種自動的存儲器管理 [8] 機制。當某個程序佔用的一部分內存空間不再被這個程序訪問時,這個程序會藉助垃圾回收算法向操作系統歸還這部分內存空間。垃圾回收器可以減輕程序員的負擔,也減少程序中的錯誤。垃圾回收最早起源於 LISP[9] 語言。Java[10]、C#[11]、Go[12] 和 D 語言 [13] 都支持垃圾回收器。

生態

Rust 助力前端

Rust 因其出色的表現,連續 7 年在 StackOverflow 調查中成爲最受歡迎的語言(Stack Overflow Developer Survey 2022[22])。優秀的特性自然也受到了前端的青睞,很多大神開始基於 Rust 重寫前端生態。

個人理解,不準確的地方歡迎討論:Rust 之所以優秀是因爲它借鑑了大量編程語言的優秀特性,通過其自身的類型系統,生命週期,所有權等概念將其統一起來,成爲其安全可靠,高性能的重要保證(構建速度暫時不吐槽,畢竟團隊也在不斷努力提速中)。在編譯階段會對代碼進行檢查,拋出友好的錯誤,並給出大量指導性修改建議(很多時候都是編譯器在教我寫代碼),這在別的語言似乎很難看到。

以下是整理的相關資源,歡迎補充(瞭解更多,可以關注 lencx/awesome[23])。

學習教程

生態

References

[1]

Turbo: https://turbo.build/

[2]

出自於官網: https://turbo.build/pack/docs

[3]

Next.js: https://nextjs.org/

[4]

Vercel: https://vercel.com/

[5]

Turborepo: https://turbo.build/repo

[6]

文檔: https://doc.rust-lang.org/rustdoc/what-is-rustdoc.html

[7]

cargo: https://doc.rust-lang.org/cargo/

[8]

存儲器管理: https://zh.wikipedia.org/wiki/%E8%A8%98%E6%86%B6%E9%AB%94%E7%AE%A1%E7%90%86

[9]

LISP: https://zh.wikipedia.org/wiki/LISP

[10]

Java: https://zh.wikipedia.org/wiki/Java

[11]

C#: https://zh.wikipedia.org/wiki/C_Sharp

[12]

Go: https://zh.wikipedia.org/wiki/Go

[13]

D 語言: https://zh.wikipedia.org/wiki/D%E8%AF%AD%E8%A8%80

[14]

Command Line: https://www.rust-lang.org/what/cli

[15]

WebAssembly: https://www.rust-lang.org/what/wasm

[16]

npm: https://www.npmjs.com/

[17]

webpack: https://webpack.js.org/

[18]

vite: https://vitejs.dev/

[19]

rollup: https://rollupjs.org/guide/en/

[20]

Networking: https://www.rust-lang.org/what/networking

[21]

Embedded: https://www.rust-lang.org/what/embedded

[22]

Stack Overflow Developer Survey 2022: https://survey.stackoverflow.co/2022/#section-most-loved-dreaded-and-wanted-programming-scripting-and-markup-languages

[23]

lencx/awesome: https://github.com/lencx/awesome

[24]

Awesome Rust: https://github.com/rust-unofficial/awesome-rust

[25]

Rust 語言聖經 (Rust Course): https://course.rs/

[26]

Rust 語言中文社區: https://rustcc.cn/

[27]

24 days from node.js to Rust: https://vino.dev/blog/node-to-rust-day-1-rustup/

[28]

Rust for Node developers: https://github.com/Mercateo/rust-for-node-developers

[29]

Rust for JavaScript peeps: https://github.com/yoshuawuyts/rust-for-js-peeps

[30]

Turbo: https://turbo.build/

[31]

SWC (Speedy Web Compiler): https://swc.rs/

[32]

Deno: https://deno.land/

[33]

Rome: https://rome.tools/

[34]

Boa: https://github.com/boa-dev/boa

[35]

Parcel: https://github.com/parcel-bundler/parcel

[36]

Lightning CSS: https://lightningcss.dev/

[37]

deno_lint: https://github.com/denoland/deno_lint

[38]

RSlint: https://github.com/rslint/rslint

[39]

nvm: https://github.com/nvm-sh/nvm

[40]

fnm: https://github.com/Schniz/fnm

[41]

Volta: https://github.com/volta-cli/volta

[42]

wasm-pack: https://github.com/rustwasm/wasm-pack

[43]

rsw: https://github.com/rwasm/rsw-rs

[44]

vite-plugin-rsw: https://github.com/rwasm/vite-plugin-rsw

[45]

Tauri: https://tauri.app/

[46]

Electron: https://www.electronjs.org/

[47]

Tauri 系列: _https://mp.weixin.qq.com/mp/appmsgalbum?_biz=MzIzNjE2NTI3NQ==&action=getalbum&album_id=2593843659863752704

[48]

Yew: https://yew.rs/

[49]

Percy: https://github.com/chinedufn/percy

[50]

Seed: https://github.com/seed-rs/seed

[51]

Perseus: https://github.com/arctic-hen7/perseus

[52]

Sycamore: https://github.com/sycamore-rs/sycamore

[53]

dprint-plugin-typescript: https://github.com/dprint/dprint-plugin-typescript

[54]

moon: https://github.com/moonrepo/moon

[55]

Rustle: https://github.com/pintariching/rustle

[56]

typed-html: https://github.com/bodil/typed-html

[57]

Rolldown: https://github.com/rolldown-rs/rolldown

[58]

Relay: https://github.com/facebook/relay/tree/main/compiler

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/ghoqI34_UgkHh82V2igMYg