Do you have an existing library in native languages (like C, C++)? Have you ever wondered or wanted to use that library in your node application or browser?

If you have answered ‘yes’ for both the questions, then this post is for you.

WASM is yet to have fully spec’ed Garbage Collection, which also delays the direct DOM interaction via the WASM. So, if you ever want to interact with your DOM, you have to wait. Garbage Collection is something that can be expected in a year. 🦄

So consider that you have a native application, that is blazingly fast (as we all know)🏃. How cool will that be, if we get those benefits on the web straightaway?

🗒 Yet I have a personal feeling, that there is no stronger case to use web assembly. It definitely promises a lot and offers easy wins. We still have to wait and see how they mature and use them in more optimized way

The first step is to convert your native application into something that is understandable by the browser or node with tools like emscripten / binaryen

Wait, What?

Take your native application. consider that the application is written in cpp.

Specify the cpp compiler with -std flag, currently only the version11 is supported. The flag -O2 instructs the compiler to generate the output with more Javascript optimizations and LLVR optimization.

You can have options in choosing the optimizations that you need. Check out this link

OPTIONS = -std=c++11 -O2 -I./binaryen/src/

Since WASM is a stack machine with a list of assembly instruction set. We need to explicitly list down the exported_functions. In order to call them from the javascript world.

FLAGS = -s EXPORTED_FUNCTIONS='["_assemble"]' -s

Here we are exporting an _assemble function from our native application.

We also need to make sure that the _assemble function is exported from the native code too.

For example in cpp

or in rust (sample example shows how to export)

Then in the next step, build step. We define the options(as mentioned above), starting point of your native library (with all its dependencies) and then the output files along with flags (as mentioned above)

build: emcc $(OPTIONS) $(CPP_FILES) -o my-awesome.html $(FLAGS)

Note that we have passed output name here with a .html extension, you can also specify .js or .wasm here. .html will generate a html, js and a memory file. The js file generated is a huge one, especially because it packs its own virtualFileSystem, path and its own memory handlings.

The .mem is the static memory initialization that is required for your asm module to run. This also helps to make your asm js to load async and do things.

ℹ️ The .mem will not be generated if you are generating a WASM module instead of asm.js .

Well, there you have it a .js file that can run on browser or node, and you can run the .html and your awesome compiled native code runs on your browser or node.

🗒 The resulting .js will create its own filesystem that means you cannot use files or map files straight away. You can hack around this follow this link. (to check on the APIs that are available for the same.

Follow this link for the awesome tutorial 📚

https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API

If you are new to webassembly, check out this awesome kickstarter

https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

Sample code about how to convert your native library to something executable in node or browser at

https://github.com/sendilkumarn/wat-to-wasm-with-asm