WebAssembly – the new ‘web 3.0’

What is WebAssembly?

WebAssembly or WASM is a Compiler Target (code generated by compilers) with a binary format, which allows us to execute C, C++, and Rust on the browsers with a performance close to native code.

An exciting aspect of WebAssembly is that it wasn’t made to be a substitute for JavaScript but to work alongside it. At the same time, this combination can provide the performance of typed/compiled languages and the flexibility of JavaScript. Using the WebAssembly API on JavaScript, you can load modules WASM on JS application and share functionalities between them.

Why it Matters

For starters, the new WebAssembly format promises significant gains in terms of parsing performance:

The kind of binary format being considered for WebAssembly can be natively decoded much faster than JavaScript can be parsed (experiments show more than 20× faster). On mobile, large compiled codes can easily take 20-40 seconds just to parse, so native decoding (especially when combined with other techniques like streaming for better-than-gzip compression) is critical to providing a good cold-load user experience.

– from the FAQ of WebAssembly

Note that we are talking about parsing performance, not necessarily execution performance. Because in many cases it will run on the existing JavaScript engine. However, this increase in parsing performance alone will permit the creation of web software that would have been impractical to develop before.

How it Works

founding principle of WebAssembly is to integrate well with the existing JavaScript world. This ranges from technical things, such as interoperability and sharing security policies (same-origin), to tooling integration, such as supporting the View Source functionality of web browsers.

To accomplish this goal, WebAssembly defines both a binary format and an equivalent text format, for tools and human readers. Technically, the textual format uses S-expressions, so it will look like the following:

(func (param i32) (local f64)
  get_local 0
  get_local 1)

However, the tools will probably show something more similar to this representation (example from the documentation).

C++ Binary Text
int factorial(int n) {
  if (n == 0)
      return 1;
  else
      return n * factorial(n-1)
}
20 00
42 00
51
04 7e
42 01
05
20 00
20 00
42 01
7d
10 00
7e
0b
get_local 0
i64.const 0
i64.eq
if i64
i64.const 1
else
get_local 0
get_local 0
i64.const 1
i64.sub
call 0
i64.mul
end

You may wonder why C++ is used as an example. That is because the objective of the initial release (MVP) of WebAssembly was to support C/C++. Other languages will come later; at the moment, they are in development. This was chosen for a couple of technical and practical reasons:

  • The MVP of WebAssembly does not support garbage collection (it is in the works).
  • The implementation of the C/C++ to the WebAssembly compiler can rely on a ready to use and battle-tested tool like LLVM (one of the most used sets of compiler tools).

The WebAssembly developers use the LLVM to cut the amount of work necessary to get a working product. Furthermore, this allowed them to easily integrate with other tools that work with LLVM, like Emscripten.

With an MVP there can be testing and usage by real programmers, which allows developers to improve WebAssembly accordingly.

Summary

We have seen a short introduction to WebAssembly: what it is, why you should care, and how you can use it. It is going to be a great platform for the further evolution of the web: it will make developing for the web easier and more efficient.

Its development is backed by people at Mozilla, Microsoft, Google, and Apple. The attention to the tooling is another proof of the importance of WebAssembly: it is going to change the web fast.

You can use WebAssembly today and look at it in more depth with the documentation on the MDN website. If you are interested in knowing more details about the format you can read them on the official website. You could also look the Emscripten documentation to understand issues related to interoperability between JavaScript and the C/C++ code.

Leave a Reply

Your email address will not be published. Required fields are marked *

Let’s get to work.

Have an unsolvable problem or audacious idea? We’d love to hear about it.