4 ms·

Parcel and Rust: A WASM Romcom

99 points by kazade 6y ago

bluejekyll 6y ago
The article mentions ‘stdweb’. I think most of the community (based on projects I’ve looked at) is moving towards ‘web-sys’ (std browser runtime bindings) which works well with ‘js-sys’ (bindings to the JS runtime) and all work well with ‘wasm-bindgen’ and ‘wasm-bindgen-futures’. Otherwise, this article matches my own experience in this space, and it’s a fun read. I have yet to use ‘parcel’, though, as I haven’t really hit a problem that it would solve for me.
- mst 6y ago
  If you could throw in a list of the projects you've looked at that seem representative that would be really cool.
  - bluejekyll 6y ago
    I probably should have said frameworks. I've personally spent the most time with Yew: https://yew.rs/docs/ https://yew.rs/docs/ Seed appears to be popular: https://seed-rs.org/ https://seed-rs.org/ And Moxie looks really interesting, is in active development: https://docs.rs/moxie/0.2.3/moxie/ https://docs.rs/moxie/0.2.3/moxie/ This is a community source: https://www.arewewebyet.org/topics/webassembly/ https://www.arewewebyet.org/topics/webassembly/
willglynn 6y ago
A couple months ago I wanted to get Rust/WebAssembly running in a web worker inside a `create-react-app` project. It took some doing. Net result: the repo has a package.json and a src/index.js like a JS project, plus a Cargo.toml and a src/lib.rs like a Rust project. This feels appropriate since the Rust files in this project are really application code calling out to a #[no_std] Rust library, just like the JS files are application code calling out to JS libraries. WebStorm provides full IDE features in both languages: JavaScript is obviously native, and https://intellij-rust.github.io https://intellij-rust.github.io works in WebStorm. Saving either kind of source file triggers a recompile and a browser refresh. It's magical. I ended up using @wasm-tool/wasm-pack-plugin, worker-plugin, and @craco/craco. * wasm-pack-plugin handles most of the Rust integration, invoking `cargo` from Webpack, and spitting out a .wasm+.js bundle which src/ can `import()`. * worker-plugin lets me write frontend code which says `new Worker('my.worker.js')`, creating a separate Webpack build target and rewriting the path appropriately. * craco provides a means to modify `create-react-app`'s Webpack configuration without ejecting. I had to prevent file-loader from serving .wasm files, add WasmPackPlugin and WorkerPlugin to Webpack's plugin list, and disable ModuleScopePlugin to allow importing wasm-pack-plugin's output from outside ./src. This is all less mature and more brittle than I would prefer, but it absolutely works. I'm excited for this space to improve.
- bluejekyll 6y ago
  I have a little project that I try to keep updated as necessary as an example and blueprint for a lot of this: https://github.com/bluejekyll/kp-chart https://github.com/bluejekyll/kp-chart I know there are many others, but I had fun doing this one.
- vbezhenar 6y ago
  Does Rust code ends with minimalistic wasm? I was astonished to see how nice C code compiles into wasm. It was absolutely minimal, no extra unnecessary stuff (at least for some examples I tried). I definitely would use C for wasm generation, but I did not try Rust. I would really hate to see something like pulling half of standard library for some innocent code resulting in tens or even hundreds of kilobytes of wasm bytecode.
  - willglynn 6y ago
    I can't speak to the general case, but there's no `libc` compatibility cruft in my app. None of my dependencies try to talk to the operating system, and the Rust I wrote in this project uses `js-sys` and `web-sys` directly. If you're minimizing binary sizes, the biggest thing to avoid is `std::fmt`. This requires a little planning but is still quite achievable. #[no_std] crates are always safe to pick, and most of the popular std-dependent crates can be used too though you might need to toggle some features off.
  - kryptiskt 6y ago
    Here is a blogpost demonstrating how small wasm compiled from Rust can be: Making really tiny WebAssembly graphics demos (http://cliffle.com/blog/bare-metal-wasm/ http://cliffle.com/blog/bare-metal-wasm/)

99 points by kazade 6y ago

The article mentions ‘stdweb’. I think most of the community (based on projects I’ve looked at) is moving towards ‘web-sys’ (std browser runtime bindings) which works well with ‘js-sys’ (bindings to the JS runtime) and all work well with ‘wasm-bindgen’ and ‘wasm-bindgen-futures’. Otherwise, this article matches my own experience in this space, and it’s a fun read. I have yet to use ‘parcel’, though, as I haven’t really hit a problem that it would solve for me.

mst 6y ago
If you could throw in a list of the projects you've looked at that seem representative that would be really cool.
- bluejekyll 6y ago
  I probably should have said frameworks. I've personally spent the most time with Yew: https://yew.rs/docs/ https://yew.rs/docs/ Seed appears to be popular: https://seed-rs.org/ https://seed-rs.org/ And Moxie looks really interesting, is in active development: https://docs.rs/moxie/0.2.3/moxie/ https://docs.rs/moxie/0.2.3/moxie/ This is a community source: https://www.arewewebyet.org/topics/webassembly/ https://www.arewewebyet.org/topics/webassembly/

willglynn 6y ago

A couple months ago I wanted to get Rust/WebAssembly running in a web worker inside a `create-react-app` project. It took some doing. Net result: the repo has a package.json and a src/index.js like a JS project, plus a Cargo.toml and a src/lib.rs like a Rust project. This feels appropriate since the Rust files in this project are really application code calling out to a #[no_std] Rust library, just like the JS files are application code calling out to JS libraries. WebStorm provides full IDE features in both languages: JavaScript is obviously native, and https://intellij-rust.github.io https://intellij-rust.github.io works in WebStorm. Saving either kind of source file triggers a recompile and a browser refresh. It's magical. I ended up using @wasm-tool/wasm-pack-plugin, worker-plugin, and @craco/craco. * wasm-pack-plugin handles most of the Rust integration, invoking `cargo` from Webpack, and spitting out a .wasm+.js bundle which src/ can `import()`. * worker-plugin lets me write frontend code which says `new Worker('my.worker.js')`, creating a separate Webpack build target and rewriting the path appropriately. * craco provides a means to modify `create-react-app`'s Webpack configuration without ejecting. I had to prevent file-loader from serving .wasm files, add WasmPackPlugin and WorkerPlugin to Webpack's plugin list, and disable ModuleScopePlugin to allow importing wasm-pack-plugin's output from outside ./src. This is all less mature and more brittle than I would prefer, but it absolutely works. I'm excited for this space to improve.

bluejekyll 6y ago
I have a little project that I try to keep updated as necessary as an example and blueprint for a lot of this: https://github.com/bluejekyll/kp-chart https://github.com/bluejekyll/kp-chart I know there are many others, but I had fun doing this one.
vbezhenar 6y ago
Does Rust code ends with minimalistic wasm? I was astonished to see how nice C code compiles into wasm. It was absolutely minimal, no extra unnecessary stuff (at least for some examples I tried). I definitely would use C for wasm generation, but I did not try Rust. I would really hate to see something like pulling half of standard library for some innocent code resulting in tens or even hundreds of kilobytes of wasm bytecode.
- willglynn 6y ago
  I can't speak to the general case, but there's no `libc` compatibility cruft in my app. None of my dependencies try to talk to the operating system, and the Rust I wrote in this project uses `js-sys` and `web-sys` directly. If you're minimizing binary sizes, the biggest thing to avoid is `std::fmt`. This requires a little planning but is still quite achievable. #[no_std] crates are always safe to pick, and most of the popular std-dependent crates can be used too though you might need to toggle some features off.
- kryptiskt 6y ago
  Here is a blogpost demonstrating how small wasm compiled from Rust can be: Making really tiny WebAssembly graphics demos (http://cliffle.com/blog/bare-metal-wasm/ http://cliffle.com/blog/bare-metal-wasm/)