rust写前端真香

作者：weixin_40725706 | 2024-05-29 06:19:16

踩

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"1
2
3
4
5
6
7

在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 component
    link: ComponentLink<Self>,
    value: i64,
}

impl Component for Model {
    type Message = Msg;
    type Properties = ();

    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            link,
            value: 0,
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::AddOne => {
                self.value += 1;
                // the value has changed so we need to
                // re-render for it to appear on the page
                true
            }
        }
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        // Should only return "true" if new properties are different to
        // previously received properties.
        // This component has no properties so we will always return "false".
        false
    }

    fn view(&self) -> Html {
        html! {
            <div>
                <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

这里要注意的地方是callback函数会触发update, 那update到底应该去做什么由消息决定。 Msg就是个消息的枚举，根据不同的消息做不同的事。

再写个index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>sealer cloud</title>
        <p>安装k8s就选sealer</p>
  </head>
</html>1
2
3
4
5
6
7

运行app

trunk是一个非常方便的wasm打包工具

cargo install trunk wasm-bindgen-cli
rustup target add wasm32-unknown-unknown
trunk serve1
2

CSS

这个问题非常重要，我们肯定不希望我们写的UI丑陋，我这里集成的是 bulma

非常简单，只需要在index.html中加入css：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sealer Cloud</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  </head>
  <body>

  </body>
</html>1
2
3
4
5
6
7
8
9
10
11

然后我们的html宏里面就可以直接使用了：

    fn view(&self) -> Html {
        html! {
            <div>
            <nav class="navbar is-primary">
            <div class="navbar-brand navbar-item">
                { "Sealer Cloud" }
            </div>
            </nav>
            <section class="section">
                <div class="container">
                <h1 class="title">
                    { "[sealer](https://github.com/alibaba/sealer) is greate!" }
                </h1>
                <a class="button is-dark">
                  { "Button" }
                </a>
                <p class="subtitle">
                    { "安装k8s请用sealer, 打包集群请用sealer, sealer实现分布式软件Build&Share&Run！" } 
                </p>
                </div>
            </section>
            </div>
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

后续还会有路由使用，模块聚合，请求后台等系列文章，敬请期待！ kubernetes一键安装

sealer集群整体打包！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/640934