Understand the concepts of Wasm in Rust

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Should you Learn Rust and WebAssembly (Wasm)?

Rust is the programming language, and Wasm is a binary format that basically allows you to write super fast performing client-side code. Should you learn it now? Or is Rust and Wasm a need-to-nerd technology? What is Rust? What is WebAssembly (Wasm)? Rust is a multi-paradigm system programming language focused on safety, especially safe concurrency. WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine.

WebAssembly with Rust

WebAssembly with Rust. In this tutorial will take us on a journey from the basics of WebAssembly to using WebAssembly to integrate with JavaScript, build complete websites, and even host and interpret in Rust apps.

How to Compile from Rust to WebAssembly?

If you've written some Rust code, you can compile it into WebAssembly! This WebAssembly tutorial takes you through all you need to know to compile a Rust project to wasm and use it in an existing Web App.

Rust and WASM in less then 20 minutes

Rust and WASM in less then 20 minutes. What is Rust? What is WebAssembly (wasm)? Rust is syntactically similar to C++, but is designed to provide better memory safety while maintaining high performance. WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

Building wasm markdown renderer with Rust

Learn build a simple wasm module that renders markdown using Rust. What is Rust? What is WASM? What is WebAssembly? Rust is a multi-paradigm system programming language focused on safety, especially safe concurrency. WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine.