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:

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.

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 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:

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:

Thanks for reading !

#Wasm #rust #WebAssembly

What is GEEK

Buddha Community

Running Rust in the Browser with Web Assembly

I’ve recently been working on a Rust course for the Qvault app. In order to write a more engaging course, I want students to be able to write and execute code right in the browser. As I’ve learned from my previous posts on this topic, the easiest way to sandbox code execution on a server is to not execute code on a server. Enter Web Assembly, stage left.

For those of you who don’t care about how it works, and just want to give it a try, checkout the demo: Rust WASM Playground.

How It Works

The architecture is fairly simple:

• User writes code in the browser
• Browser sends code to server
• Server adds some glue and compiles code to WASM
• Server sends WASM bytes or compiler errors back to browser
• Browser runs WASM and displays console output, or shows compiler errors

Writing code and shipping it to the server hopefully needs no explanation, it’s a simple text editor coupled with the fetch API. The first interesting thing we do is compile the code on the server.

Compiling the Code

Qvault’s server is written in Go. I have a simple HTTP handler with the following signature:

func (cfg config) compileRustHandler(w http.ResponseWriter, r *http.Request)

At the start of the function we unmarshal the code which was provided in a JSON body:

type parameters struct {
	Code string
}

decoder := json.NewDecoder(r.Body)
params := parameters{}
err := decoder.Decode(&params)
if err != nil {
	respondWithError(w, 500, "Couldn't decode parameters")
	return
}

Next, we create a temporary folder on disk that we’ll use as a “scratch pad” to create a Rust project.

usr, err := user.Current()
if err != nil {
	respondWithError(w, 500, "Couldn't get system user")
	return
}
workingDir := filepath.Join(usr.HomeDir, ".wasm", uuid.New().String())
err = os.MkdirAll(workingDir, os.ModePerm)
if err != nil {
	respondWithError(w, 500, "Couldn't create directory for compilation")
	return
}
defer func() {
	err = os.RemoveAll(workingDir)
	if err != nil {
		respondWithError(w, 500, "Couldn't clean up code from compilation")
		return
	}
}()

As you can see, we create the project under the .wasm/uuid path in the home directory. We also defer an os.RemoveAll function that will delete this folder when we are doing handling this request.

#golang #languages #rust #wasm #rust #rustlang #wasm #web assembly

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:

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.

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 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:

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:

Thanks for reading !

#Wasm #rust #WebAssembly

WASM, Rust, and You

JavaScript excels at performant asynchronous computation. But for CPU-intensive uses such as cryptography, compression, and encoding, it’s not always ideal. For that use case a new set of technologies, WASM & WASI, have existed. And the most accessible toolchain for targeting WASM is Rust.

In this talk, I’d like to kickstart your journey to learning Rust and WASM. I want to equip you with knowledge of how to do basic conversions from classes to structs, inheritance to traits, and finally delve deeper into Rust’s async execution model.

Slide deck: https://docs.google.com/presentation/d/1qmKno00C-mVJz6VjlJ2LcnVNtwQ6DQ_3bco1cmJ_auo/edit?usp=drive_web&ouid=107323653274021241527

#wasm #rust #javascript

ULTIMATE Rust Lang Tutorial! - Publishing a Rust Crate

The ultimate Rust lang tutorial. Follow along as we go through the Rust lang book chapter by chapter.

📝Get the FREE Rust Cheatsheet: https://letsgetrusty.com/cheatsheet

The Rust book: https://doc.rust-lang.org/stable/book/​​

Chapters:
0:00​ Intro
0:43 Release Profiles
3:00 Documentation Comments
4:32 Commonly Used Sections
5:04 Documentation Comments as Tests
5:50 Commenting Contained Items
6:29 Exporting a Public API
8:44 Setting up Creates.io Account
9:54 Adding Metadata to a New Create
12:14 Publishing to Crates.io
12:49 Removing Version from Crates.io
13:37 Outro

#letsgetrusty​​ #rust​lang​ #tutorial

#rust #rust lang #rust crate

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?

https://webassembly.org/
https://www.rust-lang.org/what/wasm

#rust #wasm #web-development #webassembly