mirror of https://github.com/yewstack/yew
148 lines
5.1 KiB
Plaintext
148 lines
5.1 KiB
Plaintext
---
|
|
title: Choosing a web library
|
|
---
|
|
|
|
## はじめに
|
|
|
|
Yew アプリは[`web-sys`](https://docs.rs/web-sys)か[`stdweb`](https://docs.rs/stdweb)で作ることができます。
|
|
これらのクレートは Rust と Web API のバインディングを提供しています。
|
|
Cargo の依存クレートに`yew`を追加する際はどちらかを選ばなければいけません:
|
|
|
|
```toml
|
|
# Choose `web-sys`
|
|
yew = "0.17"
|
|
|
|
# Choose `stdweb`
|
|
yew = { version = "0.17", package = "yew-stdweb" }
|
|
```
|
|
|
|
[Rust / Wasm 活動チーム](https://rustwasm.github.io/)のサポートがある`web-sys`が推奨です。
|
|
|
|
## 使用例
|
|
|
|
```rust
|
|
// web-sys
|
|
let window: web_sys::Window = web_sys::window().expect("window not available");
|
|
window.alert_with_message("hello from wasm!").expect("alert failed");
|
|
|
|
// stdweb
|
|
let window: stdweb::web::Window = stdweb::web::window();
|
|
window.alert("hello from wasm!");
|
|
|
|
// stdweb with js! macro
|
|
use stdweb::js;
|
|
use stdweb::unstable::TryFrom;
|
|
use stdweb::web::Window;
|
|
|
|
let window_val: stdweb::Value = js!{ return window; }; // <- JS syntax inside!
|
|
let window = Window::try_from(window_val).expect("conversion to window failed");
|
|
window.alert("hello from wasm!");
|
|
```
|
|
|
|
2 つのクレートの API はわずかに異なりますが、だいたい同じ目的で似た機能が提供されています。
|
|
|
|
## 一方を選ぶ
|
|
|
|
アプリに`web-sys`と`stdweb`のどちらを選ぶかにおいてはいくつかの見方があります。
|
|
注意として、一つのアプリに両方を用いることができるのですが、クレートをコンパイルした際にバイナリのサイズを小さくするには
|
|
一方だけを使用するのが良いです。
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style={{ textAlign: 'left' }}></th>
|
|
<th style={{ textAlign: 'left' }}>
|
|
<code>web-sys</code>
|
|
</th>
|
|
<th style={{ textAlign: 'left' }}>
|
|
<code>stdweb</code>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style={{ textAlign: 'left' }}>プロジェクトの進捗状況</td>
|
|
<td style={{ textAlign: 'left' }}>
|
|
<a href="https://rustwasm.github.io/">Rust / Wasm 活動チーム</a>
|
|
により活発にメンテナンスされている
|
|
</td>
|
|
<td style={{ textAlign: 'left' }}>GitHubで8ヶ月間動きなし</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={{ textAlign: 'left' }}>Web API のカバー</td>
|
|
<td style={{ textAlign: 'left' }}>
|
|
RustのAPIはWeb IDLスペックから自動的に生成される。
|
|
</td>
|
|
<td style={{ textAlign: 'left' }}>
|
|
Browser APIはコミュニティにより追加。
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={{ textAlign: 'left' }}>RustのAPIのデザイン</td>
|
|
<td style={{ textAlign: 'left' }}>
|
|
ほとんどのAPIコールおいて<code>Result</code>
|
|
が返ってくるよう保守的なアプローチがとられている。
|
|
</td>
|
|
<td style={{ textAlign: 'left' }}>
|
|
しばしば<code>Result</code>
|
|
を返さずpanicするようになっている。例えば
|
|
<code>stdweb::web::window()</code>
|
|
ワーカーの中で呼ばれるパニックする。
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={{ textAlign: 'left' }}>
|
|
サポートされているビルドツール
|
|
</td>
|
|
<td style={{ textAlign: 'left' }}>
|
|
<p></p>
|
|
<ul>
|
|
<li>
|
|
<code>wasm-bindgen</code>
|
|
</li>
|
|
<li>
|
|
<code>wasm-pack</code>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
<td style={{ textAlign: 'left' }}>
|
|
<p></p>
|
|
<ul>
|
|
<li>
|
|
<code>cargo-web</code>
|
|
</li>
|
|
<li>
|
|
<code>wasm-bindgen</code>
|
|
</li>
|
|
<li>
|
|
<code>wasm-pack</code>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={{ textAlign: 'left' }}>サポートされているターゲット</td>
|
|
<td style={{ textAlign: 'left' }}>
|
|
<ul>
|
|
<li>
|
|
<code>wasm32-unknown-unknown</code>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
<td style={{ textAlign: 'left' }}>
|
|
<ul>
|
|
<li>
|
|
<code>wasm32-unknown-unknown</code>
|
|
</li>
|
|
<li>
|
|
<code>wasm32-unknown-emscripten</code>
|
|
</li>
|
|
<li>
|
|
<code>asmjs-unknown-emscripten</code>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|