🕸️ Using rust modules in JavaScript/Web Development (Part 1 / 3) [Plain JS]

Topics that will be covered:

Prerequisite:

Lets Begin

  1. Create a new project: cargo new --lib web
  2. cd web
  3. Change the contents of src/lib.rs to
#[no_mangle]pub fn add(first: i32, second:i32) -> i32 {  first + second}#[no_mangle]pub fn subtract(first: i32, second:i32) -> i32 {  first - second}#[no_mangle]pub fn multiply(first: i32, second:i32) -> i32 {  first * second}
extern crate web;fn main(){  println!(" 4 - 2 = {}",web::subtract(4,2));  println!(" 4 + 2 = {}",web::add(4,2));  println!(" 4 * 2 = {}",web::multiply(4,2));}
➜  web git:(master) ✗ > cargo run
Compiling web v0.1.0 (file:///Users/atulr/Projects/Hobby/rust/projects/web)
Finished dev [unoptimized + debuginfo] target(s) in 0.39 secs
Running `target/debug/web`
4 - 2 = 2
4 + 2 = 6
4 * 2 = 8

Using rust modules for front-end (plain JavaScript)

rustup update
rustup target add wasm32-unknown-unknown
cargo install --git https://github.com/alexcrichton/wasm-gc
rustc --target wasm32-unknown-unknown --crate-type=cdylib src/lib.rs -o web.big.wasmwasm-gc web.big.wasm web.wasm
  1. Modify the Cargo.toml file and add the following
[package]
...
...
[lib]
crate-type = ["cdylib"]
[dependencies]
...
...
➜  web git:(master) ✗ > cargo build --target wasm32-unknown-unknown --release
Compiling web v0.1.0 (file:///Users/atulr/Projects/Hobby/rust/projects/web)
Finished release [optimized] target(s) in 0.73 secs
  1. mkdir webwasm && cd webwasm
  2. touch index.html index.js
  3. mkdir assets
  4. mv path/to/the/web.wasm ./assets/web.wasm
 webwasm
├── assets
│ └── web.wasm
├── index.html
└── index.js
<html>
<head>
<title>Web assembly test</title>
</head>
<body>
<script src="./index.js" type="text/javascript"></script>
</body>
</html>
((function(){  console.log('loading...');
fetch('./assets/web.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes, {}))
.then(wasmContainer => {
const {add,subtract,multiply} = wasmContainer.instance.exports;
console.log('4 + 2 = ', add(4, 2));
console.log('4 - 2 = ', subtract(4, 2));
console.log('4 * 2 = ', multiply(4, 2));
}).catch(err=>console.log(err));
})())
((function(){
...
...
...
})())
fetch('./assets/web.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes, {}))
.then(wasmContainer => {
const {add,subtract,multiply} = wasmContainer.instance.exports;
console.log('4 + 2 = ', add(4, 2));
console.log('4 - 2 = ', subtract(4, 2));
console.log('4 * 2 = ', multiply(4, 2));
}).catch(err=>console.log(err));
const {add,subtract,multiply} = wasmContainer.instance.exports;
console.log('4 + 2 = ', add(4, 2));
console.log('4 - 2 = ', subtract(4, 2));
console.log('4 * 2 = ', multiply(4, 2));
➜  webwasm > http-server
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://10.31.194.120:8080
Hit CTRL-C to stop the server
Running rust modules in JS using Webassembly
  • Build wasm
  • Then copy over the generated wasm to the assets folder, etc.

Source Code:

References:

--

--

--

https://blog.atulr.com : I have moved from medium to my personal blog here. Follow me on twitter : https://twitter.com/a7ulr

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Implementing Monte Carlo Tree Search in Node.js

Getting started with Node.js

EmberCamp London 2017 Recap

Step 5: Functions! Part 2/ Zero to Front End Dev

Draw Your First Sketch With p5.js!

The Ultimate Beginner’s Guide to Programming using JavaScript — Objects [part-7]

Hello everyone!

React Typescript development setup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Atul

Atul

https://blog.atulr.com : I have moved from medium to my personal blog here. Follow me on twitter : https://twitter.com/a7ulr

More from Medium

Run JavaScript Code One Magnitude Faster Using WebAssembly

Cheerp 2.7: compile C++ to WebAssembly + JavaScript

Extracting a Type from a Custom String Value.

Practice Rust and TAURI: Make an Image Viewer #4

An example of selecting an image file.