WASM（WebAssembly）是一個可移植、體積小、載入快並且相容 Web 的全新格式，使得使用後端語言也能編寫前端介面，能夠充分發揮硬體能力以達到原生的執行效率，且其沙箱化的環境和二進位制形式的檔案更為安全。Rust 語言，這門近年來多次被評選為最受程式設計師喜愛的計算機語言，在 WASM 領域有著長足的發展。Yew，這個設計先進的 WASM 框架，就是其中的優秀例子。

簡介

Yew，是 yewstack 組織在 Github 上開源的 WASM 框架，專案位於 https://github.com/yewstack/yew，目前版本為 0.17.2。

Yew 設計先進，很簡單就可以構建多執行緒的前端 Web 應用。Yew 基於元件，可以輕鬆地建立互動式的使用者介面，擁有 React 或 Elm 等框架經驗的開發者會覺得十分熟悉。Yew 通過把工作分流到後臺的 Web Worker 來最少化 DOM API 的呼叫，以達到高速效能。Yew 還支援與 Javascript 進行互動，可以使用 NPM 包，並與現有的 Javascript 應用整合。

Yew框架

安裝

Yew 安裝簡單，可以直接把依賴新增到專案的 Cargo.toml 中：

[dependencies]yew = { version = "0.14.3", features = ["std_web"] }

此外，還需要安裝 WASM 構建工具以方便 WASM 與 Javascript 間的互相操作，可選擇的工具包括：wasm-pack、wasm-bindgen 和 cargo-web​。例如，選擇使用 cargo-web，則需安裝：

cargo install cargo-web

示例

使用 Yew 建立前端應用十分簡單，我們來看一個基本的例子。首先建立一個二進位制專案：

cargo new --bin yew-app && cd yew-app

然後，在 Cargo.toml 中新增 Yew 依賴：

[package]name = "yew-app"version = "0.1.0"authors = ["Yew App Developer <[email protected]>"]edition = "2018"[dependencies]yew = { version = "0.14.3", features = ["std_web"] }

然後，編寫程式碼檔案 src/main.rs，新增程式碼

use yew::prelude::*;struct Model { link: ComponentLink<Self>, value: i64,}enum Msg { AddOne,}impl Component for Model { type Message = Msg; type Properties = (); fn create(_: 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 view(&self) -> Html { html! { <div> <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button> <p>{ self.value }</p> </div> } }}fn main() { yew::initialize(); App::<Model>::new().mount_to_body();}

可以看到，程式碼中定義了一個名為 Model 的元件，它還包含了一個 value 的數值屬性。在 Model 的 view 方法中，通過特有的 html! 巨集，以類似 JSX 的方式返回了該元件的 HTML 構成：由一個 div 容器，包裹這一個按鈕和一個文字段落。其中文字顯示 Model 的 value 屬性；而按鈕設定了點選事件的回撥，每次點選就會為 value 的值加 1。最後，在 main 函式中，進行 yew 的初始化，並例項化 Model，把其掛載到應用的 body 上。

使用 cargon-web 執行：

cargo web start

cargo-web 就會自動構建應用，並啟動一個開發伺服器，這個應用就可以在 http://[::1]:8000 被訪問。訪問服務，就可以看到一個按鈕和一個數字顯示，每次點選按鈕，數字就會加 1。一個簡單的 WSAM 前端應用就完成了。

Yew 還可以實現定製化的元件，來替代原生的元素，實現更為複雜的功能。

use yew::prelude::*;pub struct Button { link: ComponentLink<Self>, title: String, onsignal: Callback<()>,}pub enum Msg { Clicked,}#[derive(Clone, PartialEq, Properties)]pub struct Props { #[prop_or_default] pub title: String, pub onsignal: Callback<()>,}impl Component for Button { type Message = Msg; type Properties = Props; fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self { Button { link, title: props.title, onsignal: props.onsignal, } } fn update(&mut self, msg: Self::Message) -> ShouldRender { match msg { Msg::Clicked => { self.onsignal.emit(()); } } false } fn change(&mut self, props: Self::Properties) -> ShouldRender { self.title = props.title; self.onsignal = props.onsignal; true } fn view(&self) -> Html { html! { <button onclick=self.link.callback(|_| Msg::Clicked)> { &self.title } </button> } }}

在這個例子中，我們實現了一個定製的按鈕，把按鈕的建立、更新、修改和渲染都進行了重新的實現，添加了一個自定義的屬性變數 title。在應用中，我們就可以直接使用這個自定義的按鈕，替換原生的 button，實現更為複雜的功能。

總結

Yew 作為一個 WASM 框架，既擁有 Rust 語言帶來的型別安全和極致效能，又以其先進的設計，引入了類似 JSX 的方式實現了方便的渲染，遵循了元件化的設計思想，並簡化了與 Javascript 之間的互動，使得使用 WASM 快速開發一個大型前端應用成為可能。