WebAssembly - The next Big Thing in Tech

Mar 02, 2020 • ☕️ 4 min read

WebAssembly (Wasm) technology is trending, even still at early experimental stage, it creates so much excitement from community and opens a lot of opportunities to make web platform even greater than ever.

What is WebAssembly?

In a nutshell, WebAssembly is a low-level assembly-like near-native performance language that can be run in modern web browsers, designed as a portable target for compilation of high-level languages like C++ or Rust, and plays nicely with other technologies in the web platform.

Relative to Javascript, WebAssembly offers predictable performance. It is not inherently faster than Javascript, but it can be faster than JavaScript in the correct use cases such as computationally intensive tasks, like nested loops or handling large amounts of data. Therefore, WebAssembly is a compliment to JavaScript, and not a replacement.

WebAssembly runs on all major web browsers, V8 runtimes like Node.js, and independent Wasm runtimes like Wasmer.

WebAssembly has Linear Memory, in other words, one big expandable array. And in the context of Javascript, synchronously accessible by Javascript and Wasm.

WebAssembly can export functions and constants, And in the context of Javascript, synchronously accessible by Javascript and Wasm.

Why was WebAssembly created?

It’s all about performance! JavaScript is a high-level programming language which makes it hard to achieve near-native performance like C/C++ which is important in cases of porting video games, video editing, 3D rendering to web apps.

Porting desktop apps to web is tempting because decrease the time to customers, no download and installation needed, sharing in the web is easy, just one step away from search results to awesome apps.

WebAssembly was created as a complement to current web platform, can communicate with JavaScript, has text-based format for developer and binary format to promote other compilers and tools targeting WebAssembly.

Even WebAssembly is designed to run on the web initially, it is also desirable for it to be able to execute well in other constraint environments like mobile and IoT devices.

WebAssembly will, over time, allow many languages to be compiled to the Web ultimately; developing web apps will be more powerful and productive when we can write in high-level non-JavaScript languages like Python, C++, Dart as long as they are compiled to WebAssembly.

How hard could it be WebAssembly?

WebAssembly encodes a low-level, assembly-like programming language. This language is structured around the following concepts:

Values — WebAssembly provides only four basic value types. These are integers and IEEE 754-2019 numbers, each in 32 and 64 bit width.

Instructions — The computational model of WebAssembly is based on a stack machine. Code consists of sequences of instructions that are executed in order.

Traps — Under some conditions, certain instructions may produce a trap, which immediately aborts execution.

Functions — Code is organized into separate functions. Each function takes a sequence of values as parameters and returns a sequence of values as results.

Tables — A table is an array of opaque values of a particular element type. It allows programs to select such values indirectly through a dynamic index operand.

Linear Memory — A linear memory is a contiguous, mutable array of raw bytes. Such a memory is created with an initial size but can be grown dynamically.

Modules — A WebAssembly binary takes the form of a module that contains definitions for functions, tables, and linear memories, as well as mutable or immutable global variables.

Embedder — A WebAssembly implementation will typically be embedded into a host environment. This environment defines how loading of modules is initiated, how imports are provided (including host-side definitions), and how exports can be accessed.

How can I use WebAssembly now?

So far, WebAssembly has been used for all sorts of applications, ranging from gaming (e.g. Doom 3), to porting desktop applications to the web (e.g. Autocad and Figma). It is even used outside the browser, for example as an efficient and flexible language for serverless computing.

Firefox and Chrome browsers currently support the wasm format on Linux, MacOS, Windows and Android. The latest versions of Edge and Safari now include WebAssembly support as well.

The WebAssembly ecosystem is at a early stage, more tools will undoubtedly emerge going forward. Currently there are four main entry points:

  • Porting a C/C++ application with Emscripten.
  • Writing or generating WebAssembly directly at the assembly level.
  • Writing a Rust application and targeting WebAssembly as its output.
  • Using AssemblyScript which looks similar to TypeScript and compiles to WebAssembly binary.

How does WebAssembly code look like?

Here is an example function illustrated in C++:

// C/C++
int factorial(int n) {
  if (n == 0)
    return 1;
  else
    return n * factorial(n-1);
}

Equivalent in WebAssembly binary format:

20 00
42 00
51
04 7e
42 01
05
20 00
20 00
42 01
7d
10 00
7e
0b

Equivalent in WebAssembly text format:

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

Conclusion

WebAssembly will play an important role in the web platform for coming years, open so many possibilities to enhance web performance, publishing libraries in binary format, writing web apps in multiple programming languages alongside JavaScript, and can become an universal compilation target even outside the web.

Reading More

Why nobody pays attention to your content

The truth is, it’s not really about the format of the content as much as it is the quality it provides people.

Become a Fullstack JavaScript Developer, Part 3: The Backend

Curated list of must-know backend related knowledge and technologies

Tailwind CSS

A low-level utility-first CSS framework to write inline styles for rapidly building custom user interfaces

Emscripten - LLVM to Web Compiler

An open source LLVM-based toolchain to compile C/C++ to asm.js and WebAssembly, a drop-in replacement for a standard compiler like gcc