Wasm Builders 🧱

Deepanshu Arora
Deepanshu Arora

Posted on

JavaScript and WASI

In this BlogPost I will provide a quick rundown of compiling my JavaScript code to a WebAssembly Binary and then successfully executing it on Wasmtime(A Standalone Wasm Interpreter).

I have made use Of Javy which is a JavaScript to WebAssembly Toolchain currently used for the beta Shopify Scripts Platform.

Additionally, I have also made use of msgpack-tools which contains simple command-line utilities for converting MessagePack to JSON and vice-versa.

JavaScript Code Snippet

We will create a Simple JavaScript Program that will return us the Fibonacci Sequence of an Integer Input.

Create a file named index.js or you can name the file whatever you want. In my case, I have named it index.js


//Simple Program to calculate Fibonacci Sequence of an Integer Input
function fibonacci(num){
  var a = 1, b = 0, temp;

  while (num >= 0){
    temp = a;
    a = a + b;
    b = temp;
    num--;
  }
console.log("Fibonacci Term is ",b);

}

var Shopify = {
  main: fibonacci
};

Enter fullscreen mode Exit fullscreen mode

Now, you might be wondering this is JavaScript Code and fibonacci function is also written in JavaScript as per the syntax but what is the role of this Shopify Object here.

Well the Javy Toolchain expects that our JavaScript code needs to define a global object where Shopify.main points to our main function. In this case I have defined my main function as fibonacci

Creating a WASM Binary out of the Source Code
STEP 1

Now, in order to create a WASM Binary out of the JavaScript source code, we will need our two weapons in hand Javy toolchain and msgpack-tools under our belt.

Navigate to /javy/target/release directory to generate the WASM Binary using the ./javy executable. You will have to save your JavaScript source code in this directory as well.

While installing javy you can also install it as a global dependency and then you won't need to navigate to this directory in order to make use of the executable. In my case, I haven't installed it globally that's why I have navigated to this directory.

./javy index.js -o index.wasm
Enter fullscreen mode Exit fullscreen mode

After executing this command, you will have the WebAssembly Binary in your directory named index.wasm

STEP 2

After you are done generating the WebAssembly Binary, you will have to create a JSON file in this same directory.

The reason you need to create this JSON file is because the default implementation of Javy expects a msgpack input to be sent through stdin

10
Enter fullscreen mode Exit fullscreen mode

and the reason I have passed 10 as value in JSON is because if we have a look at our Fibonacci Function, it is asking for a parameter num in order to calculate our Fibonacci term, and by passing 10 as value it will be substituted in place of the parameter.

STEP 3
Now, since the default implementation expects a msgpackinput, we will have to convert our JSON to a suitable msgpack format and we will accomplish this using the msgpack-tools.

json2msgpack -i input.json | wasmtime run index.wasm | msgpack2json
Enter fullscreen mode Exit fullscreen mode

If we have a look at this command first of all we pass our input.json file as input to json2msgpack and then execute it on the top of Wasmtime. Also since the message will be messagepack encoded, so you will need to decode it with a tool like msgpack2json.

Step 4

Finally you will be able to see your Output displayed and working flawlessly on Wasmtime

Latest comments (0)