Rust 与 WebAssembly 构建前端应用

Yew 是一种用于创建多线程前端网络应用程序的现代Rust框架，其使用 WebAssembly 技术实现性能优化。这个框架支持与 JavaScript 的互操作性，使之不仅能够执行 JS 代码，并且还能够在 Rust 和 JavaScript 之间进行双向通信。Yew 框架具备了类似于 React 和 Elm 的组件化设计模式，并且因为能够利用 Rust 强大的生态系统，所以在构建丰富且高性能的网络应用方面显得特别突出。

在本文中，我们将深入探索如何使用 Yew 框架来构建前端应用，并提供详细的步骤和丰富的示例来帮助你深刻理解如何开发 WebAssembly 前端应用。

创建一个新项目

首先，确保你已经安装了 Rust。然后，通过以下命令创建一个新项目:

cargo new --lib yew-app

切换到创建的项目目录中，并编辑 Cargo.toml 文件，添加 Yew 依赖。

[dependencies]
yew = "0.18"

配置多线程

Yew 框架支持多线程模型，可以通过 Web Workers 实现。这就需要对 index.html 和 Cargo 配置进行如下调整：

<!-- 你的 index.html 文件 -->
<script type="module">
  import init, { run_app } from './pkg/yew_app.js';
  async function main() {
    await init();
    run_app();
  }
  main()
</script>

在 Cargo.toml 中，你需要使用 wasm-bindgen 包来启用多线程支持。

[dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-rayon = "0.1.0"

构建组件

与 React 类似，Yew 也使用了组件化的模式。下面是一个简单的组件示例：

use yew::prelude::*;

pub struct MyComponent;

impl Component for MyComponent {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <div>
                {"Hello, Yew!"}
            </div>
        }
    }
}

组件交互性

要让组件具有交互性，你需要定义一些消息类型来处理用户交互。

use yew::prelude::*;

pub struct InteractiveComponent {
    link: ComponentLink<Self>,
    value: i64,
}

pub enum Msg {
    Increment,
    Decrement,
}

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

    fn create(ctx: &Context<Self>) -> Self {
        Self {
            link: ctx.link().clone(),
            value: 0,
        }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::Increment => {
                self.value += 1;
                true // Rerender this component
            }
            Msg::Decrement => {
                self.value -= 1;
                true
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <div>
                <button onclick={ctx.link().callback(|_| Msg::Increment)}>{ "Increment" }</button>
                <p>{ self.value }</p>
                <button onclick={ctx.link().callback(|_| Msg::Decrement)}>{ "Decrement" }</button>
            </div>
        }
    }
}

与 JavaScript 互操作

Yew 允许在 Rust 代码中调用 JavaScript 函数和在 JavaScript 中调用 Rust 函数。这通过 wasm-bindgen 桥接实现。

在 Rust 中调用 JS：

use wasm_bindgen::prelude::*;

#[wasm_bindgen(module = "/www/utils.js")]
extern "C" {
    fn alert(s: &str);
}

pub fn run_alert() {
    alert("Hello from Rust!");
}

在 JS 中调用 Rust：

import { run_alert } from './pkg/yew_app';

run_alert(); // This will call the Rust function and display an alert.

状态管理和外部数据获取

将状态管理与组件结合起来是构建高复杂性应用的关键。同时，你可能还需要调用外部 API 来获取数据。

use yew::prelude::*;
use yew::services::fetch::{FetchService, Request, Response};
use anyhow::Error;

#[derive(Clone, PartialEq)]
pub struct DataModel {
    /* ... fields representing the data ... */
}

#[derive(Properties, PartialEq)]
pub struct DataFetcherProps {
    // Props go here
}

pub enum Msg {
    GetData,
    ReceiveResponse(Result<DataModel, Error>),
}

pub struct DataFetcher {
    fetch_task: Option<FetchTask>,
}

impl Component for DataFetcher {
    type Message = Msg;
    type Properties = DataFetcherProps;

    fn create(ctx: &Context<Self>) -> Self {
        // Start the network request right away
        let callback = ctx.link().callback(|response: Response<Json<Result<DataModel, Error>>>| {
            let (meta, Json(data)) = response.into_parts();
            if meta.status.is_success() {
                Msg::ReceiveResponse(data)
            } else {
                panic!("Error")
            }
        });

        let request = Request::get("url-to-your-api")
            .body(Nothing)
            .expect("Could not build request.");
        let task = FetchService::fetch(request, callback).expect("Failed to start request");

        Self {
            fetch_task: Some(task),
        }
    }

    // ... other component methods ...
}