MASSLESS LTD.

Using Rust for WebAssembly (WASM)

15 February 2025

Using Rust for WebAssembly (WASM)

Rust's ability to compile to WebAssembly (WASM) opens up a world of opportunities for building high-performance web applications. By leveraging Rust's speed and safety, you can offload performance-critical logic to WebAssembly modules and integrate them seamlessly with JavaScript.

Why Use Rust for WASM?

  • Performance: Rust compiles to highly optimised WASM modules that run at near-native speeds.
  • Safety: Rust's strict compile-time checks ensure memory safety, reducing runtime errors.
  • Interoperability: Tools like wasm-bindgen and wasm-pack make it straightforward to expose Rust functions to JavaScript.

Setting Up Your Rust WASM Project

1. Install the Required Tools

To begin, ensure you have the Rust toolchain installed. Then, install wasm-pack, which simplifies building and packaging WASM modules:

cargo install wasm-pack

2. Create a New WASM Project

You can create a new project specifically for WebAssembly:

wasm-pack new my_wasm_project
cd my_wasm_project

This command sets up a new project with the basic configuration needed to compile to WASM.

Writing Rust Code for WASM

When writing Rust code intended for WASM, you'll use the wasm-bindgen crate to handle interactions with JavaScript. Annotate the functions you want to expose with #[wasm_bindgen].

Example: Exposing a Function to JavaScript

use wasm_bindgen::prelude::*;

// Expose this function to JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}! Greetings from Rust in WASM.", name)
}

This simple function takes a string and returns a greeting message. The #[wasm_bindgen] attribute ensures that the function is accessible from JavaScript.

Building and Integrating the WASM Module

1. Build the Project

Compile your Rust code to WebAssembly using wasm-pack:

wasm-pack build

This command generates a pkg directory containing the WASM binary and the corresponding JavaScript glue code.

2. Integrate with a JavaScript Project

You can now integrate the generated package into your JavaScript or TypeScript project. For example, in an HTML file with a JavaScript module:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Rust WASM Example</title>
</head>
<body>
  <script type="module">
    import init, { greet } from './pkg/my_wasm_project.js';

    async function run() {
      await init();
      console.log(greet("World"));
    }

    run();
  </script>
</body>
</html>

This setup demonstrates how to import the WASM module and call the greet function from JavaScript.

Best Practices for Rust and WASM

  • Modularise Code: Keep performance-critical logic in separate modules that compile to WASM, while using JavaScript for UI and orchestration.
  • Error Handling: Ensure robust error handling in both Rust and JavaScript to catch and manage errors gracefully.
  • Optimise for Size: WASM binaries can become large; use optimisation flags and tools like wasm-opt to minimise file size.

Conclusion

Using Rust for WebAssembly provides a powerful pathway to enhance your web applications with high-performance, safe, and efficient code. Whether you're offloading heavy computations or adding new capabilities to your JavaScript projects, Rust and WASM offer a compelling combination for modern web development.

Happy coding, and enjoy building high-performance web applications with Rust and WASM!

Rust for beginner's guide overview