[WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端(1)- 起步及 crate 选择
💥 内容涉及著作权,均归属作者本人。若非作者注明,默认欢迎转载:请注明出处,及相关链接。
Summary: 《Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端》系列文章第一部分:起步及 crate 选择。介绍 Rust WebAssmbly 框架库的选择、工程的创建、yew 开发环境配置,以及编译和运行等。
Topics: rust graphql webassembly wasm yew trunk
在以前的构建 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
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
部分:
[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。
cargo install trunk wasm-bindgen-cli
依赖项 crate
我们目前仅是 yew 开发环境的初始配置,所以需要的依赖项 crate 仅为 yew 和 wasm-bindgen。我们使用 cargo-edit
工具,将它们加入到 frontend-yew 工程中。
cargo add yew wasm-bindgen
此时,frontend-yew 项目中的 Cargo.toml
文件内容如下:
[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
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
文件,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
</head>
</html>
构建工具 trunk 配置(可选)
trunk 的配置,目前是可选的。trunk 默认的端口是
8080
,笔者机器此端口已被占用。如果你的机器可以使用此端口,则暂不需要配置。如果你不想通过默认的8080
端口访问页面,请在 frontend-yew 目录中,创建trunk.toml
文件,代码如下:
[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 示例。本系列文章中,笔者将对其深入参考 ;-)
谢谢您的阅读!