WebAssembly Part 2 : Writing our first calculator program

Javascript Jeep🚙💨

Published in

Frontend Weekly

3 min readMay 30, 2019

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.

// calculator.cpp#include<stdio.h>extern "C" {   double calculate(double num1, double num2, int operation) {      double result = 0;      switch(operation) {
         case 1 : 
              result = num1 + num2;
              break;         case 2:
            result = num1 -num2;
            break;         case 3:
            result = num1 *num2;
            break;         case 4:
            result = num1 /num2;
            break;       }       return result;  }}

To compile this program using emscripten you can use the command

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

-o → output 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.

// index.html
<html><body>      <script src = "calculator.js"></script></body></html>

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.

You can use npm with express to create a server,

Steps to create server

install node // now create a node projectnpm init
//then install express bynpm install express@latest // this install latest version of express

Create a server file

const express = require('express');   const app = express();    app.use(express.static('public', {          setHeaders : function (res, path, stat) {            if(path.endsWith(".wasm")) {                res.set('Content-Type','application/wasm');             }      }}));app.listen(8080, () => console.log("Server 🏃‍ ️@  8080"));

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.

WebAssembly Part 2 : Writing our first calculator program

Written by Javascript Jeep🚙💨