* Shortens line lengths (to ~100 characters max per line). * A few stylistic improvements * Corrects a couple of typos * Fixes a few grammar errors Co-authored-by: Justin Starry <justin.starry@icloud.com>
| description |
|---|
| Set yourself up for success |
Project Setup
Rust
First, you'll need Rust. To install Rust and the cargo build tool, follow the
official instructions.
Wasm Build Tools
Extra tooling is needed to facilitate the interop between WebAssembly and JavaScript. Additionally,
depending on the tool you choose, they can help make deployment and packaging much less of a headache
by generating all of the wrapper JavaScript code necessary to run the .wasm file from your app in the browser.
wasm-pack
A CLI tool developed by the Rust / Wasm Working Group for packaging up WebAssembly. Best used
together with the wasm-pack-plugin for Webpack.
{% page-ref page="using-wasm-pack.md" %}
wasm-bindgen
Both a library and CLI tool and is also developed by the Rust / Wasm Working Group. It is a low level
tool used internally by `wasm-pack` which facilitates JS / WebAssembly interoperability. We don't
recommend using wasm-bindgendirectly because it requires hand-writing some JavaScript to bootstrap
you WebAssembly binary. However, it is possible and more info can be found on the
wasm-bindgen guide.
{% page-ref page="using-wasm-bindgen.md" %}
cargo-web
The preferred web workflow tool before the introduction of wasm-pack and wasm-bindgen. It is
still the quickest way to get up and running and worth installing to run examples that haven't
been migrated to support wasm-pack yet.
{% page-ref page="using-cargo-web.md" %}
Comparison
wasm-pack
|
wasm-bindgen
|
cargo-web
|
|
|---|---|---|---|
| Project Status | Actively maintained by the Rust / Wasm Working Group | Actively maintained by the Rust / Wasm Working Group | No Github activity for over 6 months |
| Dev Experience | Almost there! Requires webpack for best experience. |
Barebones. You'll need to write some scripts to streamline your dev experience. | Just works! Batteries included, no external dependencies needed. |
| Local Server | Supported with webpack plugin |
Not supported | Supported |
| Auto rebuild on local changes | Supported with webpack plugin |
Not Supported | Supported |
| Headless Browser Testing | Supported | Supported | Supported |
| Supported Targets |
|
|
|
web-sys
|
Compatible | Compatible | Incompatible |
stdweb
|
Compatible | Compatible | Compatible |
| Example Usage | Starter template | Build script for Yew examples | Build script for Yew examples |