Parcel and Rust: A WASM Romcom
dev.p.ota.to
Parcel and Rust: A WASM Romcom
1–9 of 9 posts
Re: Parcel and Rust: A WASM Romcom
#2The 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.
Re: Parcel and Rust: A WASM Romcom
#3A 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.
Re: Parcel and Rust: A WASM Romcom
#4A 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…
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.
Re: Parcel and Rust: A WASM Romcom
#5The 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 real…
If you could throw in a list of the projects you've looked at that seem representative that would be really cool.
Re: Parcel and Rust: A WASM Romcom
#6The 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 real…
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/
Re: Parcel and Rust: A WASM Romcom
#7A 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…
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.
Re: Parcel and Rust: A WASM Romcom
#8A 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…
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…
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.
Re: Parcel and Rust: A WASM Romcom
#9A 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…
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…
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/)