A simple factorial app that demos uses Rust, Wasm and JS

3 min readJan 7, 2024

Creating a simple application that uses Rust, WebAssembly (Wasm), and JavaScript together involves several steps. First, you’ll write the Rust code, compile it into Wasm, and then use JavaScript to interact with the Wasm module in a web application. Let’s go through the process step-by-step.

Prerequisites

- Install Rust
- Install wasm-pack a tool that facilitates building Rust-generated WebAssembly.

Step 1: Create a Rust Library

Create a new Rust library

cargo new - lib rust_wasm_demo
 cd rust_wasm_demo

2. Update Cargo.toml
Add the following lines to Cargo.toml to include WebAssembly dependencies. The cdylib type indicates that a dynamic system library will be produced, you can learn more here. And for wasm-bindgen, it is crucial for Rust programs that are intended to run on the web. It provides a way to work with JavaScript objects and to call JavaScript functions from Rust code (and vice versa) when compiling Rust to WebAssembly.

[lib]
 crate-type = ["cdylib"]
[dependencies]
 wasm-bindgen = "0.2"

3. Write the Rust Code
Replace the content of src/lib.rs with your factorial function. The preclude::* on the first line is a collection of things that wasm_bindgen thinks are important to have available in every Rust program that uses it. This typically includes macro definitions and helper functions.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fac(n:f64) -> f64{
    if n <= 1.0{
        1.0
    }else{
        n*fac(n-1.0)
    }
}

Step 2: Build the WebAssembly Module

Run the following command in the root directory of your Rust project:

wasm-pack build - target web

This will generate a pkg directory containing the Wasm module and JavaScript bindings.

Step 3: Create a Web Page to Use the Wasm Module

1. Create an HTML file (e.g., index.html) in the root directory of your Rust project like the following, notice you can are importing the module from the pkg that was built during the build earlier.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rust and WebAssembly</title>
    <script type="module">
        import init, { fac } from './pkg/rust_wasm_demo.js';
        async function run() {
            await init();
            for (let i = 1; i <= 15; i++) {
                console.log(`fac(${i}) = ${fac(i)}`);
            }
        }

        run();
    </script>
</head>
<body>
    <h1>Rust, WebAssembly, and JavaScript Demo</h1>
    <p>Check the console for output.</p>
</body>
</html>

Step 4: Serve the Application

Serve the files using a web server. If you don’t have one, you can use a simple one like http-server from npm or you can use Live-Server extension from VScode to GoLive.

npm install -g http-server
http-server

Open your browser and go to http://localhost:8080. You should see the webpage, and in the console, the factorial of numbers from 1 to 15.

This setup demonstrates a basic Rust, Wasm, and JavaScript integration. You can expand on this by adding more complex Rust functions, handling user input on the webpage, and more.

You can find the github link of this project here.

A simple factorial app that demos uses Rust, Wasm and JS

Step 1: Create a Rust Library

Step 2: Build the WebAssembly Module

Step 3: Create a Web Page to Use the Wasm Module

Step 4: Serve the Application

Written by DSL