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

2022-09-01 15:49:48 浏览数 (1)

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 框架主要有 yewseed,以及 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 方面。

0 人点赞