web-assembly-whipshout

Crates.ioweb-assembly-whipshout
lib.rsweb-assembly-whipshout
version1.0.0
sourcesrc
created_at2021-09-12 03:02:39.177235
updated_at2021-09-12 20:42:19.566869
descriptionLearning Web Assembly
homepagehttps://www.npmjs.com/package/web-assembly-whipshout
repositoryhttps://github.com/Whipshout/WebAssemblyTest
max_upload_size
id449965
size8,553
Eduardo Sánchez (Whipshout)

documentation

README

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}`)
// }
Commit count: 13

cargo fmt