Yew

Rust / Wasm 網路應用程式的框架

講者：Justin Starry

Github: @jstarry

自我介紹

@jstarry

• 我現在住在台北
• 通常住在加拿大的多倫多 🇨🇦
• 加拿大太冷了所以逃到台灣過冬
• 我對學習中文很有興趣
• 我已經學中文學了差不多兩年了
• 我很喜歡台灣的超新鮮的水果 😋

​

自我介紹

@jstarry

• 我是軟體工程師
• 在一個叫 Solana 的區塊鏈公司工作
• 為了在區塊鏈的行業工作，我開始學習 Rust
• 我已經用了 Rust 一年半了
• 我透過做一個網頁遊戲開始學習 Rust
• 現在是 Yew 的維護者

github.com/yewstack/yew

演講大綱

1. 用 Rust 和 Yew 創造 WebAssembly 的網路應用

2. 怎麼把 Rust 編譯到 WebAssembly？

3. 介紹 Yew

4. 分享 Yew 的最有趣的事情

github.com/yewstack/yew

你想要創造網路應用程式嗎？

• 最受歡迎的方法是使用 React、Vue.js 等等的框架
• 從2017年底所有的主要瀏覽器都支援運行 WebAssembly!
• 現在有好幾個用 Rust 的選擇：Yew、Seed 等等
• 還有一個用 C# 的選擇：Blazor (Microsoft 做的)

github.com/yewstack/yew

為什麼不用 JavaScript？

• 說真的 JavaScript 目前不錯
• 又快又容易學
• 可以用 TypeScript 的型別系統
• 在前端和後端都可以用一樣的語言（Node.js）

​

github.com/yewstack/yew

為什麼用 WebAssembly？

• 被所有的主要瀏覽器支援
• 瀏覽器需要比較少時間來編譯 WebAssembly
• 讓開發者用其他語言來創造網路應用程式
• Rust 的型別系統比 TypeScript 成熟很多
• 後端用 Rust 的話，在前端也用 Rust 很方便

github.com/yewstack/yew

為什麼不用 WebAssembly？

• 環境沒那麼成熟
• 開發的工具不多
• 可以用在 Wasm 裡的 Rust 套件不多
• 呼叫瀏覽器的方法比 JavaScript 慢一點

什麼是 WebAssembly？

• WebAssembly (wasm) 的設計很像 native code

​

什麼是 WebAssembly？

• WebAssembly (wasm) 的設計很像 native code
• 不能直接呼叫瀏覽器、作業系統等等的 API
• Wasm 有一個叫 import 的特色

​

​

(*.wat)

什麼是 WebAssembly？

• WebAssembly (wasm) 的設計很像 native code
• 不能直接呼叫瀏覽器、作業系統等等的 API
• Wasm 有一個叫 import 的特色

​

​

(*.wat)

什麼是 WebAssembly？

• WebAssembly (wasm) 的設計很像 native code
• 不能直接呼叫瀏覽器、作業系統等等的 API
• Wasm 有一個叫 import 的特色

​

​

(*.wat)

.wat format

什麼是 WebAssembly？

• WebAssembly (wasm) 的設計很像 native code
• 不能直接呼叫瀏覽器、作業系統等等的 API
• Wasm 有一個叫 import 的特色
• Wasm 只有四個型別：int32、int64、float32、float64

​

• 它的 Memory 可以從外面讀取和改變

​

為了在瀏覽器中呼叫 `console.log` 你可以這樣做：

​

github.com/yewstack/yew

真的這麼複雜嗎？

• 可以用一個叫 wasm-bindgen 的 Rust 套件
• 它會生成 WebAssembly 跟 JavaScript 的 glue 程式碼
• 可以用一個叫 web-sys 的套件來呼叫瀏覽器的 API

github.com/yewstack/yew

Yew 的簡介

• 用 Rust 寫的
• 可以編譯到 WebAssembly
• 類似 React、Vue.js、Elm 等等的現代化框架

github.com/yewstack/yew

為什麼需要這樣的框架？

• 現代的前端應用程式越來越複雜
• 手動改變佈局很麻煩
• 在非同步的環境處理狀態很困難

github.com/yewstack/yew

宣告式佈局

• 只要宣告你要的佈局，Yew 會幫你處理好

​

​

​

• 類似 JSX，但是在裡面可以用 Rust 表達式
• 由程序式巨集驅動

github.com/yewstack/yew

巨集怎麼運作？

• Rust 有兩種巨集：宣告式（declarative）和程序式（procedural）
• 宣告式巨集比較簡單
• 例子：vec!、println!
• 必須遵循一些規定
• 很像 match 的程式語言

github.com/yewstack/yew

宣告式巨集的例子

github.com/yewstack/yew

程序式巨集怎麼運作？

• 程序式巨集比較強大
• 收到一個 token stream（表達式、變數、型別）
• 可以表現 token stream 應該怎麼被改變
• Rust 有三種程序式巨集：
• #[derive(..)]
• #[custom(..)]
• function！(..)

​

github.com/yewstack/yew

Yew 怎麼把佈局處理好？

• 比較現有的佈局跟你想要的佈局
• 如果有一部分沒改變，不需要處理那部分
• 如果只有一部分的屬性改變，可以更新它
• 如果有一部分完全改變了，就去掉它

github.com/yewstack/yew

Yew 怎麼把佈局處理好？

github.com/yewstack/yew

Yew 怎麼把佈局處理好？

• 比較現有的佈局跟你想要的佈局
• Yew 會用一個 Virtual DOM
• 呼叫 DOM API 比較慢，所以 Yew 會減少 DOM API 的呼叫次數

github.com/yewstack/yew

複雜的應用程式

• 重複的程式碼
• 觸發各種監聽事件
• 獲取各種數據

github.com/yewstack/yew

Yew Components

• 處理自己的狀態
• 可以收到屬性
• 宣告自己的樣子
• 可以用在其他的元件裡
• 當觸發監聽事件時，可以表達它有什麼反應

終於

github.com/yewstack/yew

• Docs: yew.rs/docs/v/zh_tw/ （謝謝球魚！）
• Repo: github.com/yewstack/yew
• Chat: discord.com/invite/VQck8X4