Web pages currently use two types of programming languages. On the one hand we have the server-side languages (such as PHP) that run on the website’s own server and send the information already processed to the user. And on the other hand, the programming languages on the client side that run in the user’s own browser. Although the most used language in client-side web programming is JavaScript, there are other alternatives that far exceed this language. And one of them is WebAssembly .
What is WebAssembly
WebAssembly is a frontend programming language that was announced for the first time in 2015. In 2016, the first demonstration of this language was made in Firefox, Chromium, Google Chrome and Microsoft Edge running a popular demo called “Unity’s Angry Bots”.
This programming language, abbreviated as WASM , uses a portable binary code format, bytecode). Thanks to it, the client-side scripts are fully executed in the browser. It is a low-level programming language, and although it was originally created as a compilation target for C and C ++ code , it is also compatible with other languages such as Go and Rust.
This programming language has proven to be considerably faster than other programming languages such as JavaScript. In addition, it has almost no limitations in terms of functions, since it allows you to run almost any desktop code directly in the browser. And with almost native speed.
WASM was not created to replace JavaScript or any other frontend language, but rather to complement them. The browsers are capable of executing it at the same time, being able to load modules created in WebAssembly in JavaScipt applications.
Currently, WebAssembly 1.0 is already included in the Firefox, Chrome, Safari and Edge engines.
WASM Features
With so many programming languages working today it is difficult to find critical differences between them all. But WebAssembly has bet mainly to differentiate itself from its rivals in two aspects. On the one hand we are talking about a fast and efficient programming language, an already low-level language that will allow us to execute binary code from the browser. By saving intermediaries or interpreters, the code executes almost instantly on the hardware, achieving an almost native speed.
On the other hand, this language has also bet on security . WASM uses techniques to load itself into memory safely (with a sandbox) so that the runtime environment is isolated from the rest of the system. This secure environment can even be implemented within existing JavaScript virtual machines, offering additional security against other elements. This language will apply the security policies of the system, as well as the browser’s own permissions.
Of course, everything related to this programming language is open . Its instructions can be printed in a textual language (we must not write in ones and zeros) and can be debugged, tested, modified and experimental with it without problems. In addition, it is designed for the preservation of the open web, being compatible with the same APIs as JavaScript and backward compatible with previous versions.
How to program in WebAssembly
This programming language is open, so anyone can use it for whatever they want. Also, although it is considered a low-level language, it is not really complicated to use.
Differentiating the three states
When talking about this programming language, first of all we must differentiate between three different states:
- Source code . The program code as such. This code is usually written in a different programming language, so it is not difficult to create programs, or modules, with it. We can choose the programming language we want in this step, as long as it is compatible. The most used are usually C ++ and Rust.
- WebAssembly Bytecode . When compiling the program, what we must do is choose that we want to do it in this format. The own compiler of our programming environment will be in charge of using the IDE instructions to convert the code of the other language to this format. What we will get at the end is a .wasm file.
- Machine code . When we have the compiled WASM file, we open it in the browser. And this is the one that is responsible for translating the code directly into machine language, that is, to binary.
Additionally, WebAssembly has an intermediate language known as WASM-text. This language comes to be like a high-level programming language for WASM. Files written in this language are saved in files with a WAT extension, and we will need a tool called ” WebAssembly Binary Toolkit ” to convert it to a .wasm file. It is not usually used since it is much more complicated than the other languages and, in the end, it is not worth it. But it exists, and you have to know it.
Create our first program
There are many ways to compile a WebAssembly program or module. We recommend, for example, to use the Emscripten SDK, which we can download from here .
Next, we will need our module written in this programming language. We are going to use an example of a “Hello World” written in C. Our file, hello.c, will have the following text:
#include <stdio.h> int main() {printf("Hello Worldn");}
Once we have our file written in C, we will use the ” Emscripten ” tool to pass it to WASM. We can run Emscripten from Python, or, better, from a Windows Subsystem for Linux. If we are programming from Windows, and we do not want to use Linux, then we must look for another equivalent compiler. To do it with Emscripten, we will open a Windows console, and we will execute this command in it:
emcc hello.c -s WASM=1 -o hello.html
The “WASM = 1” parameter is responsible for indicating to the program that what we want is to compile the code in this language. The result, once the instructions are finished, will be:
- A hello.wasm file, the binary.
- A JavaScript file that contains the necessary dependencies to translate from C to WASM: hello.js.
- The hello.html file necessary to open the wasm file in the browser and compile it.
Simply by executing the “hello.html” we will be executing the code in WebAssembly.
