How to use your native library in Javascript world

sendilkumarn
Dec 10, 2017 · 3 min read

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

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?

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.

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.

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.

Well, there you have it a .jsfile 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.

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

sendilkumarn

Written by

🚶explorer, learn ♻️ re-learn 📚 🎨 Design Solutions, 🎉 ❤️ Javascript, 👍 Java, 🦀 Rust, 👍 Go, Hacking on WebAssembly

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade