WebAssembly

WebAssembly (WASM) at its bases assumes that all the code will be executed in JavaScript sandbox runtime the same way as JavaScript. It means that the memory between the WebAssembly application and the JavaScript code is shared, however, it is limited. Access to the Web APIs is also restricted and it must be via JavaScript.

WASM is generally faster than JavaScript because it’s already in a binary format that the Javascript Runtime can understand without interpreting the language. So it means that decoding WebAssembly takes less time than parsing JavaScript. Compiling and optimizing also takes less time because it is closer to machine code and there is no needed for re-optimizing. Depending on the function and complexity WebAssembly runs faster from 10% to 800%.

Simplified client-side architecture scheme

WebAssembly focuses mainly on CPU-intensive tasks and can be used successfully in:

• Games

• Image, video, audio or CAD streaming and editing

• Virtual reality (VR) and Augmented reality (AR)

• Emulation or simulation platforms

• Encryption

• Artificial Intelligence (AI)

• P2P applications

• VPN and remote desktop

• Internet of Things (IoT)

• Machine Learning (ML)

Building to WebAssembly

The very important thing is that WebAssembly is supported in all major browsers: Mozilla Firefox, Google Chrome, Safari, and Edge, what is necessary to fulfill its assumptions, such as portability. The major goal is to run WASM almost anywhere, from the browser to the server-side and also in embedded systems. WebAssembly has the same goal as the one that Java tried to achieve with Applets.

Because WASM is designed to be an effective compilation target for low-level source languages like C, C++, Rust, it is a natural choice to use one of these languages for creating WebAssembly modules. Why can it be a good choice? Because in these languages we managed memory manually, and the current version of WebAssembly does not support garbage collection at all.

However, it doesn't mean, that we cannot use other programming languages that use this functionality, such as Python, Go or C#. It will require us to use additional tools or interpreters that will implement the functionality of a specific language.

WebAssembly supported languages (third-party tools or interpreter required):

• .Net

• AssemblyScript

• C

• C#

• C++

• D

• Forth

• Go

• Java

• Idris

• Kotlin/Native

• Lua

• Perl

• PHP

• Poetry

• Python

• Prolog

• Ruby

• Rust

• Scheme

• Wah

• Walt

• Wam

WebAssembly consists of two formats representing the same structures, but in different ways:

• .wasm - binary format.

• .wat - WebAssembly Text, a textual representation of the wasm binary format, uses S-expressions. This format is very helpful for debugging modules because it is used in browsers.

Implementation example

To give an example, let's assume we create a simple square function in Rust which we will use from JavaScript to display the result in the container. We assume that the WASM compilation was successful and we received a ready file to import as a module.

Our function looks like this:

At this point, all we have to do is create a JavaScript file and use fetch() with WebAssembly.instantiate() to get, compile and instantiate WebAssembly code. With this, we will have access to our square function. The code looks like this:

Real World Applications

The great example of how perfectly you can use WebAssembly is AutoCAD. After several approaches to web applications of its flagship product, Autodesk decided to use WASM. Now it is one of the application layers next to React.js (UI layer). Previously, they tried with Adobe Flash and HTML5 with JavaScript. The interesting fact is that they had to remove all dependencies of the Windows API before compiling the code base to WebAssembly.

Another example of the possibilities offered by WebAssembly are Construct 3 which allows you to develop games and Figma which is a tool for designers. It is also worth mentioning PSPDFKit - an application for generating PDF documents and ACTIV Financial - the real-time and multi-asset financial market data and solutions provider.

Implications

One of the missing parts in the current version of WebAssembly is that they don't have direct access to Web APIs like DOM, CSSOM, WebGL, IndexedDB, Web Audio API, etc. So if you want to access some platform-specific APIs in your WebAssembly module, you need to call it using JavaScript. Of course, such an operation is a cost penalty for those JavaScript calls.

Like with JavaScript, WebAssembly is run in sandboxed execution environment which means it will enforce the browser’s same-origin, permission policies and doesn’t have access to the file system too.

A considerable inconvenience is also the fact that the browser debugger support isn’t really implemented yet.

Limitations (missing parts):

• Multithreading

• Single Instruction Multiple Data (SIMD)

• Garbage collection

• ES modules integration

• Exception handling

• Fast interaction and data exchange between JavaScript and WASM

• Wasm64 (support the wasm32 mode, with linear memory sizes up to 4 GiB)

• Multi-value returns

• BigInt Conversion

Front-end developer perspective

So, is WebAssembly a technology for front-end developers? In my opinion, it is not. Of course, we will be using it but on a basis of API communication. WASM is a technology that definitely gives more space for backend developers to enhance performance and develop scalable web applications. The potential use of WebAssembly together with the two other web technologies looks very interesting, and for me, they perfectly complement each other.

The first combo is WASM with Progressive Web Apps (PWA). This is a quite obvious combination, considering the fact that PWA offers the user functionality similar to native applications for regular websites and web applications, e.g working offline.

The second one is WASM with Web Components. The combination of these two technologies gives developers the opportunity to create advanced HTML components. For a quick example, we will be able to develop a video player component with built-in codecs. Of course, this solution provides a wide variety of possibilities, like any file type viewers or even editors.

Summary

One of the most important advantages of WebAssembly is that it allows the developer to create web applications that will not differ from native desktop applications by their quality and performance. The cost of developing and maintaining the software itself will be lower compared to traditional applications. This is due to the fact that application distribution is limited to the browser and at the same time covers all possible operating systems. Also, the cost of transforming desktop applications into web applications should not be significant, because we can use the existing code and recompile it to the WebAssembly, the perfect example is Autodesk.

However, it should be kept in mind that WebAssembly is a relatively new technology and has limitations that definitely make it difficult to decide on its potential use.

Recommendations

The development and subsequent iterations of the WebAssembly should definitely be observed. However, I think that the possibilities of using it in current projects may be an ordinary overkill. According to my assessment, the use of WebAssembly makes sense only in strictly defined cases, mainly large scale applications.

Appendices

Webassembly Studio

Is an online IDE developed by Mozilla that can be used to compile C/C++ and Rust code into WebAssembly.

https://webassembly.studio/

Emscripten

Is an Open Source LLVM to JavaScript and WebAssembly compiler. Gives the developer the ability to compile projects written in / C ++, also has a built-in conversion OpenGL into WebGL, and allows us to use familiar APIs like SDL, or HTML5 directly.

asm.js

Is an extraordinarily optimizable, low-level subset of JavaScript designed to run C/C++ code in the browser previously translated by the compiler such as Emscripten. The solution is slowly being replaced by WASM. Nevertheless, at the current stage of WebAssembly is limited in certain functionalities, e.g. debugging code in the browser where asm.js can help.

Blazor

Is a .NET web framework based on C#, Razor, Mono, and HTML that runs in the web browsers via WebAssembly. Developers can write code in C# or VisualBasic.NET and compile them to normal .NET assemblies. The code will be run in a web browser using the WebAssembly based .NET runtime.

Simplified client-side architecture scheme

References

R&D - WebAssembly - Articles

Photo by Chris Liverani on Unsplash