Simple WebAssembly Tutorial For Beginners

what is web assembly

Welcome to WebAssembly tutorial. In this article, we will be discussing what WebAssembly is. The second question that arises is, why we need WebAssembly? In the end, we will also write a short WebAssembly tutorial and how you can also set up WebAssembly yourself.  It’s a new technology and I am also a beginner. If you spot something that is wrong, make sure you comment and inform.

Lets us start with the WebAssembly tutorial!

What Is WebAssembly

webassembly tutorial

We have all used websites that were written in javascript. We could spot some cool animations and calculations. That’s what javascript is for, right? Javascript is a high level, a dynamic programming language that allows us to make the web pages interactive. JS is one of the fastest languages and is the most popular language when it comes to working with web pages.

Javascript helps us in manipulating the DOM and make the user experience better. When there is some kind of on-page calculation, Javascript helps us in achieving that. But, there are some limitations, JS can not work fast when it comes to really complex calculations. That’s where WebAssembly comes in.

WebAssembly is intended as a compilation target. You will write code in some other programming languages like C/C++ or Rust. It will then get translated(compiled) to WebAssembly files. These files then can be transferred over a browser whenever some user requests them. This will allow us to run applications in a web browser that require heavy calculations. You can have video editors, high-end videogames, and even CAD programs.

WebAssembly or Wasm is a low-level bytecode for the web. One thing to remember is that WebAssembly will not replace javascript, it is an improvement to Javascript. It runs along with JS, JS is like a manager that tells WebAssembly when to run. WebAssemblies are safe and portable. They are secure. You do not have to worry about memory overflows or security issues and they are very very fast. WebAssemly is supported by popular browsers like  Chrome, Firefox and Edge. I hope you have a clear idea of this technology in our WebAssembly tutorial.

If you want to know more, you can watch this video

 

Why Use WebAssembly

webassembly tutorial

As discussed above, there are lots of reasons that make WebAssembly demanding. First of all, its because WebAssembly is specifically designed to handle big computations. They are compact and fast. JS cannot provide us with such kind of performance. We are reaching the limits of what Javascript can do. It is the nature of JS that hinders us from doing more complex stuff.

Javascript is a high-level, loosely typed language which is also a problem in itself. It has a programmer-friendly syntax. There is a lot of abstraction and the programmer does not have to think about a lot of things. You do not have to specifically define data types. When you add two variables, JS interpreter goes through lots of processing and tries to identify whether the variables will be strings or integers or floats. This is a time taking process which effectively slows down everything.

As you can see, JS is not effective in big computations and WebASsembly can help in that. It will give us very good performance time and will execute very very quickly.

How WebAssemly Works

webassembly tutorial

Although in itself the whole process is very complex and can vary. I will try to explain these steps in simple words in my WebAssembly tutorial.

Mostly, people write the WebAssembly modules in C language, you can also write it in C++ or Rust. Now, there is support for many other languages too. This source file is then compiled via a compiler called “Emscripton Compiler“. The output is “.wasm” files. Theses files are basically byte-code. This is what you can call a file that is written in WebAssembly. The browser cannot directly read the .wasm file. They need a “Javascript glue code”. It is a javascript file that helps in running WebAssembly. This JS file can be given to the browser and then you will have WebAssembly integrated into your browser.

webassembly tutorial

Next thing that we will see in our WebAssembly tutorial is, how you can WebAssembly by yourself. It will be a simple step by step short process that will be easy to follow.

How To Run WebAssembly Code

In this section of our WebAssembly tutorial, I will show you, how you can compile a C language code into WebAssembly and then how you can integrate it into your application. We will make an extremely simple application that will help you in getting an idea.

What You Will Need

  • A browser that supports WebAssembly, Most popular browsers now support WebAssembly, you can just update them to a newer version.
  • You will also need a compiler that can translate C code to WebAssembly. The most popular compiler for this purpose is Emscripten. There is another option but this one is easy to use.
  • A simple web server that can handle requests and show you the result.

We will now step by step go through the process in our WebAssembly tutorial.

1. Coding in C

I will write a simple program in C that simply displays “Hello World” in the console when the page is loaded.

webassembly tutorial

This code will be compiled into WebAssembly. When it will be loaded into the browser, the main function will run automatically and the “printf” function will be converted into “console.log”. If you go to the console, you will see “Hello World” printed there.

2. Compiling C to WebAssembly

In my WebAssembly tutorial, I have talked a lot about how you can run code other than Javascript. So now let’s see how you can compile C language’s code into WebAssembly. We can easily do this by typing a simple command. Go to the directory where the source code is and then type this.

emcc hello-world.c -s WASM=1 -O3 -o index.js

let’s see what is happening in this command

  • emcc – Here we are calling the Emscripten compiler
  • hello-world.c – This is the name of our file in which the source code is written
  • -s WASM=1 – This tells that we are working with WebAssembly
  • -03 – This is the level that the code will be optimized. 3 is a very high number
  • -o index.js – This will be the name of JS file that will contain all of the glue code that the browser will read.

If you are following my WebAssembly tutorial, you can now press enter and compilation will begin. After the compilation, you will see two files in your directory. “index.wasm” and “index.js”. The index.wasm is the WebAssembly code and index.js is the glue code that the browser will read.

3. Integrating With The Browser

Now just like we include other JavaScript code in our HTML, this is exactly how we will include our JS glue code in our WebAssembly tutorial. We will create a simple HTML file and code into it like this.

webassembly tutorial

Now if you start a local server of your choice and open your browser. After opening the browser, open the console. There will be a message that will say: “Hello World”. This is the message that we wrote in our C code.

Conclusion

Congratulations! if you were following my WebAssembly tutorial than you have reached the end. You now know the basics of WebAssembly. There are lots of things that you have left to learn. This was just the start but congratulation, you took the first step by going through my WebAssembly tutorial.

Books For Help

I will list some books that may help you in learning WebAssembly.

Learn WebAssembly (Mike Rourke)

The first definitive guide on WebAssembly to help you break through the barriers of web development and build an entirely new class of performant applications.

  • Generate WebAssembly modules from C and C++ using Emscripten and interact with these modules in the browser
  • Learn how to use WebAssembly outside of the browser and load modules using Node.js
  • Build a high-performance application using C and WebAssembly

webassembly tutorial

Get On Amazon

Programming WebAssembly With Rust (Kevin Hoffman)

Learn how WebAssembly’s stack machine architecture works, install low-level wasm tools and discover the dark art of writing raw wast code. Build on that foundation and learn how to compile WebAssembly modules from Rust by implementing the logic for a checkers game. Create wasm modules in Rust to interoperate with JavaScript in many compelling ways. Apply your new skills to the world of non-web hosts, and create everything from an app running on a Raspberry Pi that controls a lighting system, to a fully-functioning online multiplayer game engine where developers upload their own arena-bound WebAssembly combat modules.

If you are reading this WebAssembly tutorial as a Rust developer than this book is for you

webassembly tutorial

Get On Amazon

WebAssembly is an emerging technology and it will be very very popular in a few years. If you liked this article, you can share it with other people. It will be of great help. Cheers!

You can also check out our other articles.