百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

让 Rust 火遍前端圈的 10 个明星项目!

yuyutoo 2025-03-28 23:10 4 浏览 0 评论

家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!

高级前端进阶

前言

Rust 由前 Mozilla 开发人员 Graydon Hoare 于 2006 年创建,作为 C++ 语言的替代品。 可用于创建网络软件、嵌入式计算机和分布式服务、命令行工具等等。

在 Stack overflow 2020 的调查中,Rust 被选为最受欢迎的编程语言第一名,这是因为 86% 的开发人员表示会继续在开发项目中使用它。 其实,自 2016 年以来,Rust 一直在调查中获胜。在 Tiobe 指数上,Rust 的受欢迎程度也在逐步上升。

根据2023年的最新数据,Rust在所有语言的排名中处于第20位,小于 Go(11)< PHP(10)< JavaScript(7)< Java(4)< C++(3) < C(2)< Python(1)。但是从整体数据来看,Rust的使用量已经在逐步增加(+0.16),而PHP(-0.49)、Go(-0.12)都处于下降阶段。

同时从下图就能看出,2012年到2023年的 tiobe 指数表明,Rust几乎处于明显的上升趋势,而且非常亮眼。从Rust的企业覆盖来说已经算是火的不能再火了。比如:微软打算将部分基建从C++过渡到Rust,谷歌宣布支持使用 Rust 开发 Chromium,Dropbox、Sentry、Amazon 和 Mozilla等也在积极布局Rust,甚至Linux内核都已经支持Rust开发等。

既然 Rust 如此受欢迎,今天就带着大家一起看看 Rust 如何火到了前端圈,介绍几个基于Rust 开发的优秀前端项目。当然,针对每一个项目都不会过多的展开,如果比较感兴趣可以继续在我的主页阅读。话不多说,直接开始!

SWC

SWC(Speedy Web Compiler) 是一个可扩展的基于 Rust 的平台,用于下一代快速开发工具。 Next.js、Parcel 和 Deno 等工具以及 Vercel、字节、腾讯等诸多互联网公司都在使用 SWC。

在 Github 上,SWC 已经有超过 26.3k 的 star 和 1k 的 fork,每周的平均下载量达到了 1983k。目前有超过 6.2k 的项目使用 SWC、项目贡献人数也达到了 200+,增长势头非常迅猛。可通过如下命令一键安装、试用:

npm i -D @swc/cli @swc/core

SWC 可用于编译和打包工作,是一个超快速的 JavaScript 编译器。 对于编译,SWC 读取 JavaScript / TypeScript 文件,并输出所有主流浏览器都支持的代码。在性能上,SWC 比其他打包方案具有明显的优势。数据表明,使用 SWC 替换 Babel ,打包速度提升20x~60x!

Turbo

Turbo的logo

