Introduction to WebAssembly

This article aims to give a brief introduction to WebAssembly and its benefits.

Motivation

WebAssembly has been going through my mind quite often. I still remember the first time I heard about this new technology and an example where a game was running on the front end with a very good performance using only WebAssembly.

Since then I always come across an article talking about how big companies use WebAssembly to improve their services adding performance, new features, etc.

So I thought:

“Is this technology so complex that only big companies can handle it? Or it’s simple and easy to deal with?”

And then I started to dig.

What is WebAssembly?

According to Mozilla MDN:

“WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.”

So, you can write code in other languages (whether they are low or high level), generate a WebAssembly code that has a compact format and runs in an almost native performance, and brings new functionality to the front-end.

How cool is that?

With WebAssembly we could reutilize a processing image library written in C on the front-end. Or even we could utilize an artificial intelligence library written in Python on the front-end without rewrite it.

Think of the possibilities.

An important thing to notice is that WebAssembly isn’t there to replace JavaScript but to work along with it.

“But Vinicius, this story looks too good to be true. It must have some utilization problem or something like that.”

Compatibility

Recently WebAssembly has high compatibility across the most browsers.

Using caniuse.com you can check the compatibility of new features across different browsers and its versions.

Here you can see a print of the table showing the compatibility of WebAssembly:

On the top right corner, you can see that it has a 90% compatibility with all browsers (I had to limit the results to fit the print. In case of interest you can see everything here).

Projects made with WebAssembly

After discovering all of that I got curious to know who was using WebAssembly on nowadays, and then I found madewithwebassembly.com. It has a big collection of projects that utilize this technology and explain how it adds value to them. I separated three examples that I found interesting in different areas:

Tensorflow

Tensorflow is a library made to train and deploy machine learning models. In this post, they explain how they started to use WebAssembly to train their models and how they reached results with a ten times better performance.

Unity

For those who don’t know, Unity is a cross-platform game engine. So, using Unity, with the same code, you can distribute your game across multiple platforms. In this post of 2018, they announced the possibility of publishing games for the web utilizing WebAssembly, and they describe its benefits, since the amount of code that it generates to the improvement on memory utilization.

Google Earth

Google Earth is a software developed by Google that renders a 3D model of the Earth and allows the user to move it and zoom wherever he wants. In this post, they explain how WebAssembly helped to make Google Earth compatible with more browsers.

This article is separated into two parts. This is more focused on the theory of WebAssembly and the second is a more practical one.