DEV Community

Cover image for Rust and Web Assembly Application
Bek Brace
Bek Brace

Posted on

Rust and Web Assembly Application

Hey Folks!
Once again with a quick tutorial on how to create a wen application with Rust and web assembly.
The application is a Tax Calculator, a simple app that demonstrates how you can actually create a web application using your Rust knowledge, and leveraging this by using Web Assembly.

Here you ca watch the full tutorial, it will guide you step by step how you can create a simple application with Rust and WebAss ... embly

So, let us get a bit technical ...

What is WebAssembly?

WebAssembly (often abbreviated as Wasm) is a binary instruction format for a stack-based virtual machine.

It is designed as a portable compilation target for programming languages, enabling high-performance applications to run on web pages.

WebAssembly is intended to execute at near-native speed by taking advantage of common hardware capabilities.

How WebAssembly Works with Rust and JavaScript ?

WebAssembly runs in a sandboxed execution environment, providing a secure and fast way to execute code. It works alongside JavaScript, allowing web developers to leverage the performance of Wasm for compute-intensive tasks while using JavaScript for the rest of the application.

Also, WebAssembly modules can be written in languages like Rust and then executed in web environments alongside JavaScript. Rust, known for its performance and safety, is a great fit for writing WebAssembly modules. JavaScript can then be used to interact with these modules, providing a seamless integration between high-performance logic and dynamic web applications.

Creating a WebAssembly Tax Calculator with Rust
Step 1: Setting Up the Project
Make sure you have Rust installed - Check my Rust courses, or go directly to rust website to download and install Rust, but I think you already have it installed, so let's move on

Create a Rust Project

cargo new tax-calc-wasm
cd tax-calc-wasm

  • Update Cargo.toml: Open Cargo.toml and add the following under [dependencies] and [lib] sections to configure the project for Wasm:
[dependencies]
wasm-bindgen = "0.2"
wasm-bindgen is a crate that facilitates the interaction between Rust and JavaScript when targeting WebAssembly. 

[lib]
'lib'
This section of Cargo.toml is used to configure settings for the Rust library we are creating.
Enter fullscreen mode Exit fullscreen mode

crate-type: This specifies the type of output that the Rust compiler should produce. In Rust, a "crate" is a compilation unit, and crates can be either binary (executables) or libraries.
"cdylib": This stands for "C-compatible dynamic library." When targeting WebAssembly, this type indicates that we want to produce a dynamic library that can be used in environments expecting C-compatible calling conventions. Essentially, it tells the Rust compiler to generate a shared library suitable for WebAssembly.

Step 2: Writing the Rust Code

Edit src/lib.rs to implement the tax calculation logic

Step 3: Building the Project

Build the project using wasm-pack:

wasm-pack build --target web
Enter fullscreen mode Exit fullscreen mode

Step 4: Setting Up the Web Environment

Create an index.html file in the tax-calculator-wasm directory

Step 5: Serving the Project

To serve the project, you need a simple web server.
Install a Web Server: You can install one using npm:

npm install -g http-server

http-server .
Navigate to http://localhost:8000 in your web browser to see the tax calculator in action.

Have you ever worked with WebAssembly ? If Yes, did you with Rust or other programming language ?

Thank you so much for reading, watching and interacting.

Top comments (0)