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 awaylet 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 ...
}