Cargo-Culting the Rusty Web: Serializing to JavaScript

$ cargo new serialize-this --bin
Created binary (application) `serialize-this` project
$ cd serialize-this
▾ src/
main.rs
Cargo.toml
[dependencies]
serde = "1.0.24"
serde_json = "1.0.8"
serde_derive = "1.0.24"
$ rustc +nightly --target wasm32-unknown-unknown -O src/main.rs
error[E0463]: can't find crate for `serde_json`
--> src/main.rs:1:1
|
1 | extern crate serde_json;
| ^^^^^^^^^^^^^^^^^^^^^^^^ can't find crate
error: aborting due to previous error
$ cargo +nightly build --release --target=wasm32-unknown-unknown
$ ls target/wasm32-unknown-unknown/release/serialize-this.wasm 
target/wasm32-unknown-unknown/release/serialize-this.wasm
#[derive(Serialize)]
struct Sam {
instrument: String
}
  let sam = Sam {
instrument: "saxophone".to_string()
};
let serial = serde_json::to_string(&sam);
  let serial = match serial {
Ok(s) => s.to_string(),
Err(_) => "nope".to_string()
};
#[no_mangle]
pub extern "C" fn dealloc_str(ptr: *mut c_char) {
unsafe {
let _ = CString::from_raw(ptr);
}
}
<!doctype html><html>
<head>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
  1. Compile the Rust project to .wasm
  2. Run wasm-gc on the compiled output and move it next to index.html
  3. Start an http server (using http-server from npm)
cargo +nightly build --release --target=wasm32-unknown-unknown && \
wasm-gc target/wasm32-unknown-unknown/release/serialize-this.wasm serialize-this.wasm && \
http-server
bash ./start.sh

Conclusion

--

--

--

I make sawtooth waves and glue stuff together.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Understand closures in javascript

Full-stack React tweaks: initial setup

“Communications link failure” problem solution

How to Structure a Vue.js Project

Sorting an array containing 0s, 1s & 2s.

Keycloak SameSite Cookie Attribute

Input decorator in Angular

What you should know about @ngrx selectors

Image associée

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Slotsky

Sam Slotsky

I make sawtooth waves and glue stuff together.

More from Medium

My thoughtout process to select a FP language and learn it — Elixir

Splitting a List of Positive Integers into Minimal Sub-Sums: Rust + JavaScript

Rust 002 — Variables, Functions, Conditionals, Loops

Unit Testing User Interactions