Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/migerh/rustwasm-gif
A small sample project about rust and wasm that can reverse gifs. Try it out here:
https://github.com/migerh/rustwasm-gif
Last synced: about 1 month ago
JSON representation
A small sample project about rust and wasm that can reverse gifs. Try it out here:
- Host: GitHub
- URL: https://github.com/migerh/rustwasm-gif
- Owner: migerh
- License: mit
- Created: 2018-06-25T20:20:01.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T11:26:01.000Z (about 2 years ago)
- Last Synced: 2023-03-11T06:17:45.084Z (almost 2 years ago)
- Language: TypeScript
- Homepage: https://migerh.github.io/rustwasm-gif/
- Size: 385 KB
- Stars: 14
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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][gif] for the heavy lifting
* [wasm-bindgen][wasm-bindgen] for the rust/js interface and a js wrapper
* [webpack][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][rustup.rs]. See [nodejs.org][nodejs] for node/npm.
To check that everything is ready you can use these commands:
```sh
# Check if Rust is installed.
cargo --version
# Check if npm is installed.
npm --version
```
First you need to install wasm-bindgen with
```sh
# 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:
```sh
# 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 .
## License
This project is licensed under the MIT license.
[gif]: https://github.com/PistonDevelopers/image-gif
[nodejs]: https://nodejs.org/
[rustup.rs]: https://rustup.rs/
[wasm-bindgen]: https://github.com/rustwasm/wasm-bindgen
[webpack]: https://webpack.js.org/