budshome (blog: 芽之家) shared the aphorism --
不崇拜任何一个伟人,不蔑视任何一位凡人! -- 佚名

[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 + mongodbactix-web + async-graphql + rbatis + postgresql / mysql 开发了 GraphQL 服务后端。感兴趣的朋友可以参阅博文——

在 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/yewseed-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,可以访问如下仓库获取源码:

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 示例。本系列文章中,笔者将对其深入参考 ;-)

谢谢您的阅读!


Rust 生态与实践

Related Articles

  1. [Rust] Rust 官方周报 395 期(2021-06-16)
  2. [Rust] Rust 1.53.0 明日发布,关键新特性一瞥
  3. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(3)- rhai 脚本、静态/资源文件、环境变量等
  4. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(2)- 获取并解析 GraphQL 数据
  5. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(1)- crate 选择及环境搭建
  6. [Rust] Rust 官方周报 394 期(2021-06-09)
  7. [Rust] Rust web 前端库/框架评测,以及和 js 前端库/框架的比较
  8. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(4)- 获取 GraphQL 数据并解析
  9. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(3)- 资源文件及小重构
  10. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端(2)- 组件和路由
  11. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端(1)- 起步及 crate 选择
  12. [Rust] Rust 官方周报 393 期(2021-06-02)
  13. [Rust] Rust 官方周报 392 期(2021-05-26)
  14. [Rust] Rust 中,对网址进行异步快照,并添加水印效果的实践
  15. [Rust] Rust 官方周报 391 期(2021-05-19)
  16. [Rust] Rust,风雨六载,砥砺奋进
  17. [Rust] 为什么我们应当将 Rust 用于嵌入式开发?
  18. [Rust] Rust 官方周报 390 期(2021-05-12)
  19. [Rust] Rust + Android 的集成开发设计
  20. [Rust] Rust 1.52.1 已正式发布,及其新特性详述
  21. [Rust] 让我们用 Rust 重写那些伟大的软件吧
  22. [Rust] Rust 1.52.0 已正式发布,及其新特性详述
  23. [Rust] Rust 官方周报 389 期(2021-05-05)
  24. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(4) - 变更服务,以及小重构
  25. [Rust] Rust 1.52.0 稳定版预发布测试中,关键新特性一瞥
  26. [Rust] Rust 生态中,最不知名的贡献者和轶事
  27. [Rust] Rust 基金会迎来新的白金会员:Facebook
  28. [Rust] Rustup 1.24.1 已官宣发布,及其新特性详述
  29. [Rust] Rust 官方周报 388 期(2021-04-28)
  30. [Rust] Rust 官方周报 387 期(2021-04-21)
  31. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(4)- 变更服务,以及第二次重构
  32. [Rust] Rustup 1.24.0 已官宣发布,及其新特性详述
  33. [Rust] basedrop:Rust 生态中,适用于实时音频的垃圾收集器
  34. [Rust] Rust 编译器团队对成员 Aaron Hill 的祝贺
  35. [Rust] Jacob Hoffman-Andrews 加入 Rustdoc 团队
  36. [机器人] 为什么应将 Rust 引入机器人平台?以及机器人平台的 Rust 资源推荐
  37. [Rust] rust-lang.org、crates.io,以及 docs.rs 的管理,已由 Mozilla 转移到 Rust 基金会
  38. [Rust] Rust 官方周报 386 期(2021-04-14)
  39. [Rust] Rust 编译器(Compiler)团队 4 月份计划 - Rust Compiler April Steering Cycle
  40. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(3) - 重构
  41. [Rust] 头脑风暴进行中:Async Rust 的未来熠熠生辉
  42. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(2) - 查询服务
  43. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务 - 起步及 crate 选择
  44. [Rust] Rust 2021 版本特性预览,以及工作计划
  45. [Rust] Rust 用在生产环境的 42 家公司
  46. [Rust] 构建最精简的 Rust Docker 镜像
  47. [Rust] Rust 官方周报 385 期(2021-04-07)
  48. [Rust] 使用 Rust 做异步数据采集的实践
  49. [Rust] Android 支持 Rust 编程语言,以避免内存缺陷
  50. [Rust] Android 平台基础支持转向 Rust
  51. [Rust] Android 团队宣布 Android 开源项目(AOSP),已支持 Rust 语言来开发 Android 系统本身
  52. [Rust] RustyHermit——基于 Rust 实现的下一代容器 Unikernel
  53. [Rust] Rustic:完善的纯粹 Rust 技术栈实现的国际象棋引擎,多平台支持(甚至包括嵌入式设备树莓派 Raspberry Pi、Buster)
  54. [Rust] Rust 迭代器(Iterator trait )的要诀和技巧
  55. [Rust] 使用 Rust 极致提升 Python 性能:图表和绘图提升 24 倍,数据计算提升 10 倍
  56. [Rust] 【2021-04-03】Rust 核心团队人员变动
  57. [Rust] Rust web 框架现状【2021 年 1 季度】
  58. [Rust] Rust 官方周报 384 期(2021-03-31)
  59. [Rust] Rust 中的解析器组合因子(parser combinators)
  60. [生活] 毕马威(KPMG)调查报告:人工智能的实际采用,在新冠疫情(COVID-19)期间大幅提升
  61. [Python] HPy - 为 Python 扩展提供更优秀的 C API
  62. [Rust] 2021 年,学习 Rust 的网络资源推荐(2)
  63. [Rust] 2021 年,学习 Rust 的网络资源推荐
  64. [生活] 况属高风晚,山山黄叶飞——彭州葛仙山露营随笔
  65. [Rust] Rust 1.51.0 已正式发布,及其新特性详述
  66. [Rust] 为 Async Rust 构建共享的愿景文档—— Rust 社区的讲“故事”,可获奖
  67. [Rust] Rust 纪元第 382 周最佳 crate:ibig 的实践,以及和 num crate 的比较
  68. [Rust] Rust 1.51.0 稳定版本改进介绍
  69. [Rust] Rust 中将 markdown 渲染为 html
  70. [生活] 国民应用 App 的用户隐私数据窥探
  71. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(3)- 重构
  72. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(2)- 查询服务
  73. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(1)- 起步及 crate 选择
  74. [Rust] Rust 操控大疆可编程 tello 无人机

