I have a toy project wrote in Rust, then I make it compiled to WebAssembly. To my surprise, it’s not so complicated and everything works perfectly.

My computationally intensive application now running on Web client with a expected performance. This wonderful experience tempted me to learn more about WebAssembly. I will share my understanding about WebAssembly in this article.

The history before WebAssembly

Every new technology will be introduced to solve some existing problems. WebAssembly was invented to solve the issues of Web.

Nowadays, front-end applications become more complicated. In addition to the complexity of logic and the large amount of code, there is another reason for the defects of the language itself.

Brendan Eich, the author of this interpreted programming language, hurriedly created this widely used language, so that the development history of JavaScript even turned into a history of filling holes in a certain level.

There are mainly two kinds of issues comes with JavaScript:

Performance

Similar to other interpreted programming language, JavaScript was slow. At least before 2008, it was very slow. With more and more Web application adapted JavaScript, performance war began between Web browsers. JIT(Just-In-Time compiler) was introduced to solve the performance issues of JavaScript. Google’s V8 and Microsoft’s ChakraCore both with JIT(even multiple staged JITs).

Due to its design as a dynamic language, there are several classes of optimizations that are available to other programming languages that are, and will remain, unavailable as options to even the fastest and most modern JavaScript runtime. For instance, the ahead-of-time (AOT) optimizing compilation strategy.

Robustness and maintainability

With a dynamic programming such as JavaScript, we can build things quickly. But it will go to mess when project getting bigger.

Static typing makes it easier to work with complex system. It helps you catch type mismatches sooner at compile-time and also make it easier to optimizations.

For example, in dynamically typed programming languages, if you’re not careful with inputs, you can end up doing weird stuff like trying to add a number 1 with the string “2” and you would get the string “12” as a result. But this kind of type error should caught during development stage. In simple words, dynamic typing is the style of “write first, debug later”, static typing is the style of “think first, then write”.

To add static typing to JavaScript, the tried methods including:

• TypeScript: builds on JavaScript, adding static type definitions.

• Reason and PureScript: An translator compile other static typing languages(such as OCaml/Haskell) into JavaScript.

• asm.js (Deprecated): Define a strict subset of JavaScript that can be used as a low-level, efficient target language for compilers, especially to allow compilers to do ahead-of-time(AOT) optimizing compilation. We can use source-to-source compiler such as Emscripten to compile statically-typed languages(such as C) into asm.js.

Introduction to WebAssembly

While asm.js have performance improvement over original JavaScript, but in essential it is still JavaScript. In some scenarios, the generated file will become too large and introduce a bottle-neck for the code needs frequently transmitted.

Since asm.js code is mainly used as compilation target and we won’t edit it manually, it is necessary to invent a binary format. This is basically the origin of WebAssembly:

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual
machine. Wasm is designed as a portable compilation target for programming languages,
enabling deployment on the web for client and server applications.

WebAssembly was first released in 2015, and the first demonstration was to run Unity’s “Angry Robot”. You can play more games deployed on WebAssembly at webassemblygames. Another classic demo is Mozilla’s Zen Garden (Epic):

Then, WebAssembly has became the official “fourth language for web” on 5th December 2019, i.e. after HTML, CSS & JavaScript.

WebAssembly is a different language from JavaScript, but it is not intended as a replacement. Instead, it is designed to complement and work alongside JavaScript, allowing web developers to take advantage of both languages’ strong points.

We can re-use existing code by targeting WebAssembly, embedded in a larger JavaScript / HTML application. This could be anything from simple helper libraries to compute-oriented task offload.

Have a Try

In WebAssembly, there are two commonly used file formats:

• .wat : is S-expression-based text format, an intermediate form designed to be exposed in text editors, browser developer tools, etc. Files
• .wasm: is a binary format which can be read and run by virtual machine(or browsers).

We convert C/C++/Rust or other source code into .wat format, then assemble .wat format to .wasm.

To have a first try on WebAssembly, you can use WasmExplorer to input some code C/C++ code.
The compiled WAT and x86 Assembly format content are showed in windows:

Currently, WebAssembly is supported by most Web browsers. You can have a try with opening your browser’s console and type a input like this:

The best beginner tutorial is official guides, choose the programming language you are familiar with and compile it to WASM format.

wasmtime is a standalone runtime for WebAssembly and wasmer is not only a runtime but enables super lightweight containers.

WebAssembly Out of Browser

Because the binary format WASM can be loaded and executed by WASM Virtual Machine, we actually can extend the usage of WebAssembly out of browsers.

Run WASM everywhere will bring huge benefits. We can reuse code and make legacy code run in different platform. We simply cannot afford the time and money to rewrite software for multiple platforms constantly.

When Java was introduced, Write once, run anywhere was a slogan to illustrate the cross-platform benefits. With WebAssembly, the promising future is Write once in any programming language, run anywhere.

The project WASI is a promising standard to achieve this.

This is a new powerful weapon if we can make different programming languages interoperate each other seamlessly.

The Future of WebAssembly

There are still many features are under development or in proposal stage.

Even WebAssembly is not complete right now, or “all ready” yet, I believe WebAssembly will impact the worlds of client-side web development, desktop applications, server-side functionality, legacy modernization, games, serverless and more.

Hope you will enjoy this new technology as me.

References

WebAssembly Home
A cartoon intro to WebAssembly Articles
Bringing WebAssembly outside the web with WASI by Lin Clark
WASI: A system interface to run WebAssembly outside the web