Parcel and Rust: A WASM Romcom | Hacker News Reader

Parcel and Rust: A WASM Romcom

dev.p.ota.to

99 pointskazade8 comments

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 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.

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

I know there are many others, but I had fun doing this one.

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.

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.

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/)

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.

If you could throw in a list of the projects you've looked at that seem representative that would be really cool.

I probably should have said frameworks.

I've personally spent the most time with Yew: https://yew.rs/docs/

Seed appears to be popular: https://seed-rs.org/

And Moxie looks really interesting, is in active development: https://docs.rs/moxie/0.2.3/moxie/

This is a community source: https://www.arewewebyet.org/topics/webassembly/

Reply on news.ycombinator.com