Building a Simple WebAssembly App with Rust

JavaScript does have performance issues, especially when performing resource-intensive tasks like video streaming, interactive graphics, 3D rendering etc. JavaScript is meant to be a simple lightweight scripting language for adding interactivity to the web. However, that has changed as the possibilities of the web expanded.

Due to the performance issues with JavaScript, WebAssembly was birthed in 2017 to bring speed and better performance to the web.

WebAssembly or simply wasm is a binary code for executing programs on modern web browsers. It is a low-level assembly-like language that gives close performance speed to native languages such as C, C++ and Rust with a compilation target so it can run on the web. It is small-sized, compiled and meant to run along with JavaScript.

Rust and WebAssembly

Rust brings better performance to the web when compiled to WebAssembly because it has no unpredictable garbage collection pauses, JIT compiler performance cliffs. Pages load faster because of their small code size.

Rust and WebAssembly can be used in two ways:

• For building an entire web application based on Rust.
• For building part of an application using Rust in an existing JavaScript frontend.

Setting up Rust and WebAssembly on Windows Subsystem for Linux

Before you begin building your Rust and WebAssembly application, you will need to set up your environment on Windows Subsystem for Linux (WSL). Follow the commands below:

$ sudo apt update
$ sudo apt install git curl gcc pkg-config libssl-dev musl-tools python3-minimal

Installing Rust

From your Windows Subsystem for Linux terminal run the following commands.

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
source $HOME/.cargo/env
rustup toolchain install nightly --allow-downgrade -t x86_64-unknown-linux-musl,x86_64-unknown-linux-gnu

• The first command curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y ensures a script is downloaded and installation follows immediately.
• source $HOME/.cargo/env helps configure the Rust development environment variables where the Rust toolchain, rustc , cargo and rustup can be found.
• The third command input creates a rustup toolchain for each of your rust-lang/rust workspaces and also installs nightly and downgrades rustup until you find the components needed.

Installing Wasmtime (WebAssembly runtime)

Run the following command in your terminal

curl https://wasmtime.dev/install.sh -sSf | bash This would create WebAssembly virtual environment as a portable compilation target for programming languages (e.g Rust), enabling deployment on the web for client and server applications.

Create a "Hello World" package in Rust

Cargo is the Rust package manager. It is a tool that allows Rust packages to declare their various dependencies and ensure that you’ll always get a repeatable build. This would reduce the need to specify any specific compiler flags or include external dependencies when executing a crate.

Let's begin writing our program, follow the commands below.

cargo new hello_world_app
cd twelve_days_of_xmas

• cargo new hello_world_app creates a new package.
• Navigate into the new folder with cd hello_world_app.

By default Cargo generates this directory structure for us. To view this, open your IDE preferably VS Code.

$ cd twelve_days_of_xmas
$ tree .
.
├── Cargo.toml
└── src
    └── main.rs

1 directory, 2 files

In your src/main.rs, you will find the venerable "Hello world!" program.

fn main() {
    println!("Hello, world!");
}

Compiling Rust Program to WebAssembly

Switch back to your WSL terminal and run the following commands:

rustup target add wasm32-wasi
cargo build --target wasm32-wasi --release

• wasm32-wasi the Rust installer does not install the wasm32-wasi Rust standard library by default, but to compile any code for wasm32-wasi you'll need to be sure to have this target installed for your Rust toolchain.
• The second command compiles your crate into the WebAssembly module.

Running compiled WebAssembly

Run the command below:

wasmtime ./target/wasm32-wasi/release/hello_world_app.wasm

You should have your ''hello world" crate displayed in your terminal like so:

Hello, world!