rust写前端真香

最新推荐文章于 2025-11-02 11:30:35 发布

原创

最新推荐文章于 2025-11-02 11:30:35 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Rust的Yew框架结合WebAssembly开发前端应用。通过Rust编译成WASM，告别JavaScript，实现前后端全栈Rust。详细讲解了创建app、运行流程及CSS集成，展示Rust在前端的优秀性能。

最近在考虑给sealer 写个云产品，我们叫sealer cloud, 让用户在线就可以完成k8s集群的自定义，分享，运行。

作为一个先进的系统，必须有高大上的前端技术才能配得上！为了把肌肉秀到极限，决定使用 rust+wasm实现。

这里和传统后端语言在后端渲染html返回给前端完全不一样，是真正的把rust代码编译成wasm运行在浏览器中

从此和js说拜拜，前后端都用rust写

不得不佩服rust的牛逼，从内核操作系统一直写到前端，性能还这么牛逼。

yew框架

yew 就是一个rust的前端框架。通过一系列工具链把rust代码编译成wasm运行在浏览器中。

创建一个app

cargo new yew-app

在Cargo.toml中配置如下信息：

[package]
name = "yew-app"
version = "0.1.0"
edition = "2018"

[dependencies]
# you can check the latest version here: https://crates.io/crates/yew
yew = "0.18"

在src/main.rs中写代码：

use yew::prelude::*;

enum Msg {
    AddOne,
}

struct Model {
    // `ComponentLink` is like a reference to a component.
    // It can be used to send messages to the compon