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 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.
If you want to know more, you can watch this video
Why Use WebAssembly
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
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.
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.
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
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 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.
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.
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
If you are reading this WebAssembly tutorial as a Rust developer than this book is for you
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.