思凡资源网

思凡资源网

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

sifan10 0 45 次浏览 技术文章

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

前言

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+项目中使用。

Actix Web

Actix Web 是一个强大、实用且速度极快的 Rust 网络框架。

Actix Web具有以下明显特点：

  • 支持 HTTP/1.x 和 HTTP/2
  • 支持Streaming and pipelining
  • 带有可选宏的强大请求路由
  • 完全兼容 Tokio，保持活动和缓慢的请求处理
  • 客户端/服务器 WebSockets 支持，透明内容压缩/解压缩（br、gzip、deflate、zstd）
  • Multipart streams和静态资产
  • 支持 OpenSSL 或 Rustls 的 SSL ，中间件（Logger、Session、CORS 等）
  • 与 awc HTTP 客户端集成，在稳定的 Rust 1.59+ 上运行

目前Actix Web在Github上已经有16.8K的star，fork数超过1.5K+，在超过40.7K+项目中使用。

本文总结

本文主要和大家介绍Rust 生态的10个优秀前端框架。因为篇幅有限，文章并没有过多展开，如果有兴趣，可以直接在我主页继续阅读单框架介绍，但是文末的参考资料提供了大量优秀文档以供学习。

参考资料

https://github.com/yewstack/yew

https://github.com/koute/stdweb

https://github.com/chinedufn/percy

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

https://github.com/DioxusLabs/dioxus

https://github.com/actix/actix-web

原文链接：，转发请注明来源！
思凡资源网 › 技术文章 › 值得收藏!基于 Rust 的10个优秀热门前端框架!