Understand the concepts of Wasm in Rust

Ever tried WebAssembly with Rust Programming? If not, then this article would help you to understand the concept of Wasm(WebAssembly) and how to deal with it using Rust.

What is Web-Assembly(Wasm)?

WebAssembly(Wasm) is a binary instruction format and machine model. And designed to give support for deploying on the web for client and server applications using high-level languages.

Why WebAssembly with Rust

Avoid code redundancy by importing ready-made JavaScript functions in Rust
Rust provides reliable performance to JavaScript and low-level control as well
Rust with Web-Assembly provides small size binaries(executable)

I think this would be enough to get a quick overview of Wasm with Rust. Now, let’s start with the implementation part of the Wasm using Rust Programming.

Note: “Before delving into the implementation part please get a basic understanding of JavaScript”.

Steps Involved to Integrate Wasm with Rust:

Setup Wasm
Create a Project
Build Project
Provide Web Support
Run Project

Setup Wasm

This is the first step to work with WebAssembly. Please ignore this step if you already did.
Before going ahead, we have to install wasm-pack for building, testing and publishing Rust’s generated WebAssembly.
Or for more information related to configuration click here.

Create a Project

We are done with the configuration of WebAssembly. Now our next step is to create a project. This time we’ll go with the library project.
Creating a project:

cargo new project_name --lib

This command will create a project which contains:

This is image title

Now we have to add WebAssembly crate [wasm_bindgen] in the dependency section and a crate-type in the [lib] section of Cargo.toml which provides an interface to JavaScript in Rust.

This is image title

After updating Cargo.toml, now we have to write code which uses JavaScript function.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    fn alert(message: &str);
}

#[wasm_bindgen]
pub fn start() {
    alert("You have completed your first step towards WASM!!!");
}

In the above example, we have used an alert() function of JavaScript and created Rust’s function start() which internally calls the alert() function to display the message.

Build Project

We are done with the coding part, our next step to build Rust’s source code to WebAssembly by using** wasm-pack**.
Run this command to build your project for WebAssembly

wasm-pack build

After successfully building your project, wasm-pack will generate a directory called pkg and it contains multiple files which are:

This is image title

This will be provided by wasm-pack so let’s understand some of the files like:
wasmblog_bs.wasm => Wasm binary generated by Rust compiler from our code-base.
package.json => this contains metadata about the generated JS and Wasm package.
wasmblog.d.ts => this is related to TypeScript.
wasmblog.js => generated by wasm-bindgen contains JS supporting metadata related to importing JS functions into Rust.
wasmblog_bg.t.ts => related to TypeScript, so not in our scope.

Provide Web Support

Now its time to leverage the power of WebAssembly by giving web support to the Wasm binary.
To provide web support we have to run a command:

npm init wasm-app web_package_name

Before running this command please make sure that npm is already installed in your machine, here we used a template of create-wasm-app.
So, through this command, we can use our package(project) into web-page, and this command will also generate a package like the previous command which contains:

This is image title

Let’s understand some files which will help us to do our task:
index.html => html file for the web-page. It loads the bootstrap.js.
index.js => entry point of web-page’s JS. It will import our package and will use the show() function.
package.json => pre-configured file with webpack and webpack-dev-server dependencies.
webpack.config.js => this file configures webpack and its local development server.

Because we have used a ready-made template(create-wasm-app), so we have to change some pieces of code in some files to work with our code-base.
Files that needs changes are:
=> package.json
=> index.js

package.json:
In this file, we have to provide the path of a directory generated by the wasm-pack build command in the devDependencies section. So that this web-support will able to find our functionality.
Add [“wasmblog”: “file:…/pkg”,] this line into the devDependencies section.

index.js :
In this file we need to change the import file to our package which is wasmblog.
Like:

import * as wasm from "wasmblog";

wasm.show();

Now the last step is to install the npm package inside the web-package, as we have added a new dependency in the package.json file, using [npm install].

Run Project

All set!!! now its time to run our project.
Inside the web package run this command:

npm run start

Now, go to your browser and hit localhost:port provided by your server to see the Html page and an alert box that we have used in our code. Like:

This is image title

Thanks for reading !

#Wasm #rust #WebAssembly