Wasm by example:

no bundle version

Motivation

The Rust programming language is a great contender, if you want to:

• to build webassembly/JavaScript apps for the web or
• target some specific module that need speeding, memory safety, or both.

However, most Rust-wasm tutorials, lean heavily on "NPM and webpack", just to get a "hello world".

The following pages brings under one location all those bits and pieces you want to know in order to understand and build wasm stuff with Rust.

More specifically the intent is to address these wishes:

• Rust developers should be able to produce WebAssembly packages for use in JavaScript without requiring a Node.js development environment
• JavaScript developers should be able to use WebAssembly without requiring a Rust development environment

source: [Hello wasm-pack!]

Objectives

Webassembly is still a moving target but some tools and convenient crates make the experience more appealing.

• Learn how to transform most Rust/wasm tutorials into lean no-bloat rust-wasm with no-bundle.
• Get familliar with the following tools and crates:
  • [wasm-pack], [docs]
  • [wasm-bindgen], [docs]
  • [js-sys], [js-sys example]
  • [web-sys], [web-sys examples]

Methodology

We'll convert most examples from the [wasm-bindgen guide] to a no-bundle version.

For each example or demo:

• we'll get the example running.
• we'll expose or highlight aspects of the code related to wasm-bindgen, wasm-pack or Rust.

0. Get wasm-pack and something to serve our website locally

Let's prepare our workspace, and setup our tools.

0.1 Install wasm-pack

cargo install wasm-pack

wasm-pack helps you build rust-generated WebAssembly packages Its a useful convenience that is widely used by the Rust community.

If your interested see [wasm-pack under the hood]

0.2 Install a local tiny static file server

We need something to serve your website so we can test and see what we develop on our local machine. If you don't have one installed you can use Host These Things Please - a basic http server for hosting a folder fast and simply [http]

cargo install https

Formula for Converting examples

Seven steps to hello world

1. Set up your file structure
2. Edit Cargo.toml: Set the crate-type and add wasm-bindgen as a dependency.
3. Get the lib.rs code for hello_world
4. Specify type module in index.html
5. import with file extension included and Wrap the code in async/await index.js
6. build with wasm-pack
7. Run the web server and open your browser

Let's see that in practice with the first example: wasm Hello world