值得收藏!基于 Rust 的10个优秀热门前端框架!

liuian 2024-12-04 13:46 62 浏览

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

前言

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 如此受欢迎，今天就带着大家一起看看10个基于Rust的前端框架，当然也只是所有Rust框架中的典型代表。针对每一个项目都不会过多的展开，如果比较感兴趣可以继续在我的主页阅读。话不多说，直接开始！

Tauri

Tauri 是一个流行的框架，用于为所有流行的桌面操作系统创建体积小、运行快的二进制文件。为了创建UI界面，开发人员可以合并任何编译为 HTML、JavaScript 和 CSS 的前端框架。该应用程序的后端是一个 rust-sourced 二进制文件，带有一个 API，前端可以使用该 API 进行通信。

Tauri 团队孵化和维护 WRY，以创建一个统一的系统 webview 界面（以及菜单和任务栏等其他好东西），利用 macOS 上的 WebKit、Windows 上的 WebView2 和 Linux 上的 WebKitGTK。 Tauri 应用目前在 macOS 和 Windows 上使用 tao 作为窗口处理库，在 Linux 上使用 gtk。

Yew

Yew 是一个优秀的 Rust 框架，用于构建 WebAssembly 多线程前端 Web 应用程序。它包括一个使用 Rust 表达式定义交互式 HTML 的宏。在 React 中使用过 JSX 的开发人员应该非常熟悉 Yew。

Yew最大限度地减少了每个页面呈现的 DOM API 调用以实现高效率，并且Yew充分利用Web Worker的能力。它使开发人员能够通过支持 JavaScript 互操作性来使用 NPM 包并与现有的 JavaScript 应用程序交互。Yew具有以下明显特征：

基于组件的框架
可移植的底层语言
支持所有主要的现代浏览器
使用自己的虚拟 DOM 表示

stdweb

stdweb前端标准库使 Rust 能够直接与 JavaScript Web API 交互。它旨在通过促进两种语言之间的简单 API 绑定以提高速度和性能，使开发人员能够在 Rust 中生成功能齐全的 JavaScript 应用程序。

stdweb 支持闭包、任意结构和常见的 Web API 元素，如 DOM、事件和窗口。stdweb具有以下明显特征：

允许高度的互操作性
也支持闭包
为 Web API 提供 Rust 绑定
支持实验性 Parcel 插件

stdweb 可以直接将 JavaScript 代码嵌入到 Rust 中：

let message = "Hello, 世界!";
let result = js! {
    alert( @{message} );
    return 2 + 2 * 2;
};

println!( "2 + 2 * 2 = {:?}", result );

可以通过如下方式使用闭包：

let print_hello = |name: String| {
    println!( "Hello, {}!", name );
};

js! {
    var print_hello = @{print_hello};
    print_hello( "Bob" );
    print_hello.drop(); // Necessary to clean up the closure on Rust's side.
}

Percy

Percy 是一组 Rust 库，用于创建由 WebMeeting 驱动的前端 Web 应用程序。 Percy 支持服务器端渲染，擅长创建对搜索引擎友好的单页应用程序 (SPA)。

为了创建 DOM，Percy 提供了一个 html！宏。这些可用于实用程序后端中的操作或呈现为前端的 DOM 组件。

可以使用 Percy 构建仅支持服务器端渲染、仅支持客户端渲染或同时支持服务器端和客户端渲染的应用程序。Percy 出现时间比较晚，但该项目在 Github 上有超过 2.1K星。Percy具有以下明显特征：

允许构建搜索引擎友好的浏览器应用程序
Rust 中的 CSS
支持服务端渲染

Percy 在稳定的 Rust 上编译，但有一个警告：在 nightly Rust 上，您可以创建不带引号的文本节点。

// Nightly Rust does not require quotes around text nodes.
html! { <div>My text nodes here </div> };

在稳定的 Rust 上，引号是必需的。

// Stable Rust requires quotes around text nodes.
html! { <div>{ "My text nodes here " }</div> };

Seed

Seed 是一个前端框架，用于创建性能驱动且可靠的 Web 应用程序，它也具有类似 Elm 的架构，具有最少的配置和样板文件，并具有清晰的文档，使任何人都可以轻松上手。

使用 Seed，开发者可以创建具有 Rust 应用的所有优点，包括速度、安全性等等。Seed具有以下明显的特点：

开箱即用的方法
清晰而广泛的文档
完全用 Rust
编写 WebAssembly

可以使用如下命令快速开始:

cargo install cargo-generate
cargo install trunk
cargo install wasm-bindgen-cli
cargo generate --git https://github.com/seed-rs/seed-quickstart.git --name seed-quickstart
cd seed-quickstart
trunk serve

如果抛出有关 wasm 链接到不同版本的 wasm-bindgen 的错误，只需按照建议运行 cargo update -p wasm-bindgen即修复链接。此时可以在 localhost:8080 看到一个正在运行的计数器应用程序。

Sauron

Sauron 是一个多功能的 Web 框架和库，用于构建客户端和/或服务器端 Web 应用程序，非常注重简单性。它适用于开发使用渐进式渲染的 Web 应用程序。

构建src/lib.rs文件:

use sauron::prelude::*;

#[derive(Debug)]
enum Msg {
    Click,
}

struct App {
    click_count: u32,
}

impl App {
    pub fn new() -> Self {
        App { click_count: 0 }
    }
}

impl Application<Msg> for App {
    fn view(&self) -> Node<Msg> {
        node! {
            <main>
                <h1>"Minimal example"</h1>
                <div class="some-class" id="some-id" {attr("data-id", 1)}>
                    <input class="client"
                            type="button"
                            value="Click me!"
                            key=1
                            on_click={|_| {
                                log::trace!("Button is clicked");
                                Msg::Click
                            }}
                    />
                    <div>{text(format!("Clicked: {}", self.click_count))}</div>
                    <input type="text" value={self.click_count}/>
                </div>
            </main>
        }
    }

    fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
        log::trace!("App is updating with msg: {:?}", msg);
        match msg {
            Msg::Click => self.click_count += 1,
        }
        Cmd::none()
    }
}

#[wasm_bindgen(start)]
pub fn main() {
    console_log::init_with_level(log::Level::Trace).unwrap();
    console_error_panic_hook::set_once();
    Program::mount_to_body(App::new());
}

HTML内容如下:

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <title>Counter</title>
    <style type="text/css">
        body { font-family: verdana, arial, monospace; }
        main {
            width:30px;
            height: 100px;
            margin:auto;
            text-align: center;
        }
        input, .count{
            font-size: 40px;
            padding: 30px;
        }
    </style>
    <script type=module>
        import init from './pkg/counter.js';
        await init().catch(console.error);
    </script>
  </head>
  <body>
  </body>
</html>

Dioxus

Dioxus 是一个可移植、高性能且符合人体工程学（Ergonomic Framework）的框架，用于在 Rust 中构建跨平台用户界面。

fn app(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);

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

Dioxus 可用于开发网络应用程序、桌面应用程序、静态站点、移动应用程序、TUI 应用程序、实时视图应用程序等。 Dioxus 完全与渲染器无关，可以用作任何渲染器的平台。如果熟悉 React，那么可以轻松上手Dioxus。

Dioxu具有以下明显特点：

不到 10 行代码即可原生运行的桌面应用程序（没有 Electron）
令人难以置信的人体工程学和强大的状态管理
全面的内联文档 - 所有 HTML 元素、侦听器和事件上手指南。
极快和极高的内存效率
集成热重载以实现快速迭代
一流的异步支持协程

目前Dioxus在Github上已经有7.4K的star，在超过500+项目中使用。

Iced

Rust 的跨平台 GUI 库，专注于简单性和类型安全，灵感来自Elm。

Iced具有以下明显特点：

简单易用的内置 API
类型安全的反应式编程模型
跨平台支持（Windows、macOS、Linux 和 Web）
响应式布局、优秀性能
支持内置小部件（包括文本输入、滚动条等！），同时支持自定义小部件
对异步操作的一流支持、生态系统模块化
与渲染器无关的本机运行时，支持与现有系统集成
两个利用 wgpu 和 glow 的内置渲染器，iced_wgpu 支持 Vulkan、Metal 和 DX12
iced_glow 支持 OpenGL 2.1+ 和 OpenGL ES 2.0+

目前Dioxus在Github上已经有18.3K的star，fork数超过800+，在超过2K+项目中使用。

Gloo

Gloo 是一个模块化的工具包。它是一组库，为浏览器 API 提供方便的 Rust 包装器。由于直接使用 web-sys/js-sys 非常具有挑战性且不方便，gloo 提供了原始绑定的包装器，以简化这些 API 的使用。

因此，Gloo被称为“工具包”而不是“库”或“框架”。 Gloo 应该是一组灵活的实用工具箱，可以单独或一起使用。Gloo具有以下特征：

充分利用 Rust 和 Wasm 库生态系统
速度快
模块化工具包
体积小
支持小型、有针对性的库和 Web 应用程序

下面示例使用 gloo::events 来添加事件侦听器，并使用 gloo::timers 来创建超时设置。 Gloo创建一个 <button> 元素并向其添加一个“click”事件侦听器。每当单击按钮时，它都会启动一秒超时，将按钮的文本内容设置为“Hello from one second ago!”。

use gloo::{events::EventListener, timers::callback::Timeout};
use wasm_bindgen::prelude::*;

pub struct DelayedHelloButton {
    button: web_sys::Element,
    on_click: events::EventListener,
}

impl DelayedHelloButton {
    pub fn new(document: &web_sys::Document) -> Result<DelayedHelloButton, JsValue> {
        // Create a `<button>` element.
        let button = document.create_element("button")?;

        // Listen to "click" events on the button.
        let button2 = button.clone();
        let on_click = EventListener::new(&button, "click", move |_event| {
            // After a one second timeout, update the button's text content.
            let button3 = button2.clone();
            Timeout::new(1_000, move || {
                button3.set_text_content(Some("Hello from one second ago!"));
            })
            .forget();
        });

        Ok(DelayedHelloButton { button, on_click })
    }
}

目前Gloo在Github上已经有1.4K的star，fork数超过100+，在超过5.6K+项目中使用。