WebAssembly is one of the biggest revolutions coming to the web, although it is neither Web nor Assembly. WebAssembly, also known as Wasm, is a fast, efficient, safe and low-level bytecode for the Web.
This means that, on one hand, it isn’t an assembly language but bytecode instead. Although both of them are similar in the sense that they are not high-level languages, they are easily understandable, which is something that does not happen with machine code. Thus, they can be classified into an intermediate language category between high-level languages and machine code. The main difference between assembly language and bytecode is that, the first one is created for CPUs while the second is created for virtual machines. That is, one is targeting hardware whereas the other is targeting software.
There is indeed a bytecode textual version, which is named WebAssembly Text Format (or just Wat!).
Additionally, although it’s usually said that Wasm is for the Web, the truth is that it’s not just for the web, because it can be also used for desktop applications, serverless or, even, Crypto and Smart Contracts.
WebAssembly was designed to have a binary file format that is easy to download and to compile to machine code. It also allows the code to be compiled at the same time that it is being downloaded. This feature is called Streaming Compilation.
The following way to load a Wasm module suggested by Das Surma will allow you to use Streaming Compilation robustly. It will work even if the Content-Type is not correctly set to
application/was (Firefox will normally fail, for instance) or even, if you are using Safari (which does not support
What were the main goals for Wasm design? To be codified in a binary code (very efficient, from the size and loading time point of view), to be executed at native speeds and, also, to take advantage of the common hardware capabilities available in different platforms.
In order to achieve these goals, the authors of Wasm had to build something new (using asm.js as the starting point) instead of using LLVM, Java or .Net bytecode. There fore, they developed a new binary instruction designed to be a portable target for compilation of high level languages like C, C++ or Rust.
“Wat” should I do if I want to program WebAssembly?
This is a block comment.
(func $add (param $p1 i32) (param $p2 i32) (result i32)
local.get $p1 ;; Push parameter $p1 onto the stack
local.get $p2 ;; Push parameter $p2 onto the stack
i32.add ;; Pop two values off the stack and push their sum
;; The top of the stack is the return value
(export "add" (func $add))
Applying the different filters we obtain images like these:
In order to use the project, just clone it from Github, and then install AssemblyScript dependency and compile index.ts AssemblyScript file with the following instructions:
- i32: 32-bit integer
- i64: 64-bit integer
- f32: 32-bit float
- f64: 64-bit float
Obviously, that means that we can’t pass the image as an argument of the call. In order to be able to use a picture’s information from Wasm, first, it should be stored in a shared area of the memory that it will be created using the WebAssembly.Memory class. This shared memory object is used as an argument of the Wasm instantiating function as you can see in the following code:
Before calling a Wasm filter, the picture data in the canvas is retrieved and copied into the shared memory. After that, the Wasm filter is called, then the result is read and stored in imageData. Finally, we send imageData to canvas context, redrawing the images.
As you can see, the AssemblyScript code is extremely similar, but with types and working at a lower level, and this is what allows developers to leverage all the Wasm potential. So, now, it’s your turn to start playing with AssemblyScript and grow your confidence on Wasm technology, which is meant to become more and more important in web development in the coming years!