Rust 和 Wasm 的融合，使用 yew 构建 WebAssembly 标准的 web 前端

在以前的构建 Rust 异步 GraphQL 服务系列中，分别采用 tide async-graphql mongodb 和 actix-web async-graphql rbatis postgresql / mysql 开发了 GraphQL 服务后端。感兴趣的朋友可以参阅博文——

构建 Rust 异步 GraphQL 服务：基于 tide async-graphql mongodb，共计 4 篇。
基于 actix-web async-graphql rbatis postgresql / mysql 构建异步 Rust GraphQL 服务，也是共计 4 篇。

在 GraphQL 后端开发第一阶段的第 4 篇末尾，笔者提到过，本次 Rust web 的开发实践，全栈采用 Rust 生态。因此，web 前端的开发，也采用 Rust 生态中的前端技术，分别采用 Rust 生态中的 WebAssembly 框架 yew，以及 tide handlebars-rust 模板引擎来实现。

web 前端中，我们通过 GraphQL 服务后端 API，获取 GraphQL 数据并做以展示。

目前，Rust 官方在 WebAssembly 上投入了不少精力。Rust 社区中，Rust WebAssembly 的应用也比较热门，其文章和话题增长趋势显著。因此，我们追逐技术潮流，首先采用 WebAssembly 框架 yew 来实践 web 前端的开发。

Rust 环境的配置，cargo 工具的使用，以及本次实践的前后端分离设计等，在此不再赘述。您可以参阅本文开始提交的 2 个博文系列，进行快速了解。

Rust WebAssmbly 框架库的选择

Rust 生态中，目前较为成熟的 WebAssmbly 框架库有 yewstack/yew、seed-rs/seed，以及 chinedufn/percy。这 3 个框架，都非常优秀，推荐各位朋友去 github 给予其 star。

percy 已经在文档提到了服务器端渲染方案，结合实例和 API 文档来看，开发者投入了相当多的精力，以无私奉献。
seed 是 Rust 生态中较活跃的 WebAssembly 库，实例完善。且已经有可用于真实生产环境的样板案例 conduit，完成度很高，也非常美观。并且笔者粗略学习了其源码，编写方式也非常精简。seed 的主要开发者之一，Martin Kavík 正在开发针对 seed 的构建工具 seeder。结合 API 文档来看，是个设计和规划很优秀的库。
yew 是久经考验的 WebAssembly 库，贡献者众多，社区活跃。除了 API 文档，还拥有非常详尽的教程文档。

本次实践，因为未来版本的技术取舍和路线图方面，笔者选择 yew 框架。也许后续的拓展中，我们会对其它 2 个框架也做以实践体验。

工程的创建

在我们的实践项目根目录 tide-async-graphql-mongodb 或者 actix-web-async-graphql-rbatis 中，创建新的新的工程 frontend-yew。

GraphQL 服务后端，开源在 github，可以访问如下仓库获取源码：

tide-async-graphql-mongodb（本博客即在此仓库基础上扩展实现）
actix-web-async-graphql-rbatis

代码语言：javascript复制

cd tide-async-graphql-mongodb # 或 actix-web-async-graphql-rbatis
cargo new frontend-yew --vcs none

同时，需要在根目录的 Cargo.toml（不是 frontend-yew 目录中的 Cargo.toml）文件中，将 frontend-yew 项目添加到 workspace 部分：

代码语言：javascript复制

[workspace]
members = [
    "./backend", 
    "./frontend-handlebars", 
    "./frontend-yew"
]

yew 开发环境配置

工具类 crate

yew 项目构建工具方面，目前成熟可用的主要有 rustwasm 官方开发和维护的 wasm-pack 以及 Anthony Dodd 开发的 trunk。

wasm-pack 在对 yew 打包时，需要 node 环境和 rollup 或者 webpack 工具。而 trunk 则是完全的 Rust 技术栈开发，不需要 node 环境。并且代码有改动时，可自动化重新编译。也可指定启动服务时，自动在浏览器中打开页面等。

