I was shocked as you are when I read the same words on other blog posts, but digging deeper into the topic, I got a lot of new perspectives towards web development. In this article, we will learn what is Webassembly and create a very simple program to understand the key features and how it works in the browser.
What is webassembly?
Simply put webassembly is a way to write low-level code ( like C, CPP, rust ) that a browser can understand. The process involved is as follows.
- write C code ( in this article ).
- convert the code to a wasm file.
- use fetch API to load the wasm file.
we are going to dive deep into every steps listed above shortly.
- when js encounters a variable say,
var a = 100it allocates the memory for a.
- the memory stays allocated till the variable has no other references (i.e, when no other function or variable using it).
If you have used any low-level language like C or CPP, you should take care of memory management. For example, in C you should use
malloc() function for allocating memory dynamically and
free()function to free the allocated memory. Technically you are doing the hard lifting for the language, this has its own advantages and disadvantages ( which is a topic for another article ) based on the requirements. The main advantage being you can program your code to use memory efficiently ( very efficiently ).
But in the case of a higher-level language, you cannot do much regarding memory management and it also consumes considerable resources. As a result, your application will get slower in execution. For this purpose, we use low-level code to solve some resource-intense problems. Example: game development, animation software, image processing, AR etcetera.
For so many years there were limitations with browsers executing such codes but with webassembly, there are numerous possibilities unlocked.
let’s dive into coding.
In this article, we will create a simple application where we add two numbers in C and display it in the browser. There are only two files index.html( containing our js and HTML code ) and program.wasm( generated wasm code ).
Note: we will be using WasmFiddle, to compile our C code to wasm. You can also create a C file locally and generate wasm using Emscripten SDK, but for the sake of simplicity, we are using the online tool.
C program ( using WasmFiddle ):
Here we will code a simple function that takes in two params of type integer and returns the sum of it.
- In the above window, we can see that we have a C function named simpleAdd(int a, int b) that accepts two params and returns its sum.
- after writing the code you have to click the button for compiling the C code to wasm, if you have any errors with your code you will be notified in this step.
- At first, the Js( on the top-right window ) will have a default code, replace that with the code above ( we will see in detail what the code means later in this article ).
- At last click the button for checking if Js can read the compiled wasm code, if there is no error you will see “3” under the “output” section.
Now that we have tested our code, we now have to download the generated wasm file to execute locally. Click the button to down our wasm code, by default the name will be “program.wasm”.
Note: you will also see button, this will download the text form of our wasm file ( which you can find at the below-left section of the website ). This code is used for debugging wiz beyond the scope of this article.
- We have a simple HTML file with two input elements for getting the numbers to perform an addition operation.
- A button to calculate when clicked and an answer span tag to display our answer.
- then we have
fetch()function to load out generated “program.wasm” file.
- Usually, if you have used fetch API before you would have converted the response to JSON, but here we are converting the response to an array buffer( as we are loading a wasm file not getting HTTP response ).
- WebAssembly object ships with all the latest browsers so you don’t need to include an additional library.
- Next, we add a click event for our button, and inside the callback, we have
compiledValue.instance.exports.simpleAdd()function, this simpleAdd refers to the function that we created in our C program which accepts two params and returns their sum.
Enter two numbers in the text boxes and hit calculate button, the result will be displayed.
You cannot directly open this html file in brower, you will be thrown with CORS origin error like below.
to handle this you can do one of the two things.
- You can serve the “program.wasm” file using Nodejs with CORS enabled. ( Or )
- The easy way if you are using vs code, you can use the Live server plugin for serving your folder from a server( this is only recommended for development purposes).
The market seems wide open for this technology as a matter of fact they are in use now and you might have used webassembly-built applications without knowing, you can check the list here. To name a few.
- tensorflow.js ( the ML library ).
- Google Earth
- autocad web ( web.autocad.com ).
Github repo: https://github.com/kishork2120/wasm_tutorial
Have fun coding!!!