What is WebAssembly and what makes it so powerful ?
May 10, 2019Guillaume Cornet7 min read
At its beginning, the web gave us the possibility to view pages online that contained links to other pages, and that was basically it. All the applications, like text editor, were run on the desktop.
But since then, our way of using the web has significantly changed, and it is now used for many different purposes, from working simultaneously on a document to browsing social media or playing online games. The user experience is the main focus, and as a consequence, the demand in terms of performance is constantly increasing.
The web, an incredibly efficient working tool
We tend nowadays to take the web for granted, forgetting that it has completely changed our way of working together.
I remember being in middle school and having to prepare a presentation with a friend. We were using Microsoft Office Powerpoint to do the slides.
The first step was to install Powerpoint on the new computer my parents had just bought. After inserting the 3 installation CDs, the setup was complete.
Then, I had to share the project with my friend. The problem was that I had the brand new Powerpoint 2007 version, so when he tried to open the project with his 2003 version, all the outline was broken.
I had to re-export the project in compatibility mode and re-send it to him, removing some slick animations in the process.
Finally, the day of the presentation finally came, so we opened the folder on the USB stick to get the presentation only to find...
So when google slides arrived, it opened a new perspective :
- Work instantly, using your internet connection and the URL to access the project.
- On a unique version, saved in real time on a server accessible by anyone with the right access.
- With no compatibility issue, since only one version of the application is available.
Once you make this realization for google slides, you start thinking: why do we still have desktop applications, like Photoshop? Wouldn't it be much more convenient to be able to run it in the browser?
Limited, you say ?
Because of the way it was conceived, they are inherent limitations to the language. To understand clearly what these limitations are I need to make a brief reminder of what the two main types of programming languages are and how they work.
The reason we need programming languages in the first place is that our computers only speak in bits sequence (0 & 1).
This is a CPU (Central Processing Units). It contains an Arithmetic and Logic Unit that does elementary operations (addition and subtraction) and a short term memory, the registers. When it receives a bit sequence, it is interpreted as an elementary instruction. For instance, this sequence would mean: add the content of R2 to the content of R1 and put the output into R3.
We humans do not have the ability to read easily the bits sequence, which is why we created programming languages.
There are two main types that I would like to describe :
- Compiled language
- Interpreted language
For compiled languages, the program is read in two key steps :
- First of all, a compiler transcribes the program written as a whole by the developer into a binary file.
- Then, this binary file is read and executed by the CPU.
This enables the compiler to make some optimization of the code before the execution so that it is faster and more efficient. The counterpart of it is that there is a compilation time every time the developer needs to execute the program after making a small modification.
For interpreted languages, the compilation and the execution are done simultaneously. During the execution, the interpreter reads the program line by line, compiles the line into binary and executes the binary before going to the next line.
It makes it easier to test small modification in your code because it saves the compilation time, but the consequence is that no global optimizations are made, and this impacts the execution time of the code.
While the code is being run, this JIT analyzes the code and tries to optimize the parts that are frequently called. This way, if the interpreter ever runs into the same part again, it will not translate it and use the pre-compiled part instead. It is a compromise between the two types of programming language.
Source : Lin Clark, A cartoon intro to WebAssembly
You can see it easily on this codepen: https://codepen.io/jtiscione/pen/yxybjX.
But that was before WebAssembly.
A small reminder: an assembly language is a programming language that describes the elementary operations that a machine has to make. It is specific to a type of processor, which means that there are many different assembly languages.
WebAssembly is similar to ordinary assembly language, the main differences are :
- You do not write directly in WebAssembly, you compile it from higher-level languages.
- It is made to be executed directly from the browser.
- There is an extra level of abstraction on WebAssembly so that it can be executed on all types of processors.
What can you do practically with WebAssembly ?
I will show you in the next parts different applications of WebAssembly, but what you should remember is that it allows you to use the same base code for your desktop and browser applications.
Small code example
This is inspired by a conference of Google I/O 2018.
I have a C++ file that I am going to compile into WebAssembly using Emscripten. To get more information about the compiling process, you can check the official website of WebAssembly.
In this file, we are going to use the C math library in order to use mathematical functions to animate a blue circle in the DOM.
You can view the result here :
First, I import the emscripten module, which allows me to define two js functions that interact with the DOM, drawCircle() and clearCanvas(). To do so, I need to make sure I wrap them with the EM_JS() function.
Then, I define a “real” C++ function. I have to prefix its definition by EMSCRIPTEN_KEEPALIVE so that the compiler does not ignore my function during the compiling process.
The “update()” function is the one that I will call in my html file at regular intervals so as to animate the DOM.
Once my C++ file is written, I can compile it using emscripten. I have two files as outputs, a pure .wasm binary file, and a .js file that contains all the necessary code to fetch the .wasm file and use it in my code.
Note: the .js file that is generated has over 1000 lines, yet you can easily write a simple js code yourself to import a wasm file and use one of its exported functions, as it is done here: https://codepen.io/SitePoint/pen/BrZeVZ.
When it comes to performance on a browser application, WebAssembly can be particularly useful. Take for instance Figma: it is a useful tool for web designers and product owner that can instantly see all the designs of their application.
It also is a wonderful opportunity to take browser video games to the next level, you can check for instance the zen garden.
I hope that you are now convinced of the benefits of WebAssembly and that you will use it when needed in your next projects. And if you are worried about browser support, note that WebAssembly is supported on all of the modern browsers except IE 11.