DEV Community

Sergey Gustun
Sergey Gustun

Posted on

My first Web Assembly, interesting.

oh my god

Please be patient 😂

Hi, if you as well as I decided to understand this topic, then you will need to be a little patient.

I did not succeed the first time.

So, first, let's install emcc

git clone


cd emsdk
./emsdk install latest

and further

./emsdk activate latest

and further...

source ./ --build=Release

Nice, you install emcc and now you can use compiler C/C++ to wasm , but you need install Python 2.7

Yeah, finish!

echo "source $(pwd)/ --build=Release > /dev/null" >> ~/.bashrc

Okay, let's go check.

Create index.html

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>WASM Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <h1>WASM Demo</h1>

    <script src="script.js"></script>
    <div id="container"></div>    

Create squarer.c

#include <emscripten.h>

int fib(int n) {
  int i, t, a = 0, b = 1;
  for (i = 0; i < n; i++) {
    t = a + b;
    a = b;
    b = t;
  return b;

int squarer(int num) {
    return num * num;

And create script.js

fetch('squarer.wasm').then(response =>
).then(bytes => WebAssembly.instantiate(bytes)).then(results => {
  instance = results.instance;
  document.getElementById("container").textContent = instance.exports._squarer(2) + instance.exports._fib(2);

And now go to compile file squarer.c

emcc -O3 -s WASM=1 squarer.c -o squarer.wasm 

Wooohoo! We compile file squarer.wasm
And now, we check our site with Web Server Chrome , he need a fetch

Top comments (0)