WasmFiddle

JSFiddle, and tools like it, allow you to test code in the browser to see how it will work instead of having to write an application just to test something. Another advantage of tools like this is that you can share your example code on sites like Stack Overflow.

It turns out that there is a similar tool for WebAssembly called WasmFiddle: https://wasdk.github.io/WasmFiddle

If we replace the code that is in the top-left pane with our code below we can compile the code by pressing the Build button:

int add(int x, int y){ return x + y; }

Because we changed the method in the top-left pain from ‘main’ to ‘add’, we need to adjust the logic in the top-right pane from this:

log(wasmInstance.exports.main());

to this:

log(wasmInstance.exports.add(1, 2));

Once you make this change, you can click the Run button which will display the result of the call in the bottom-right pane.

Note: One difference between WasmFiddle’s output as compared to Emscripten’s output is that there is no underscore character before the method’s name when using WasmFiddle.

To share your WebAssembly code with someone, you first need to click on the Share button (above the top-right pane) which will update the URI both in the browser’s address bar and just above the top-left pane. You can then copy and share the address.

Inline WebAssembly Modules

WasmFiddle also allows you to download the wasm file or simply view the file’s text format or binary representation in the bottom-left pane.

The binary representation from WasmFiddle offers an interesting option when it comes instantiating WebAssembly modules. With the array that you’re given, you can bypass the fetch of the wasm file and instantiate a WebAssembly module directly with the array.

The following is some sample code using our Code Buffer from WasmFiddle:

var wasmCode = new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 135, 128, 128, 128, 0, 1, 96, 2, 127, 127, 1, 127, 3, 130, 128, 128, 128, 0, 1, 0, 4, 132, 128, 128, 128, 0, 1, 112, 0, 0, 5, 131, 128, 128, 128, 0, 1, 0, 1, 6, 129, 128, 128, 128, 0, 0, 7, 144, 128, 128, 128, 0, 2, 6, 109, 101, 109, 111, 114, 121, 2, 0, 3, 97, 100, 100, 0, 0, 10, 141, 128, 128, 128, 0, 1, 135, 128, 128, 128, 0, 0, 32, 1, 32, 0, 106, 11]);

WebAssembly.compile(wasmCode).then(wasmModule =>

WebAssembly.instantiate(wasmModule, g_importObject)

).then(instance =>

//Warning: No underscore character when using WasmFiddle
alert(instance.exports.add(1, 2))

);

Note: WasmFiddle shows the use of WebAssembly.Module in the top-right pane but that is not recommended because that compiles the module synchronously. The recommended way to compile a module is by using the asynchronous WebAssembly.Compile method as shown in our example above.

If you’d like to know more about WebAssembly, the following are a few articles that might be of interest:

Written by C. Gerard Gallant,
Software Developer at Dovico.com


Originally published at cggallant.blogspot.ca

Check out Gerard’s new book: WebAssembly In Action

WebAssembly in Action introduces the WebAssembly stack and walks you through the process of writing and running browser-based applications. Expert developer Gerard Gallant gives you a firm foundation of the structure of a module, HTML basics, JavaScript Promises, and the WebAssembly JavaScript API.

Share:


About the Author

For 28 years, Dovico has been providing time tracking and timesheet software for clients worldwide. Manage your projects, teams, capture time and generate reports.



Premium WordPress Themes