web-assembly-whipshout

WebAssembly

This is a project to test out WebAssembly.

Link to rust project documentation

Link to wasm-bindgen documentation

Link to npm package generated by this project

JS/TS code to test the library

• First install package => npm i web-assembly-whipshout
  
  
• Copy and paste the code from below
  
  

Info

• Rust generates *.d.ts with types for TS
  
  
• JS values returned block uses JS variable types
  
  
• Rust values returned block uses Rust variable types
  
  
• Provider.new creates a new object using a Rust struct
  
  
• Cannot get the data from the provider directly like in JS, we have to use Rust methods declared in the Struct to get the data
  
  
• We can serialize/deserialize from Rust structures to JS objects and viceversa
  
  
• For JS arrays, we can use Rust vectors or JsArray from Rust library
  
  
• Remove comments of the for loop to test performance of fibonacci in Rust and JS (with 50 iterations takes a lot of time)
  
  
  

import {
  Provider,
  fibonacci,
  parse_string,
  parse_string_option,
  convert_to_provider,
  send_vector,
  send_array,
  return_array_modified
} from 'web-assembly-whipshout';

// JS values returned
let js_ok = parse_string("6")
let js_fail = parse_string("hello")

// Rust values returned
let rust_ok = parse_string_option("7")
let rust_fail = parse_string_option("world")

console.log("---------")
console.log("---------")
console.log(js_ok)
console.log(js_fail)
console.log("---------")
console.log("---------")
console.log(rust_ok)
console.log(rust_fail)
console.log("*********")
console.log("*********")
// -------------------------

const provider = Provider.new(1,"Magic")
const id = provider.id
const name = provider.name
console.log("---------")
console.log("---------")
// Returns the structure with a pointer
console.log(provider)
// Returns the correct info, needed specific methods to extract it
console.log(id)
console.log(name)
console.log("---------")
console.log("---------")
// Changes info of the structure using Rust setters
provider.id = 2
provider.name = "JetBrains"
const id2 = provider.id
const name2 = provider.name
console.log(id2)
console.log(name2)
console.log("---------")
console.log("---------")
// Convert Rust structure to JS object
const object = provider.get_object()
console.log(object)
console.log("---------")
console.log("---------")
// Convert JS object to Rust structure
const struct = convert_to_provider(object)
if (struct) {
  const id3 = struct.id
  const name3 = struct.name
  console.log(struct)
  console.log(id3)
  console.log(name3)
}
console.log("---------")
console.log("---------")
// Rust vector equals to JS array
const vector = send_vector()
console.log(vector)
console.log(vector[0])
console.log("---------")
console.log("---------")
// Gets JS array from Rust
const arr = send_array()
console.log(arr)
console.log(arr[0])
console.log("---------")
console.log("---------")
// Send JS array and get JS array modified
const arr_modified = return_array_modified([1, 2, 3, 4, 5])
console.log(arr_modified)
console.log("*********")
console.log("*********")
// -------------------------

function fibonacciJS(x: number): number {
  if (x === 0) {
    return 0
  }

  if (x === 1) {
    return 1
  }

  return fibonacciJS(x - 1) + fibonacciJS(x - 2)
}

// Test performance (rust > js, around +35 rust gets so much much much better)
// Shows execution times for each step, left rust, right js
// for (let i = 0; i < 50; i++) {
//   const wasmStart = Date.now()
//   fibonacci(i)
//   const wasmDuration = Date.now() - wasmStart
//
//   const jsStart = Date.now()
//   fibonacciJS(i)
//   const jsDuration = Date.now() - jsStart
//
//   console.log(`${i},${wasmDuration},${jsDuration}`)
// }