WebAssembly for Beginners – Part 2: Goals, Key Concepts, and Use Cases

Have you wondered about WASM’s key concepts and Use cases? If not, we got you covered.

WebAssembly(WASM) is a new low-level language that lets you unblock native-like performance on the web.

In WebAssembly for Beginners – Part 1, we introduced WASM from a beginner’s perspective by covering its definition and limitations. Additionally, we went through WebAssembly features, WASM roadmap, and how JavaScript works with WebAssembly, and not against it.

This post will explore WebAssembly by discussing WASM Goals, key concepts, and use cases. We’ll also take a look at some of its exciting projects.

Let’s get started.

WebAssembly Goals

To understand WebAssembly key concepts, we first need to look at its goals. These goals include:

• Ability to take advantage of available hardware by using load-time and size-efficient binary format as a compilation target. In simple words, WASM uses an Abstract Syntax Tree(AST) in binary format, supporting compilation and execution at native speed. By using the approach, WASM can perform on various devices, including IoT, Web, and mobile.
• WASM’s goal is not to alter or change the existing Web platform. With this approach, WebAssembly can integrate well with the current and past Web. It also enables WebAssembly to work seamlessly with JavaScript, including executing alongside or making synchronous calls from JavaScript.
• To work seamlessly with permissions security policies and same-origin.
• Ensure developers can design their solutions to support non-browser embeddings.
• Lastly, giving developers the tools to work efficiently with WebAssembly source code by providing a human-editable text format.

WebAssembly Key Concepts

Inside the hood, WebAssembly follows the following steps: 

• At first, you need to write code in a statically typed language with defined types. 
• Once done, you generate a pre-compiled WASM module and feed the code into the engine compiler. 
• The above step ensures WASM skips parsing and makes the code ready to be rendered on the web browser.

The key concepts behind WebAssembly running in the web browser include:

• Memory: The Memory in WebAssembly is managed and written by its low-level memory access instructions. Technically, it is a resizable ArrayBuffer and contains an array of memory bytes.
• Module: The Module in WebAssembly is a compiled executable computer code. Due to its stateless form, the web browser compiles the Module and shares it among Windows and Workers. Also, the Module stores and declare imports and exports, in addition to housing the functions, tables, types, globals, and Memory.
• Table: A table consists of all references and functions using a resizable typed array. This removes the need to store raw bytes in Memory.
• Instance: In WASM, an instance is a module during runtime, with all states paired. These states include Table, Memory, and other imported value sets.

As a web developer, you can use JavaScript API to call and define Modules, Tables, Instances, and Tables. Moreover, you use JavaScript to call WASM exports synchronously within the JavaScript functions. Therefore, JavaScript plays well with WebAssembly as you can use WASM to write high-performance applications in the web browser.

WASM Objects

When working with WebAssembly, you must keep track of eight WASM objects. These objects include:

• WebAssembly.Global – The Global object is a global variable instance. It is accessible by both WebAssembly.Module and JavaScript.
• WebAssembly.Module – Here, the Module object contains the stateless WASM code. The code is pre-compiled.
• WebAssemly.Instance – WebAssembly.Instance is the executable, stateful instance of WebAssembly.Module.
• WebAssembly.Table – The Table object contains function references and acts as a JavaScript wrapper.
• WebAssembly.CompileError – The CompileError object contains all the errors during validation and decoding.
• WebAssembly.RuntimeError – Here, the RuntimeError object list all runtime errors.
• WebAssembly.LinkError – The LinkError object contains errors that take place during module instantiation.

WASM Use-Cases and Projects

We already know that WebAssembly offers native-like performance in the web browser. However, to truly understand where you can use it, you must look at its use cases. Let’s list below a few of the WASM use cases.

WebAssembly use cases span both inside and outside the browser. For example, if you want to use WASM in a browser, you can do a lot of things, including:

• Video or audio editing, such as the ffmpegwasm project.
• Video games in the web browser, such as these high-performance games.
• Scientific visualization and simulation
• Platform emulation/simulation such as DOSBox, MAME, etc.
• Encryption
• Remote desktop
• Developer tooling

Use Cases

From a general point of view, WebAssembly’s compelling use cases include

• The ability to write faster code can take advantage of the underlying hardware. 
• Moreover, you can also do Client-side compression, which results in better loading time and bandwidth savings. So, you use the Client’s CPU or underlying hardware to do the compression and uncompression, then use the server’s resources.
• Additionally, you can use different programming languages to write code for the web other than just using JavaScript. For example, you can use Rust, C, and C to write high-performance code for certain aspects of your web applications.

Projects

If we move to real-world examples, the following projects are worth mentioning.

• Figma improved its web app performance with WebAssembly usage. They reduced the load time during app initialization, whole design rendering, and even downloading a design file. As we discussed earlier, WebAssembly is also great for compressing. Figma implemented WASM to improve download size, shrinking them significantly.
• Pyodide: Another exciting WASM project is the Pyodide project, which was released from Mozilla. It enables scientists to compile Python scientific stack to WebAssembly, including NumPy, SciPy, Scikit-learn, etc., to the browser. It offers a transparent object conversion between Python and JavaScript. Lastly, it also allows developers to use Web APIs using Python.
• Brazor WebAssembly: The Brazor WebAssembly framework lets developers build single-page, client-side, and interactive web apps with .NET. You can host these apps to the browser with the WebAssembly-based .NET runtime. Here, as a developer, you get access to browser functionality in your .NET code with the help of WebAssembly’s JavaScript APIs.

Other many well-known and worthy projects are using WebAssembly. These are Binaryen, Cheerp, Forest, Grain, and others.

Final Thoughts

WebAssembly is not exactly beginner friendly. However, by studying its use cases and key concepts, you can clearly understand its capability.

With exciting projects in the market, it is the best time to learn WebAssembly, especially if you’re in Web development. WASM’s capability to work outside of the browser also makes it an excellent pick for performance-oriented development.