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

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

图片[1]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

高级前端‬进阶

前言

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

图片[2]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

在 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)都处于下降阶段。

图片[3]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

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

图片[4]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

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

Tauri

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

图片[5]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

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。

图片[6]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

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

stdweb

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

图片[7]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

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

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 组件。

图片[8]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

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

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

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

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

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

Seed

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

图片[9]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

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

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

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 应用程序。

图片[10]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

构建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 for App {
    fn view(&self) -> Node {
        node! {
            

"Minimal example"

{text(format!("Clicked: {}", self.click_count))}
} } fn update(&mut self, msg: Msg) -> Cmd { 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内容如下:


  
    
    Counter
    
        body { font-family: verdana, arial, monospace; }
        main {
            width:30px;
            height: 100px;
            margin:auto;
            text-align: center;
        }
        input, .count{
            font-size: 40px;
            padding: 30px;
        }
    
    
        import init from './pkg/counter.js';
        await init().catch(console.error);
    
  
  
  

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具有以下明显特点:

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

Iced

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

图片[11]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

Iced具有以下明显特点:

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

Gloo

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

图片[12]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

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

下面示例使用 gloo::events 来添加事件侦听器,并使用 gloo::timers 来创建超时设置。 Gloo创建一个 元素并向其添加一个“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 {
        // Create a `

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

Actix Web

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

图片[13]-值得收藏!基于 Rust 的10个优秀热门前端框架!-JieYingAI捷鹰AI

Actix Web具有以下明显特点:

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

本文总结

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

参考资料

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
来说点什么吧!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容