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.

Source：https://dev.to/ipsphil_digital/intro-to-webassembly-with-rust-17m6