WebAssembly Part 2 : Writing our first calculator program

In this tutorial we will learn how to create a calculator in WebAssembly.

If you aren’t aware of WebAssembly then you can learn here .

First let’s write our C program.

To compile this program using emscripten you can use the command

calculator.cpp is the file which we are going to compile ,

-ooutput file , we are requesting emcc to give output as calculator.js

-s WASM =1, →We are requesting emscripten to generate .wasm file, If we want to request emscripten anything, you need to use -s before the option.

-s “EXPORTED_FUNCTIONS=[‘_calculate’]”We are saying emscripten to export the calculate function to the Module object. We need to add _ before the function_name .

Now it will generate two files calculator.js and calculator.wasm .

The emscipten will bind all the function under the Module object. You can access your function using the Module object . eg : Module._calculate(10,10,3);

Now create need to create a html file to load the .js file.

The calculator.js file will load the calculator.wasm file. Keep the js and wasm file in the same folder.

Now we have all the files , inside the calculator.js the calculator.wasm .file is is loaded using fetch api. So now we need to create a server to serve the wasm file to the fetch call.

You can use live server plugin in your IDE to serve the files.

Or

You can use npm with express to create a server,

Steps to create server

Create a server file

The above code will tells the server to serve the wasm files.

In the server file we are telling the server to look inside the public folder ,if there is any static file is requested.

Now inside your project folder create a folder with the name public . Copy the index.html & calculator.wasm & calculator.js to the public folder.

Start the express server by node server.js

In the browser visit localhost:8080/index.html

Now you can check your function by calling Module._calulate(10,10,3) in the console.

Note

You can create the wasm file without saying -s WASM=1 , when you request a .js file.

Emscripten also generate .html file , with the current wasm and js file loaded.

When compiling like this you don’t need to provide -s WASM=1 , emcc automatically generate js and wasm file and load in the calculator.html file.

If you find this helpful surprise 🎁 me here.

Share if you feel happy.

Follow Javascript Jeep🚙 if you feel worthy.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Javascript Jeep🚙💨

Written by

Articles related to javascript

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co