Rust 和 Wasm 的融合，使用 yew 构建 WebAssembly 博客应用的体验报告

2021年8月6日 309点热度 0人点赞 0条评论

WebAssembly 相对其它 web 标准来说，稍显新颖。但 wasm
的应用范畴和方向，却十分广阔。关于其优势所在，本文不做赘述，网上有许多分析比较的文章。我们从 Rust 周报趋势来领会，可以发现 Rust
官方在 WebAssembly 上投入了不少精力。Rust 社区中，Rust + WebAssembly
的应用也比较热门，其文章和话题增长趋势显著。

因此，笔者对 Rust 和 Wasm 的融合非常感兴趣，在此兴趣驱动之下，开发了一个前端较完整的 WebAssembly
博客应用。虽然，就开发博客而言，对 WebAssembly 技术来说，是大材小用，并且也非 wasm 技术的优势所在。但不可否认，web
应用（包括移动互联网应用）始终是主流，以及未来方向。

并且，Rust 前端开发方面，相较于其它 js 前端库/框架的比较，也并非没有优势。关于 Rust web 前端库/框架的评测，可以参与文章《Rust web 前端库/框架评测，以及和 js 前端库/框架的比较》。

因此，本文从一个简单但前端完整的博客，对 Rust 生态中赞数最多的 wasm 框架 yew 进行稍完整的体验。

Rust 生态中，较完整的 wasm 框架主要有 yew、seed，以及 percy。笔者进行简单的使用后，选择了 yew：

关于 Rust wasm 框架的选择以及入门教程，请参阅文章《Rust 和 Wasm 的融合，使用 yew 构建 WebAssembly 标准的 web 前端（1）- 起步及 crate 选择》

关于 Rust wasm，具体来说 yew 获取 GraphQL 数据并解析的示例，请参阅《使用 yew 构建 web 前端（4）- 获取 GraphQL 数据并解析》

本文是体验报告的初始版本，仅从开发效率、性能、部署、团队，以及扩展 5 个方面简述。

开发效率

作为开发人员，开发效率绝对是最关心的一个技术栈选择考量点。笔者对 Python web 开发（flask、django，sanic
等）、JavaEE，以及 NodeJS 的 react 稍有经验，可谈熟悉。需要说明的是：本文的比较，角度是独立构建一个完整的、前后端分离的
web 应用。所以不必对前述所列技术中，有些是侧重于后端，有些是纯前端，而感到疑惑。比如 react 必定要结合数据服务后端来比较的。

本次 yew 体验开发中，后端是采用 tide + async-graphql + mongodb 构建的 GraphQL API（感兴趣可参阅《基于 tide + async-graphql + mongodb 构建 Rust GraphQL 服务》，或者《基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建 Rust GraphQL 服务》）。

就笔者体验而言，熟练后，开发效率非常可观。不同的技术，不能下绝对结论。但如果说新的起步项目，仅考虑技术选择，笔者一定会选择 Rust wasm/模板库 + async-graphql 的组合。

Rust 生态内部比较，笔者则可以大胆给一个说法，yew 开发 Rust web，要比 handlebars-rust 模板方式高效一些。笔者原先先用 handlebars-rust 模板构建了博客（《使用 handlebars、rhai 开发 Rust web 前端》），此次 yew 构建按的博客，是一次重写。

性能

运行性能方面，基本和《Rust web 前端库/框架评测，以及和 js 前端库/框架的比较》文中所述一致。笔者开始使用 yew v0.18，后来改为 yew master，简单测试，性能是有所提升的。相信 yew v0.19 发布后，性能会有很大提升。

部署

部署需要从 3 个方面来说：

打包。根据 yew 官方建议，机制压缩（包括 panic 剔除）后，此简单博客应用打包为 450k 左右。rustwasm 官方团队的 wasm-pack 打包模式，对不同的 wasm 包可以分割应用的。笔者使用了 trunk 打包工具，若要分割 wasm 包，目前则需要通过独立的 yew 项目的模式。
发布。发布则比较简单，编译为 html 文件后，直接使用应用服务器，如 nginx、apache 则可。目前 Rust 生态中，也有专用的 wasm 服务器。
使用。使用方面，即是 web 应用体验。但如果希望网站对 seo 更友好，则不太合适。

团队

目前，此项目是笔者个人开发的。根据开发过程来看，如果团队应用，可能需要有较高的设计要求。否则，要么要分散为很多小项目，要么打包文件会过大。

扩展

扩展实质上是生态，目前的 Rust wasm，生态还处于起步阶段，扩展或许数量看起来还行，但和其它如 NodeJS 生态比起来，质量则差太远。比如有些 yew/wasm 的样式库，要么巨丑，要么完成度接近于 1（如果按 1-10 划分完成度）。

但是，rustwasm 官方一致致力于直接使用 js 生态，笔者本次也直接使用了不少 js 脚本，感觉总体来说，生态不是问题！无须担心，完全撑得起复杂 web 应用。

以上仅是个人使用的浅显体验，仅供参考。如果您想深入使用，建议参考一些资料，实践后再下结论。

完整源码，包括数据等，都开源在 github/zzy/surfer，欢迎您给予指导，或者功能贡献。

题外话——

没想到通常阅读量 300 左右的 Rust 官方周报翻译，竟然有近百位朋友联系笔者问询中断原因。笔者 7 月份外出，8 月处才回家。所以 Rust 官方周报翻译一直中断。如果您愿意翻译，欢迎有偿投稿。当然，对于其它文章，不限于技术，笔者也非常欢迎您有偿投稿。
WebAssembly 应用开发方面，欢迎交流，特别是游戏开发、AR/VR 方面。

谢谢您的阅读！如果要访问相关扩展链接，请阅读原文。

414800Rust 和 Wasm 的融合，使用 yew 构建 WebAssembly 博客应用的体验报告