WebAssembly tutorials

I'm thinking about trying to move some of our javascript to webassembly, but I'm finding the ecosystem somewhat overwhelming.

I know it's complicated (because the documentation states so), but I'm wondering how to go from Rust code to running WebAssembly code loaded from my Rocket server with as few tools as possible. I can go with all the bells and whistles once I understand the process, but first I would like to manually do something like:

  1. Compile Rust code to wasm
  2. Copy the results to my server
  3. Update my javascripts to load my wasm module
  4. Call the wasm module functions from my javascript and process the return value

Just to see what's involved, without running more tools than I really need to (i.e. no npm, do I really need wasm-bindgen, etc?).

Anyone know of any such tutorials?

Edit: Ok, so wasm-bindgen looks like it's more or less required if one wants to keep one's sanity -- but I don't want to have to involve npm (at least, not yet).

A year ago as a Rust newbie I had a go at running a little program I had written in Rust in the browser with WASM. https://github.com/ZiCog/insane-british-anagram-rust

The Rust program finds all the anagrams one can bake from the "british-english-insane" dictionary file one finds in Debian.

I just compile to WASM and wrap up with wasm-bindgen. Like so: https://github.com/ZiCog/insane-british-anagram-rust/blob/master/build.sh

Then just use the resulting JS in a web page with a few lines of js to load, init and run it. Like so:

No node.js required. Short and sweet.

Don't be confused, my build script also builds it to run as a node.js module, not required.

2 Likes

Utterly perfect -- this was just what I was looking for.

You can see the WASM Insane British Anagram finder live here: http://otaniemi.conveqs.fi:9000

I would not look at the anagram finder code too hard. It's terrible Rust written by me when I was throwing "C" at the compiler and seeing what it would let me get away with! Although I do have a neat trick in there to find anagrams quickly by turning every word in the dictionary in a product or prime numbers....

The interesting bit as far as WASM is concerned is basically where anagrams_html() is exported from main.rs.

I just fixed up the code to work with wasm-bindgen 0.2.67. Be sure to use the same version of wasm-bind-gen-cli else all kind of confusion happens. I made a not about it in the README.

Also this latest check in has been well clippy'ed and fmt'ed so now it looks a bit more like a sane Rust program :slight_smile:

You might also be interested to read : Bare Metal WASM by Cliff L Biffle:


http://cliffle.com/blog/bare-metal-wasm/

If you follow Cliff's effort there you don't need wasm-bindgen at all !

2 Likes

Here's a little WASM demo that just uses wasm-pack and no other JS tooling. I invoke it with this little snippet of JS code.

EDIT: And duh, here's what it looks like: https://www.fosskers.ca/en/demo/game-of-life

3 Likes

Sweet!

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.