gif reverser

A small sample project about rust and wasm that can reverse gifs.

Tech stuff

This is mostly an evaluation project and tech demo on how to integrate wasm into a webpack project, establishing a rust->wasm toolchain and interact with wasm from JS and vice versa.

Notable involved libraries:

• gif for the heavy lifting
• wasm-bindgen for the rust/js interface and a js wrapper
• webpack to bundle everything together

Quickstart

Setup the dev environment

To build this project you need rust/cargo and node/npm. The easiest way to setup rust is with rustup. See nodejs.org for node/npm.

To check that everything is ready you can use these commands:

# Check if Rust is installed.
cargo --version

# Check if npm is installed.
npm --version

First you need to install wasm-bindgen with

# install wasm-bindgen command line tools
cargo install wasm-bindgen-cli

Build the project

To build the project you have to compile the rust code to a wasm module, install a few JavaScript tools and libraries and then you can start the webpack dev server:

# compile rust code to a wasm module
cargo build --target wasm32-unknown-unknown --release

# generate a wrapper script
wasm-bindgen target/wasm32-unknown-unknown/release/gif.wasm --target bundler --out-dir ./pkg

# there's also a convenience npm script that executes the two commands for you
npm run build-wasm

# install javascript dependencies
npm ci

# run dev server
npm run serve

Now you can open your browser and go to http://localhost:8080.

License

This project is licensed under the MIT license.