Intro to WebAssembly with Rust

Introduction

WebAssembly (Wasm) is a binary instruction format for a stack-based virtual machine. It enables near-native-speed execution in web browsers and is increasingly used for performance-critical applications. Rust, with its memory safety guarantees and excellent WebAssembly support, is a perfect language for creating Wasm modules.

Why Rust for WebAssembly?

Rust provides:

• Memory safety without a garbage collector
• Powerful macro system for code generation
• Excellent tooling for WebAssembly via wasm-pack
• Strong community support for Wasm development

Setting Up Your Environment

First, install Rust if you haven't already:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Then install wasm-pack:

cargo install wasm-pack

Creating a Simple WebAssembly Module

Let's create a Rust function that adds two numbers:

#[no_mangle]
pub extern "C" fn add(a: i32, b: i32) -> i32 {
    a + b
}

This function takes two i32 parameters and returns their sum. The #[no_mangle] attribute ensures the function name isn't mangled, and extern "C" makes it callable from JavaScript.

Building the Module

Compile the Rust code to WebAssembly:

wasm-pack build --target web

This creates a pkg directory with the Wasm file and JavaScript bindings.

Using the Module in JavaScript

In your HTML file:

<script type="module">
  import init, { add } from './pkg/your_module.js';

  async function run() {
    await init();
    const result = add(5, 7);
    console.log('5 + 7 =', result);
  }

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

Conclusion

With Rust and WebAssembly, you can create high-performance web applications. This is just a simple example - explore more complex use cases like game engines, image processing, or cryptographic operations. The combination of Rust's safety and Wasm's performance opens up exciting possibilities for web development.