因此笔者选择 trunk，安装其需要 wasm-bindgen-cli 工具 crate。

代码语言：javascript复制

cargo install trunk wasm-bindgen-cli

依赖项 crate

我们目前仅是 yew 开发环境的初始配置，所以需要的依赖项 crate 仅为 yew 和 wasm-bindgen。我们使用 cargo-edit 工具，将它们加入到 frontend-yew 工程中。

代码语言：javascript复制

cargo add yew wasm-bindgen

此时，frontend-yew 项目中的 Cargo.toml 文件内容如下：

代码语言：javascript复制

[package]
name = "frontend-yew"
version = "0.1.0"
authors = ["我是谁？"]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
wasm-bindgen = "0.2.74"
yew = "0.18.0"

代码开发

实例代码来自 yew 官方示例，是一个计数器的应用。目前，我们是对基础开发环境的检测，因此代码暂不解释。但如果你熟悉 Rust 和 react.js，会发现代码可以猜出一个大概的意思。并不复杂。

`main.rs`

代码语言：javascript复制

use yew::prelude::*;

enum Msg {
    AddOne,
}

struct Model {
    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;

                true
            }
        }
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        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>();
}

`index.html`

在 frontend-yew 目录中，创建 index.html 文件，代码如下：

代码语言：javascript复制

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Yew App</title>
  </head>
</html>

构建工具 trunk 配置（可选）

trunk 的配置，目前是可选的。trunk 默认的端口是 8080，笔者机器此端口已被占用。如果你的机器可以使用此端口，则暂不需要配置。如果你不想通过默认的 8080 端口访问页面，请在 frontend-yew 目录中，创建 trunk.toml 文件，代码如下：

代码语言：javascript复制


[serve]
port = 3001
open = true

open 是指执行 trunk serve 命令时，是否自动在浏览器打开页面（代码修改后，trunk 自动重新编译时，不会打开浏览器页面）。其默认为 false。
注意：也可以将 index.html 文件不放在项目根目录，而是指定的配置位置（如 pulic、static 等）。但注意目前 trunk 在相对路径的识别方面，Windows 系统上会有些问题，如果你用的 Windows 系统，请注意这一点。Linux、macOS 无问题，为了各平台无缝切换，本文 index.html 文件直接放在 frontend-yew 目录中。

编译和运行

使用 trunk build 进行编译，我们会发现在 frontend-yew 目录中，出现了一个 dist 子目录。其中包含一个后缀为 *.wasm 的文件，即是我们 Rust 代码编译为 WebAssembly 格式的成果。

实际上，dist/index.html 文件也是对我们初始的 frontend-yew/index.html 文件的编译成果。后面的文章中，我们引入 icon、css/scss，以及 JavaScript 代码时，会对此进行介绍。

现在，我们运行命令 trunk serve。因为笔者配置了 trunk.toml，会自动在机器的默认浏览器新开一个标签 http://127.0.0.1:3001；如果你未配置 trunk.toml，则访问默认端口，请手动在浏览器新开页面 http://127.0.0.1:8080。

我们看看成果展现：是一个简单的计数器应用，点击加号，下方的数字会进行加 1 运算。

至此，yew 的开发环境已经搭建成功。

yew 示例项目：sansx/yew-graphql-demo。此项目是 sansx 老师开发的 yew 示例。本系列文章中，笔者将对其深入参考 ;-)

谢谢您的阅读，欢迎交流。

rust 网站 node.js javascript

0 人点赞

Rust 和 Wasm 的融合，使用 yew 构建 WebAssembly 标准的 web 前端 - 起步及 crate 选择

Rust WebAssmbly 框架库的选择

工程的创建

yew 开发环境配置

工具类 crate

依赖项 crate

代码开发

main.rs

index.html

构建工具 trunk 配置（可选）

编译和运行

`main.rs`

`index.html`