Rust+Yew编写高性能前端页面_yew框架

简介

Yew，是 yewstack 组织在 Github 上开源的 WASM 框架，项目位于 https://github.com/yewstack/yew。

Yew 设计先进，很简单就可以构建多线程的前端 Web 应用。Yew 基于组件，可以轻松地创建交互式的用户界面，拥有 React 或 Elm 等框架经验的开发者会觉得十分熟悉。Yew 通过把工作分流到后台的 Web Worker 来最少化 DOM API 的调用，以达到高速性能。Yew 还支持与 Javascript 进行交互，可以使用 NPM 包，并与现有的 Javascript 应用整合。

安装

Yew 安装简单

# rustup target add wasm32-unknown-unknown
# cargo install trunk wasm-bindgen-cli
1
2

示例

使用 Yew 创建前端应用十分简单，我们来看一个基本例子。

# git clone https://github.com/rayylee/keypress
1

• 编译代码：

# cargo build --release
1

• 运行：

# trunk serve --release

1
2

在浏览器中输入：
http://192.168.1.188:4000

总结

WebAssembly（wasm） 是一个可移植、体积小、加载快并且兼容 Web 的全新格式，由 w3c 制定出的新的规范。目的是在一些场景下能够代替 JS 取得更接近原生的运算体验，比如游戏、图片/视频编辑、AR/VR。简单说，就是可以体积更小、运行更快。

Yew 作为一个 WASM 框架，既拥有 Rust 语言带来的类型安全和极致性能，又以其先进的设计，引入了类似 JSX 的方式实现了方便的渲染，遵循了组件化的设计思想，并简化了与 Javascript 之间的交互，使得使用 WASM 快速开发一个大型前端应用成为可能。