๐Ÿ•ธ๏ธ Using rust modules in JavaScript/Web Development (Part 1 / 3) [Plain JS]

Atul
Atul
Apr 3, 2018 ยท 5 min read

Topics that will be covered:

Prerequisite:

Lets Begin

#[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
[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
 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

Source Code:

References:

Atul

Written by

Atul

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and weโ€™ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium โ€” and support writers while youโ€™re at it. Just $5/month. Upgrade