Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time



📺🇫🇷 Utiliser WebAssembly, dès aujourd'hui - ParisJS #86

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.


Rust / Node / npm

Note for legacy version of rust At the time this project was made, WebAssembly was only supported on the nightly toolchain of Rust and you had to specify the target for wasm. You don't have to do the following anymore with recent versions of Rust:
rustup default nightly
rustup target add wasm32-unknown-unknown


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

npm install


npm start

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


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



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!


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


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


  • First attempt (simplier version)
  • Ball.js original algo handling bouncing balls made a few years ago


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





No packages published