查看原文
其他

Rust 在前端

lencx 浮之静 2023-08-01


题外话

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.

一种使每个人都能建立可靠和高效的软件的语言(系统级编程语言)。

特性

  • 高性能:速度极快且内存效率极高,没有运行时或垃圾收集器,它可以为性能关键的服务提供动力,在嵌入式设备上运行,并容易与其他语言集成。

  • 可靠性:丰富的类型系统和所有权模型保证了内存安全和线程安全(能够在编译时消除许多类错误)。

  • 生产力:Rust 有很棒的文档[6]、一个带有友好错误信息提示的编译器和一流的工具(一个集成的包管理器(cargo[7])和构建工具、具有自动完成和类型检查的智能多编辑器支持、一个自动格式化程序等等)。

Wiki: 在计算机科学中,垃圾回收(Garbage Collection,简称 GC)是指一种自动的存储器管理[8]机制。当某个程序占用的一部分内存空间不再被这个程序访问时,这个程序会借助垃圾回收算法向操作系统归还这部分内存空间。垃圾回收器可以减轻程序员的负担,也减少程序中的错误。垃圾回收最早起源于 LISP[9] 语言。Java[10]C#[11]Go[12]D 语言[13]都支持垃圾回收器。

生态

  • Command Line[14] - 利用 Rust 强大的生态系统快速开发出 CLI 工具。Rust 可以帮助你可靠地维护应用程序,并轻松地发布它。

  • WebAssembly[15] - 使用 Rust 来增强你的 JavaScript,每个 rust crate 都对应一个 js 模块,可以发布到 npm[16],用前端打包工具(webpack[17]vite[18]rollup[19] 等)进行捆绑。

  • Networking[20] - 可预测的性能。小巧的资源占用。稳如磐石的可靠性。Rust是网络服务的最佳选择(构建高性能服务器)。

  • Embedded[21] - 针对低资源的设备?需要低层次的控制而不放弃高层次的便利?Rust可以满足你的要求(嵌入式开发,内核开发等)。

Rust 助力前端

Rust 因其出色的表现,连续 7 年在 StackOverflow 调查中成为最受欢迎的语言(Stack Overflow Developer Survey 2022[22])。优秀的特性自然也受到了前端的青睐,很多大神开始基于 Rust 重写前端生态。

个人理解,不准确的地方欢迎讨论:Rust 之所以优秀是因为它借鉴了大量编程语言的优秀特性,通过其自身的类型系统,生命周期,所有权等概念将其统一起来,成为其安全可靠,高性能的重要保证(构建速度暂时不吐槽,毕竟团队也在不断努力提速中)。在编译阶段会对代码进行检查,抛出友好的错误,并给出大量指导性修改建议(很多时候都是编译器在教我写代码),这在别的语言似乎很难看到。

以下是整理的相关资源,欢迎补充(了解更多,可以关注 lencx/awesome[23])。

学习教程

  • Awesome Rust[24] - Rust 代码和资源的精选列表

  • Rust语言圣经 (Rust Course)[25] - 对标官方文档,对 Rust 语言进行全面且深入的讲解,辅以生动的示例和习题,语言诙谐幽默,值得一看

  • Rust语言中文社区[26] - 每天会发布大量和 Rust 生态相关的文章,适合碎片化时间浏览

  • Node.js ➤ Rust

    • 24 days from node.js to Rust[27] - 24 篇关于 Rust 入门的系列文章,用 Rust 重写常见的 JavaScript 任务(有大量对比示例代码)

    • Rust for Node developers[28] - 为 Node.js 开发人员介绍 Rust 编程语言

    • Rust for JavaScript peeps[29] - 了解 JS,想尝试 Rust,但不知道从哪里开始?这个给你!

  • ...

生态

  • Turbo[30] - Turbo 是用 Rust 编写的一个为 JavaScript 和 TypeScript 优化的增量捆绑器和构建系统(基于 SWC)

  • SWC (Speedy Web Compiler)[31] - 是一个用 Rust 编写的超快速 TypeScript / JavaScript 编译器

  • Deno[32] - JavaScript 和 TypeScript 的现代运行时

  • Rome[33] - 是用于 JavaScript、TypeScript、JSON、HTML、Markdown 和 CSS 的格式化程序、linter、捆绑程序等,用 Rust 编写

  • Boa[34] - 一个用 Rust 编写的实验性 Javascript 词法分析器、解析器和解释器。目前,它支持部分语言

  • Parcel[35] - Web 的零配置构建工具

    • Lightning CSS[36] - 一个非常快速的 CSS 解析器、转换器、捆绑器和压缩器

  • Lint

    • deno_lint[37] - 用 Rust 编写的 JavaScript 和 TypeScript 的超快 linter

    • RSlint[38] - 一个快速、可定制且易于使用的 JavaScript 和 TypeScript linter(处于早期开发阶段,不应在生产中使用)

  • nvm[39] - Node.js 版本管理

    • fnm[40] - 快速简单的 Node.js 版本管理器,基于 Rust

    • Volta[41] - JS Toolchains as Code

  • wasm-pack[42] - 将 Rust 生成 WebAssembly 的一站式工具(生成可发布的 npm 包)

    • rsw[43] - wasm-pack 的增强版 CLI,支持同时 watch,build,link 多个 rust crate

    • vite-plugin-rsw[44] - 基于 Vite 的 wasm-pack 插件(基于 rsw 实现)

  • Tauri[45] - 构建跨平台桌面应用,目前支持 macOSWindowsLinux,未来也会支持 iOS/iPadOSAndroid。后端使用 Rust,前端使用 HTML,CSS 和 JS(为 Electron[46] 的替代品)

  • Yew[48] - 是一个现代 Rust 框架,用于使用 WebAssembly 创建多线程前端 Web 应用程序,以下是 Yew 的替代品:

    • Percy[49] - 用于使用 Rust + WebAssembly 构建同构 Web 应用程序的模块化工具包

    • Seed[50] - 用于创建 Web 应用程序的 Rust 框架

    • Perseus[51] - 一个状态驱动的 Rust 网络开发框架,完全支持服务器端渲染和静态生成

    • Sycamore[52] - 用于在 Rust 和 WebAssembly 中创建响应式 Web 应用程序的库

  • dprint-plugin-typescript[53] - TypeScript 和 JavaScript 代码格式化插件。

  • moon[54] - 用 Rust 编写的用于 Web 生态系统的构建系统和 repo 管理工具

  • Rustle[55] - 用 Rust 重写的 Svelte 编译器

  • typed-html[56] - Type checked JSX for Rust

  • Rolldown[57] - 100% API 兼容的 Rust 版 Rollup,实现正在进行中(似乎停止更新)

  • Relay[58] - Relay 编译器使用 Rust 重写

  • ...


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


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存