Turbo 是用 Rust 编写的用于前端开发的下一代工具链。 它由3个主要部分组成:

  • Turbopack:增量打包器(Webpack 的后继者
  • Turborepo:增量构建系统
  • Turbo 引擎:低级增量计算和记忆引擎

Turbopack 建立在 Turbo 的增量架构之上,Turbo 可以缓存程序中任何函数的执行结果。 当程序再次运行时,函数不会重新运行而是直接从缓存读取,除非函数的输入内容发生变化。 这种细粒度的架构调整使得程序能够在函数级别跳过重复大量工作,最终给打包性能带来明显的提升。可以通过如下命令一键创建Turbopack项目:

npx create-next-app --example with-turbopack

数据表明:在大型应用程序上,Turbopack更新速度比 Webpack 快 700 倍。与Vite相比,在具有 5,000 个模块的应用程序上,Turbopack 需要 4 秒才能启动,而 Vite(带有 SWC)需要 16.6 秒。

Tauri

Tauri是一个为所有桌面平台构建小巧、快速的二进制文件的框架。 开发人员可以集成任何编译为 HTML、JS 和 CSS 的前端框架来构建用户界面。Tauri 是目前最流行的 Electron 替代方案,通过使用 Rust 和 Webview2 成功解决了 Electron 的包体积大、内存占用高的诸多问题。

Tauri在设计上保证安全性、高性能、以及与所有前端框架的兼容,允许为所有桌面平台(包括 macOS、Windows 和 Linux 操作系统)创建可执行应用程序。

图1:什么是Tauri?

目前,Tauri 在Github上拥有 59.7K 星和 1.5K GitHub 分支。所以,目前使用Electron方案的桌面程序如果成本不大,可以考虑下使用Tauri。可通过下面命令一键创建Tauri项目:

npm create tauri-app

Deno

Deno(/dino/,发音为 dee-no)是一个安全的 JavaScript、TypeScript 和 WebAssembly 运行时,为开发人员提供出色的研发体验。 其建立在 V8、Rust 和 Tokio 之上,由以下几个核心部分组成:

  • Rust(Deno 的核心是用 Rust 编写的,Node 的核心是用 C++ 编写的)
  • Tokio(用 Rust 编写的事件循环)
  • TypeScript(Deno 开箱即用地支持 JavaScript 和 TypeScript)
  • V8(Google 的 JavaScript 运行时用于 Chrome 和 Node 等)

Deno 具有沙盒功能,更加安全,支持开箱即用的 TypeScript 和可靠的标准包集合。 尽管如此,Deno 尚未被视为真正的 Node.js 竞争者。 最大的劣势是缺失了目前 Node.js 生态多达 150 万的通用 npm 包。 相比之下,目前只有大约 5000 个 Deno 模块可用。

当然,随着Deno V1.31的发布,其和Node.js已经越来越近了。

注意:从性能上说,在HTTP 吞吐量、请求延迟等方面Node.js和Deno也是各有所长

Rome

Rome 是 Babel 、Yarn团队作者做的基于 Nodejs 的前端基建全家桶,包含但不限于: Babel、 ESLint、webpack,、Prettier、Jest等等,目前已经成功迁移到Rust。

Rome 是个全家桶 API,所以开发者只需要 yarn add rome 就完成了所有环境准备工作。

  • rome bundle :打包项目。
  • rome compile :编译单个文件。
  • rome develop :调试项目。
  • rome parse :解析文件抽象语法树。
  • rome analyzeDependencies: 分析依赖。

Rome 还将文件格式化与 Lint 合并为了 rome check 命令,并提供了友好 UI 终端提示。以下是 Rome 的核心特点:

  • 快速用 Rust 和受 rust-analyzer 启发的创新架构构建,能够更快地完成更多工作。
  • 简单零配置,但支持选项扩展
  • 可扩展旨在处理任何规模的代码库,专注于产品而不是工具。
  • 高优化通过紧密的内部集成,能够重用以前的工作,并且对一个工具的任何改进都会改进它们。
  • 可操作且信息丰富避免模糊的错误消息,当告诉开发者问题时,会准确告诉开发者问题出在哪里以及如何解决
  • 开箱即用使用的所有语言功能都开箱支持,比如 TypeScript 和 JSX 的支持

lightningcss

用 Rust 编写的极其快速的 CSS 解析器、转换器和代码压缩器。将它与 Parcel 一起使用,作为独立的库或 CLI,或通过插件与任何其他工具一起使用。

  • 速度极快:解析和缩小大文件在几毫秒内完成,通常输出比其他工具小得多。
  • 类型化的属性值:许多其他 CSS 解析器将属性值视为一系列未类型化的标记。 这意味着每个想要对这些值执行某些操作的转换器都必须重复解析,从而导致重复工作和不一致。 Lightning CSS 使用 CSS 规范中的语法解析所有值,并为每个属性公开特定的值类型。
  • 浏览器级解析器:Lightning CSS 建立在由 Mozilla 创建并由 Firefox 和 Servo 使用的 cssparser 和选择器 crates 的基础上。
  • 代码压缩:lightning CSS 的主要目的之一是缩小 CSS 以使其更小。
  • 支持供应商前缀:Lightning CSS 接受浏览器目标列表,并自动添加供应商前缀。
  • 浏览器列表配置:Lightning CSS 支持选择加入浏览器列表配置
  • 语法检测:Lightning CSS 解析现代 CSS 语法,并根据浏览器目标在需要时生成更兼容的输出。

Yew

Yew 是一个现代 Rust 框架,用于使用 WebAssembly 创建多线程前端 Web 应用程序。Yew具有一个宏,用于使用 Rust 表达式声明交互式 HTML。 在 React 中使用过 JSX 的开发人员在使用 Yew 时应该会很轻松。

Yew通过最小化每个页面呈现的 DOM API 调用并轻松将复杂处理交给后台Web Worker来实现高性能。同时,Yew支持与JavaScript 的互操作性,允许开发人员利用 NPM 包并与现有的 JavaScript 应用程序集成。

注意:Yew 还未达到稳定的1.0版本,后续版本改动可能会带来破坏性改动。

WRY

WRY是Rust 中的跨平台 WebView 渲染库,支持所有主要桌面平台,如 Windows、macOS 和 Linux等等。

WRY 连接各个平台的 Web 引擎,并提供易于使用和统一的接口来渲染 WebView。它还将 TAO 重新导出为事件循环和窗口创建的模块。创建窗口和浏览网站的最小示例代码如下:

fn main() -> wry::Result<()> {
  use wry::{
    application::{
      event::{Event, StartCause, WindowEvent},
      event_loop::{ControlFlow, EventLoop},
      window::WindowBuilder,
    },
    webview::WebViewBuilder,
  };

  let event_loop = EventLoop::new();
  let window = WindowBuilder::new()
    .with_title("Hello World")
    .build(&event_loop)?;
  let _webview = WebViewBuilder::new(window)?
    .with_url("https://tauri.studio")?
    .build()?;

  event_loop.run(move |event, _, control_flow| {
    *control_flow = ControlFlow::Wait;

    match event {
      Event::NewEvents(StartCause::Init) => println!("Wry has started!"),
      Event::WindowEvent {
        event: WindowEvent::CloseRequested,
        ..
      } => *control_flow = ControlFlow::Exit,
      _ => (),
    }
  });
}

WGPU

WebGPU 是由 W3C 发布的规范,目标是让网页代码能安全可靠地访问 GPU 功能。其实现方式借鉴了 Vulkan API,会翻译到宿主硬件所用的各式 API(如 DirectX、Metal、Vulkan 等)上执行。

WGPU是基于WebGPU API的Rust的安全且便携式图形库。 它适用于通用图形,并在GPU上计算。使用WGPU的应用也可以在Vulkan,Metal,DirectX 11/12和OpenGL ES上本地运行,以及WebGPU和WebGL2上的WebAssembly浏览器上运行。

Napi-rs

NAPI-RS 是一个框架,用于在 Rust 中构建预编译的 Node.js 插件(Addons)。

NAPI-RS具有以下特点:

  • 带来node.js的本地性能
  • ♂内存安全,由Rust编译器保证
  • 在Node.js和Rust之间通过Buffer 和 TypedArray实现零复制数据
  • 几行代码快速实现并行操作
use napi_derive::napi;
#[napi]
fn fibonacci(n: u32) -> u32 {
  match n {
    1 | 2 => 1,
    _ => fibonacci(n - 1) + fibonacci(n - 2),
  }
}

兼容 CommonJS 和 esm,同时自动生成 .d.ts 文件。

本文总结

本文主要和大家介绍让 Rust 火遍前端圈的 几个明星项目,包括:SWC、Turbopack 、Deno 、Tauri、Rome、lightningcss 、Yew、WRY、WGPU、NAPI-RS等等。因为篇幅有限,文章并没有过多展开,针对其中的任何一个项目我都有单独出文章进行详细介绍,大家可以从我的主页查看、阅读。如果有兴趣,文末的参考资料提供了大量优秀文档以供学习。


参考资料

https://swc.rs/

https://wgpu.rs/

https://github.com/swc-project/swc

https://tauri.app/

https://rome.tools/

https://juejin.cn/post/7033196853218770980

https://dev.to/hackmamba/exploring-yew-the-rust-based-frontend-framework-as-a-vue-developer-3915

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

相关推荐

深度解读Spring框架的核心原理

深度解读Spring框架的核心原理在Java开发的世界里,提到Spring框架,就像提起一位久经沙场的老将,它几乎成了企业级应用开发的代名词。那么,这个被无数开发者膜拜的框架究竟有何独特之处?今天,我...

「Spring认证」Spring 框架概述

Spring是最流行的企业Java应用程序开发框架。全球数以百万计的开发人员使用SpringFramework来创建高性能、易于测试和可重用的代码。Spring框架是一个开源的Java...

学习Spring框架 这一篇就够了

1.spring概述1.1Spring是什么(理解)...

Spring框架双核解析:IOC与AOP的本质与实战

#Spring核心#IOC容器#AOP编程#Java框架设计...

Spring Boot与传统Spring框架的对比:探索Java开发的新境界

SpringBoot与传统Spring框架的对比:探索Java开发的新境界在Java生态系统中,Spring框架无疑是一个里程碑式的存在。从最初的简单依赖注入容器,到如今覆盖企业级开发方方面面的庞大...

Spring MVC框架源码深度剖析:从入门到精通

SpringMVC框架源码深度剖析:从入门到精通SpringMVC框架简介SpringMVC作为Spring框架的一部分,为构建Web应用程序提供了强大且灵活的支持。它遵循MVC(Model-V...

Spring框架入门

一.spring是什么?Spring是分层...

程序员必知必会技能之Spring框架基础——面向切面编程!

面向切面编程AOP(AspectOrientedProgramming)与OOP(ObjectOrientedProgramming,面向对象编程)相辅相成。AOP提供了与OOP不同的抽象软件结...

Spring Security安全框架深度解读:为你的应用穿上“钢铁铠甲”

SpringSecurity安全框架深度解读:为你的应用穿上“钢铁铠甲”在现代网络世界里,保护我们的应用程序免受各种威胁攻击至关重要。而在这个过程中,SpringSecurity框架无疑是我们最可...

Spring框架的设计哲学与实现:打造轻量级的企业级Java应用

Spring框架的设计哲学与实现:打造轻量级的企业级Java应用Spring框架自2003年诞生以来,已成为企业级Java应用开发的代名词。它不仅仅是一个框架,更是一种设计理念和哲学的体现。本文将带你...

Spring框架深度解析:从核心原理到底层实现的全方位避坑指南

一、Spring框架核心概念解析1.控制反转(IoC)与依赖注入(DI)Spring的核心思想是通过IoC容器管理对象的生命周期和依赖关系。传统开发中,对象通过new主动创建依赖对象,导致高耦合;而S...

Java框架 —— Spring简介

简介一般来说,Spring指的是SpringFramework,它提供了很多功能,例如:控制反转(IOC)、依赖注入...

Spring 框架概述,模块划分

Spring框架以控制反转(InversionofControl,IoC)和面向切面编程(Aspect-OrientedProgramming,AOP)为核心,旨在简化企业级应用开发,使开发者...

spring框架怎么实现依赖注入?

依赖注入的作用就是在使用Spring框架创建对象时,动态的将其所依赖的对象注入到Bean组件中,其实现方式通常有两种,一种是属性setter方法注入,另一种是构造方法注入。具体介绍如下:●属性set...

Spring框架详解

  Spring是一种开放源码框架,旨在解决企业应用程序开发的复杂性。一个主要优点就是它的分层体系结构,层次结构让你可以选择要用的组件,同时也为J2EE应用程序开发提供了集成框架。  Spring特征...

取消回复欢迎 发表评论: