Skip to content
Discover how to use Rust to generate WebAssembly, called by JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.bin
.vscode
crate
js
.editorconfig
.gitignore
.prettierignore
.prettierrc
.travis.yml
LICENSE-APACHE
LICENSE-MIT
README.md
README.rwt.md
index.html
package-lock.json
package.json
webpack.config.js

README.md

rust-wasm-experiments

Demo

Bouncing balls algorithm (handling physics interactions between balls) implemented in both plain JavaScript and Rust/WebAssembly:

  • computation and rendering (canvas/html) made in full JavaScript
  • computation in Rust/WebAssembly - rendering in JavaScript
  • computation and rendering in Rust/WebAssembly (loops made in JavaScript)
  • computation, rendering and iterations made in Rust/WebAssembly
  • Unit tests
  • CI
  • Setup some performance infos to pull up / Benchmark ?

Discover how to use Rust to generate WebAssembly, called by JavaScript.

  • ./crate/src: Rust implementation of Ball.js
  • ./crate/pkg: Generated WebAssembly code (with JavaScript glue code from wasm-bindgen)
  • ./js: JavaScript code

Generated with npm init rust-webpack from rust-webpack-template. Original README available here.

Prerequisites

Rust / Node / npm

Currently, only the nightly toolchain of Rust is supporting WebAssembly:

rustup default nightly
rustup target add wasm32-unknown-unknown

Install

Make sure you have cargo install wasm-pack, then:

npm install

Run

npm start

Launches a development server on http://localhost:8080.

Build

npm run build

Will build a production version of the website in the dist folder.

You can test your build by running npm run serve

Notes

Wasm-Bindgen

https://rustwasm.github.io/wasm-bindgen/

wasm-bindgen facilitates high-level interactions between wasm modules and JavaScript.

This project is sort of half polyfill for features like the host bindings proposal and half features for empowering high-level interactions between JS and wasm-compiled code (currently mostly from Rust). More specifically this project allows JS/wasm to communicate with strings, JS objects, classes, etc, as opposed to purely integers and floats. Using wasm-bindgen for example you can define a JS class in Rust or take a string from JS or return one. The functionality is growing as well!

Wasm-Pack

If you want to generate the WebAssembly yourself (without Webpack):

wasm-pack build ./crate

This will create a pkg folder containing:

  • package.json: like any npm package
  • ball_wasm.js: File that will be required on the JavaScript side (you'll need a module bundler like Webpack to import it)
  • ball_wasm.d.ts: TypeScript definitions of public functions of your rust crate that was turned to WebAssembly
  • ball_wasm_bg.wasm: Rust code turned into WebAssembly (will be required by ball_wasm.js)

Rust Nightly

Running rustup default nightly will let you use rust nighly by default:

  • That way, for each command, you won't have to specify the toolchain like:
    • cargo +nightly [cmd]
  • To get back to stable channel (you may have other project relying on stable channel), run:
    • rustup default stable
  • To check which default toolchain you're on, run the following:
    • rustup toolchain list

Contributing

Style guide

The JavaScript part is automatically formatted with prettier if you set it up in your code editor. Otherwise, the JavaScript part of the code will be formatted at pre-commit hook.

The Rust part is not automatically formatted at pre-commit hook (didn't want to force the user to install rustfmt-preview), please make sure you use a RLS (Rust Language Server) plugin for your editor that will format your code.

If you use vscode, you will have to open the crate folder as project (the plugin doesn't support subfolders yet).

code ./crate

Resources

  • First attempt (simplier version)
  • Ball.js original algo handling bouncing balls made a few years ago
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.