How WebAssembly (WASM) Works | Plus A Few Example Use Cases

You’ll find out that any website that runs a Unity Game uses WebAssembly (WASM). A toolkit that is perfectly capable of building web-based apps for word processing, spreadsheets, presentations, slides, photo/video editing, and so much more. And although WebAssembly might not be the most widely-used technology at the moment, it’s gaining ground.

As of 2020, the vast majority of WebAssembly was being used for crypto mining and gaming. However, given the nature of how web and mobile applications have evolved, we would expect exponentially more and more WebAssembly to be deployed in the near future. Consultants from proSapient, for instance, are even recruiting new minds to join their networks.

For your information, proSapient is an expert network with subject matter specialists that arranges paid one-hour consultancies between clients and experts like yourself. Their client, a global consultancy, is looking to speak with experts for paid 1hr phone consultations. Specifically, those who have experience in the Assembly Language space, and those who use it.

They are looking to discuss the current tools utilized in the space, use cases, and limitations. The only requirement – you can get in touch for more — is for you to provide your registration details. It’s our hope that you’ll show some interest in sharing your expertise with such clients at your preferred hourly rate. More so, after learning a few basics in this guideline.

What Is WebAssembly (WASM)?

WebAssembly (WASM) also 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. Developer reference documentation for Wasm can be found on MDN’s WebAssembly pages in detail.

The open standards for WebAssembly are developed in a W3C Community Group (that includes representatives from all major browsers) as well as a W3C Working Group.

Think of it as a small, fast, efficient, and very secure, stack-based virtual machine that doesn’t care what CPU or OS it runs on, that’s designed to execute portable bytecode — compiled from code originally written in C, C++, Rust, Python or Ruby — at near-native speed. It doesn’t only run in the browser: It started on the client but is proving useful on the server.

It’s Efficient And Fast

The Wasm stack machine is designed to be encoded in a size- and load-time-efficient binary format. WebAssembly aims to execute at native speed by taking advantage of common hardware capabilities available on a wide range of platforms.

WASM Is Quite Safe

WebAssembly describes a memory-safe, sandboxed execution environment that may even be implemented inside existing JavaScript virtual machines. When embedded in the web, WebAssembly will enforce the same-origin and permissions security policies of the browser.

It’s Open And Debuggable

WebAssembly is designed to be pretty-printed in a textual format for debugging, testing, experimenting, optimizing, learning, teaching, and writing programs by hand. The textual format will be used when viewing the source of Wasm modules on the web.

It’s part of The Open Web Platform

WebAssembly is designed to maintain the versionless, feature-tested, and backward-compatible nature of the web. Its modules will be able to call into and out of the JavaScript context and access browser functionality through the same Web APIs accessible from JavaScript. It also supports non-web embeddings.

In short, this is an open, industry-wide collaborative effort to combine the performance and security of an assembly-like language with the convenience of high-level languages. The Bytecode Alliance, set up to create shared implementations of WebAssembly standards, now includes major players like Arm, Intel, Google, and Microsoft as well as Mozilla and Fastly alike.

Obviously, this suggests how widely the future adoption of WASM is. The promise, and excitement, are around a mix of portability and speed. While, at the same time, the specifications themselves are mature and it is in use in a number of areas. From Microsoft’s Blazor toolkit to some key web browser applications.

How WebAssembly (WASM) Really Works

With WebAssembly you can develop high-performance web applications using open web platform technologies and various languages. WebAssembly makes it possible to create videos, audios, graphics, 3D environments, multimedia games, cryptographic computations, and even portable language implementations.

On top of that, it offers serious performance gains over the standard tools. It is not designed to be used as a language itself, but rather as an effective compilation target for languages like C, C++, and Rust (all of which are very fast by design). Ultimately, WebAssembly (WASM) is an open standard, creation authoring toolkit with a few goals in mind.

Before you embark on developing with WebAssembly, you should at least understand how JavaScript functions within a browser environment. You should also be comfortable working with the command-line interface. C and C++ knowledge would also be a major plus to know. In short, there are five steps to creating with WebAssembly (WASM).

Consider the following simple steps:

1. Install the Emscripten core (an LLVM/Clang-based compiler that compiles C and C++ sources into WebAssembly.
2. Also, install the required toolchain.
3. Create your code in C, C++, or Rust.
4. Compile your code into WebAssembly with Emscripten.
5. Convert the compiled WebAssembly code (via glue code) into an HTML page.
6. Serve your new app via HTTP.

There are so many other similar or relatively close use-cases for WebAssembly.

Some of the possibilities include:

• Greenfield/multiplatform development.
• Migrating from desktop-only to desktop and browser-based applications.
• Modernizing older apps written in Silverlight.
• Backward compatibility with older platforms.
• Progressive web apps.
• Mobile apps.

WASM separates code and data. It has a static type system with type checking and a very structured control flow designed to make it easier to write code that compiles to be safe. As well as with linear memory, global variables, and stack memory access that is separate. This is also part of how WebAssembly stays portable.

On the same note, the machine code that actually runs when WebAssembly (WASM) code executes uses registers — and that will be very specific to the CPU it’s running on. Meaning, that WebAssembly is a stack machine; rather than using registers to store data that it’s operating on. It pops data off the stack to work on and pushes the result back onto the stack.

Some WASM built-in sites include:

• Seed-RS
• Pest Parser
• Sandspiel
• Spherro
• Macro Railroad
• MTG On Curve
• Adex Explorer

WebAssembly is also perfectly capable of building web-based apps for word processing, spreadsheets, presentations, slides, photo/video editing, and so much more. And although it might not be the most widely-used technology at the moment, it’s gaining ground. Inside the browser, it uses the JavaScript engine, and environments like Node.js support WebAssembly.

Outside of the browser, it needs its own runtime to implement WASI — and there are currently multiple implementations of the WASM runtime and multiple protocols. Even the Bytecode Alliance currently has three runtimes. Two of which are being merged:  Wasmtime and Fastly’s Lucet runtime which is optimized for edge compute using ahead-of-time compilation.

Specifically, in order to reduce latency and is being rewritten on top of Wasmtime. WAMR, the WebAssembly Micro Runtime, is for embedded devices with limited resources; that will remain a separate runtime. RedHat is building another runtime (also based on Wasmtime) that can use a trusted execution environment like Intel SGX to run sensitive workloads on untrusted hosts, as part of the Confidential Computing Consortium’s Enarx project.

Other runtimes include:

• Wasmer, a server-side runtime with support for multiple compilers including LLVM.
• WAVM  uses LLVM to compile WebAssembly code to machine code.
• Wasm3 also focuses on embedded app devices.
• Second State’s WasmEdge  (known as SSVM before its CNCF sandbox acceptance) is specifically targeted at in-car apps.
• Platform approaches like Wasmcloud, an actor runtime (formerly known as WaSCC) that builds on top of WebAssembly. By creating distributed systems written in AssemblyScript, TinyGo, or Rust. To bind its modules to cloud services.

With so many different approaches, performance can differ between runtimes — and the increasing interest in WebAssembly means we’re in a Pre-Cambrian explosion of tools. Especially, with new options emerging and some older tools stopping development or not supporting the full specification. These comprehensive benchmarks are quite helpful surveys.

More so, of what’s still current as well as how quickly the ecosystem is developing, but both WASI and WebAssembly itself are a work in progress. This amount of experimentation is very healthy for the WebAssembly ecosystem. We need a range of different people trying different takes on what a great solution looks like. And, we think it’s fantastic for developers too.

Whereas they can mix and match different approaches to solving different aspects of their use cases. And even have a pretty wide range of different implementations to choose from. Also, this does put a burden on developers to make decisions about which approach to take. And, as W3C standardization continues some of them will be superseded by various proposals.

Like WebAssembly components and module linking. We’ll eventually see some approaches emerging as winners, others fading away. In the long run, people are not interested in having proprietary niche solutions for everything they target.

What WebAssembly (WASM) Is All About

The first launch of WebAssembly (WASM) was back in 2017 as a binary instruction format for a stack-based virtual machine. Whereby, its main development strategy is to run in modern web browsers. Whilst, providing efficient execution and compact representation of code on modern processors including web browsers, Krustlets, Cloudflare Workers, etc.

As well as the likes of Open Policy Agent, Shopify Apps, Microsoft Flight Simulator, the Adobe Lightroom web app versions, and Adobe Acrobat. WebAssembly (WASM), is starting to show up in a wide range of tools and platforms. Although WebAssembly brings languages other than HTML, CSS, and JavaScript to the browser, it’s not a JavaScript replacement.

It takes a very different approach from Flash, Active X plugins, and other techniques that encapsulated non-web code for browsers. Think of it as a small, fast, efficient, and very secure, stack-based virtual machine. That doesn’t care what CPU or OS it runs on — designed to execute portable bytecode.

Equally important, it’s also compiled from code originally written in C, C++, Rust, Python, or Ruby — at near-native speed. But, why start utilizing the WebAssembly (WASM) utilities? Well, traditionally, the web is thought of with two components.

Consider the following:

• A virtual machine
• A set of Web APIs

For the longest time, JavaScript has been the primary language that runs within the virtual machine, and it has worked quite well for that purpose. However, modern use-cases have illustrated one of the biggest problems with JavaScript — performance. Consider running resource-intensive apps, such as 3D games, VR and augmented reality, and video editing.

Eventually, we see JavaScript cannot deliver near-native performance. Couple that with the compute cost of downloading, parsing, and compiling larger JavaScript-based apps, and the issue becomes even more pronounced. Although WASM is a completely different language than JavaScript, it’s intended to not replace JavaScript, but to run alongside it.

This way, developers can get a best-of-both-worlds for their applications. And, unlike JavaScript, WebAssembly is a low-level, assembly-like language with a compact binary format. This makes it possible for WebAssembly to deliver near-native performance. With more and more cloud-native, mobile-first designs going on, near-native performance has become crucial.

For some, if not all web applications function in a way that is viable to consumers. Perse, we can not undermine its benefits.

The main benefits are:

• Near-native performance.
• Security.
• Easy debugging.
• Open-source.
• Hardware, language, and platform-independent.
• Lightweight.

The eight objects that are key to WebAssembly (WASM) are:

• Module – this object contains stateless WebAssembly code that has been pre-compiled by the browser.
• Global – this object represents a global variable instance that is accessible from both JavaScript and importable/exportable across one or more instances of WebAssembly.Module.
• Instance – this object is a stateful, executable instance of WebAssembly.Module.
• Memory – this object is a resizable ArrayBuffer or SharedArrayBuffer that holds raw bytes of memory accessed by a WebAssembly.Instance.
• Table – this object is a JavaScript wrapper that stores function references.
• CompileError – this object indicates an error during decoding or validation.
• LinkError – this object indicates an error during a module instantiation.
• RuntimeError – this object is an error that is thrown when WebAssembly specifies a trap.

WebAssembly doesn’t only run in the browser: It started on the client but is proving very useful on the server. It’s also in use elsewhere but in very limited editions. For example, within service mesh, edge devices, and some edge processing.

Out of The Browser and Into The Cloud

When WebAssembly (WASM) is running inside the browser, the browser handles its access to operating system features. For running WASM outside the browser, like on a server or an IoT device, some of the issues will look very familiar to cloud-native developers. Such as handling the concept of a file system (which you need for saving code, configuration, and shared data).

Particularly, on services that have no file system. But, giving code full access to the operating system doesn’t just open up the possibility of attacks. For one thing, it also ties the code to that specific operating system. To avoid that, WebAssembly uses the WebAssembly System Interface (WASI). It’s a modular set of system interfaces that looks like an abstracted OS.

More so, with low-level interfaces like IO and high-level interfaces like cryptography, keeping WebAssembly code portable. This improves security because it isolates modules and gives them only fine-grained permissions for particular parts of the file system (or other resources) and system calls. Where different modules are isolated from each other.

And, as a result, they are limited in what they could pass on to any malicious code that attempted privilege escalation. It can also improve performance, for various scenarios too. Like copying data between containers; instead of having to move data between user and kernel space. Then again, send it across the network and reverse the whole process.

This means, that the data can just be piped into a sidecar, using a faster and simpler calling mechanism. First, its execution time is at near-native speeds. Secondly, it’s easily readable and seamlessly debuggable. Be secure, don’t break the web!

Secure Extensibility In Multiple Platforms

As a fast, secure, and powerful way of running code across multiple platforms, WebAssembly (WASM) is very suitable to run untrusted code from a customer or partner. Like a serverless function where you want to avoid a cold start by injecting code into an already running container.

Or, otherwise, an inline data transformation that runs in the database engine, an ecommerce add-on, a Kubernetes admission policy, or an Open Policy Agent policy rule. On one side, Istio and Envoy support it as a lighter-weight and more flexible replacement for its LUA runtime for writing filters. So that, in the end, it can support different protocols.

On the other side, Flight Simulator even uses WebAssembly modules instead of DLLs. This means, that any project that has an extension mechanism will probably take advantage of WASM to do that. What JavaScript did for the web in the late 90s is what WebAssembly, can do for server-side applications. The promising excitements are around portability and speed.

Unlimited WebAssembly (WASM) Capacity

WASM’s startup time is faster than V8 and will be able to run on IoT devices with small amounts of memory and storage (potentially, under 1GB of memory and 50MB of storage). JavaScript runtimes have been aggressively optimized for performance; that’s going to happen to WASM too.

JavaScript will benefit from that work when it’s running outside the browser, in serverless environments, or ones that don’t allow JIT compilation (on iOS or a game console). With no cold start issues, the portability and low resource consumption would make WebAssembly ideal for the edge.

For instance, on services like Cloudflare Workers and Fastly’s Compute@Edge. This approach is a logical extension of using the browser sandbox to isolate third-party libraries—like font-rendering engines and image or audio decoders that might have bugs or vulnerabilities.

But, WebAssembly is also built to make it easier for developers to create safe applications (and stay safe while taking dependencies on third-party code). The WASM key design is to easily run in the browser and avoid the security issues that plagued Flash and Active X.

So, the main WebAssembly’s design is to help develop apps for isolation without losing performance. Bearing in mind, that the browser needs to be able to parse, validate and compile WASM code while a web page is loading. And, it’s for this reason that its code always runs inside a sandbox so seamlessly.

System Bugs And Vulnerabilities Fixability

Technically, another design feature of WebAssembly is to try and avoid entire classes of bugs and vulnerabilities. Like buffer overflows and control-flow hijacking. Now that languages like C and C++ use pointers to the address in memory where the value in a variable is stored. Therefore, WebAssembly code needs a secure way to get adequate access.

Such as to a very specific section of memory and nothing else. In that case, it uses a linear block of memory. Then again, a WebAssembly module only has access to the chunk of memory assigned to it; there’s no shared memory between modules. And, at least for now, there’s no garbage collection. Currently, that data is only in form of numbers.

Although there’s a proposal to add reference types  — like strings, sequences, records, and variants — to make it easier for WASM modules to interact with modules running in other runtimes or written in different languages. Another proposal, Web IDL bindings, will let the WASM module specify the “glue” it needs to call methods on the outside of new object types.

A WASM module doesn’t have access to APIs and system calls in the OS. If you want it to interact with anything outside the module you have to explicitly import it. So that you’ll also know the only code running is what you’ve told the module about. The safety guarantees in WebAssembly are only as good as the sandbox, and UCSD.

Not forgetting, one of the Bytecode Alliance members, has created a formal verifier to check the accuracy of the sandbox implementation, Veriwasm. There will still be vulnerabilities in WebAssembly (WASM), meaning, that None of us are infallible. How can we handle it and make it less likely to mitigate the fallout? For many new use cases, security is the ticket entry.

A Revolutionizing Cloud Development Tool

For obvious reasons, WebAssembly is a good option to use in conjunction with JavaScript. Its strengths in this area are around high performance, numerical computation on fixed shape data, in typed data structures. It allows high-performance applications and high-performance libraries.

Perse, to be integrated with the same JavaScript that [developers] are used to building applications from. Surprisingly, it’s simplest to work with WebAssembly (WASM) when it offers support as part of a platform. Like the CLI in  Wasmcloud or the rpk tool in Redpanda Transforms for example.

After all, we’ll eventually see some more approaches emerging as winners, while others fade away. In the long run, the people’s interest is not having proprietary niche solutions for everything they could possibly target. Beyond that, the developer experience for WASM often involves custom bindings.

Or rather, possibly complex toolchains, and multistep workflows. Moreover, some better tools are starting to arrive, and not just for Rust in this case. Rather, it’s more than a dozen languages that have compilers that can produce WebAssembly binaries — but they’re still in fragments.

Among the new tools include:

• Useful as a Yeoman WASM project generation tool
• Automatically, the creation of glue code and binding generators like wasm-bindgen and witx-bindgen
• Creation of Bindle, which makes it easier to store and distribute WASM modules together
• Experimental options, like the WebAssembly Gateway Interface (WAGI) for building CGI microservices

Unfortunately, it’s still pretty nascent, there’s a lot of (quickly improving) toolchain setup work to do which can feel daunting for some. If you come from a systems background, it feels fine; from a web background, less so.

The Rust community, in particular, is doing a lot of work in this space. We also see interesting work happening with AssemblyScript. Obviously, that’s a variant of TypeScript that compiles to WebAssembly (WASM) in general.

WebAssembly (WASM) In The Mainstream Media

For WebAssembly to go mainstream, it will need to be as easy to compile a WebAssembly binary as any other binary. That’s if the tooling is easy to integrate into the way developers already work. As well as being available in the environments developers want to target. Let’s consider our key strategy.

In particular, one of the key things we’re trying to do this year is moving the things that have been on the standardization track for a while now into production readiness. That includes bringing the ease of integration that Rust, WASM, and JavaScript have to other languages and environments.

Equally important, we are actively working on production-quality of implementations of all these things. So that we can get them into the hands of developers, and integrate them into environments that developers want to target.

For some developers, though, WebAssembly (WASM) will look more like a functional packaging decision. On one hand, Krustlets and Blazor already treat WASM as a way of delivering a complex environment. On the other hand, with Krustlet that’s a Kubernetes node, with Blazor it’s dotNET.

Sandbox Applications In Visual Studio Code

Blazor puts the .NET runtime into a WebAssembly sandbox, so as long as the libraries an application requires are inclusive of pretty much any .NET code can run inside WASM in the browser. WebContainers puts Node.js inside WebAssembly (WASM) to run Visual Studio Code.

In this case, you can think of it as an alternative to GitHub Codespaces. That kind of packaging will give WebAssembly (WASM) enormous scope. TC39 co-chair Brian Terlson is “very bullish” on WebAssembly. Because in 10 years’ time it could be a foundational part of cloud computing.

Particularly, an infrastructure that drastically changes the programmability model. It’s a future portable executable format that has a lot of really nice features. So to say, it’s very lightweight, really cross-platform, etc. Combined with the Web Assembly System Interface you could imagine what the future has.

A future where you don’t need Node or whatever. Simply, because you can just build a native executable that has Node or Deno ride along with it. On the same note, you can even run little WebAssembly programs on the edge. With very few hops away from where your customers are for super-low latency.

WebAssembly (WASM) As Productivity Boost Tool

But, the biggest advantage for cloud development isn’t just security for untrusted code. It’s productivity for developers and for the cloud service providers too. Especially, those who build SDKs for them. Imagine a developer trying out a cloud messaging service like Azure Service Bus in this case.

Whereby, they want to test their code by dropping a message into the queue. And then again, they want that to be easy in whatever language they’re using. Just using the Azure CLI means downloading a Python interpreter because that’s its implementation language.

If it delivers the long-awaited “write once, run anywhere” promise, WebAssembly could turn that on its head. Eventually, there’s no simple tool to just throw a message in the queue. Thus, developers really demand that these tools be built into their development workflow.

Of course, Azure supports so many different languages and we can’t be writing the same tools over and over again in each individual language. For this reason, as developers, we need a technology that would let us ship a very slim, simple tool. Let’s say; have it in some kind of envelope that lets us package it.

As well as expose it in many different languages. WebAssembly with WASI could be that technology. Fastly it’s already taking advantage of a very early version of that kind of portable tooling. More so, as it helps most developers build the WebAssembly tool that sees success.

Takeaway Notes:

Scale the idea up, and Terlson believes WebAssembly (WASM) could dramatically simplify the cloud programming model. Generally, we think there’s going to be a future where WebAssembly is going to clean up the story significantly. Combined with some runtime for cloud-native applications,

Suffice to say, that we can easily bring whatever language we want. We can even bring whatever Platform-as-a-Service (PaaS) infrastructure we like as well. And, the WebAssembly runtime will glue it all together with very little work. We can equally run apps in the cloud, or even run them on the edge.

As a result, we can run it locally. It doesn’t matter to us as developers; it just runs. So, with that in mind, what’s your take on WebAssembly (WASM) moving forward. What experiences do you have with it so far? Well, for this and more, you can share your thoughts in our comments section.

But, if you’ll need more help, you can always Consult Us and let us know how we can come in handy. Likewise, don’t forget that you can also donate in order to support what we do, as well as motivate our team of Web Tech Experts Taskforce for their good work. That said, see you in our next blog article!