Topics

rust(73)

graphql(16)

rust-官方周报(12)

webassembly(9)

async-graphql(8)

rust-官方博客(8)

tide(7)

rust-web(7)

wasm(6)

this-week-in-rust(6)

yew(6)

mysql(5)

rbatis(5)

android(4)

actix-web(4)

mongodb(3)

json-web-token(3)

jwt(3)

cargo(3)

技术延伸(3)

trunk(3)

handlebars(3)

rhai(3)

用户隐私(2)

学习资料(2)

python(2)

ai(2)

人工智能(2)

postgresql(2)

rust-compiler(2)

rust-基金会(2)

rust-foundation(2)

rustup(2)

rust-toolchain(2)

rust-工具链(2)

rust-游戏开发(2)

rust-区块链(2)

graphql-client(2)

tello(1)

drone(1)

无人机(1)

隐私数据(1)

markdown(1)

html(1)

crate(1)

async(1)

异步(1)

旅游(1)

不忘生活(1)

葛仙山(1)

hpy(1)

python-扩展(1)

正则表达式(1)

解析器组合因子(1)

组合器(1)

regular-expression(1)

parser-combinator(1)

regex(1)

官方更新(1)

rust-工作招聘(1)

rust-技术资料(1)

rust-周最佳-crate(1)

rust-web-框架(1)

rust-web-framework(1)

rust-核心团队(1)

rust-core-team(1)

rust-language-team(1)

pyo3(1)

rust-python-集成(1)

python-性能改进(1)

迭代器(1)

iterator-trait(1)

国际象棋(1)

chess(1)

游戏引擎(1)

game-engine(1)

虚拟化(1)

unikernel(1)

rustyhermit(1)

linux(1)

virtualization(1)

sandboxing(1)

沙箱技术(1)

数据采集(1)

异步数据采集(1)

docker(1)

镜像(1)

生产环境(1)

rust-评价(1)

rust-2021-edition(1)

rust-2021-版本(1)

graphql-查询(1)

vision-doc(1)

愿景文档(1)

代码重构(1)

steering-cycle(1)

方向周期(1)

隐私声明(1)

机器人(1)

robotics(1)

rustdoc(1)

rust-编译器(1)

实时音频(1)

real-time-audio(1)

变更服务(1)

mutation(1)

查询服务(1)

query(1)

rust-贡献者(1)

rust-轶事(1)

rust-稳定版(1)

rust-预发布(1)

rust-测试(1)

安全编程(1)

可信计算(1)

安全代码(1)

secure-code(1)

rust-android-integrate(1)

rust-embedded(1)

rust-嵌入式(1)

rust-生产环境(1)

rust-2021(1)

rust-production(1)

网页快照(1)

网页截图(1)

水印效果(1)

图片水印(1)

rust-wasm(1)

yew-router(1)

css(1)

web-前端(1)

wasm-bindgen(1)

区块链(1)

blockchain(1)

surf(1)

dotenv(1)

标识符(1)

rust-1.53.0(1)

Elsewhere

- Open Source
  1. github/zzy
  2. github/sansx
- Awesome Blog
  1. Sansx's Studio
  2. 曙光磁铁的博客
- Learning & Studying
  1. Rust 学习资料 - 芽之家