What Is WebAssembly (Wasm) and Why Do I Care?

November 25th, 2024

Some History

The year was 1995, and the web browser most of us used was called Netscape Navigator; for the most part it rendered and ran basic HTML. At that time, people wanted richer interfaces and Java applets were introduced just in time to give it to them. For a few years, Java applets could run securely in the browser and provide these richer user interfaces to users. The problem was they were kind of slow and clunky to run and as Microsoft entered the market for browsers with Internet Explorer, compatibility issues arose. Microsoft started pushing ActiveX as their preferred option. Adobe Flash entered the market and running rich applications presented compatibility issues. JavaScript started to grow in popularity as an option for richer interfaces without giving up compatibility and over the next 20 years all the other options became extinct. The issue with JavaScript is and has always been that it is slow, especially when attempting to do very complex things with it. 

In 2015, the W3C (World Wide Web Consortium) introduced a standard that would allow web browsers to run native binary code safely and securely, and be compatible across all browsers. The initial goal was to run high-end games like Unity’s Angry Bots. It was called WebAssembly, also known as Wasm. It took until 2022 for Wasm to become universally supported across all the major browsers. 

Wasm was built to provide a virtual environment that could work on most chipsets, provide a secure memory safe sandbox (much like its applet predecessor) and work on a variety of programming languages including C/C++, Rust, Assembly Script, C#, Go, and many others. So the idea here is you build some ultrafast process in your favorite low-level efficient language and it can run in any web browser! 

More about Wasm

The key features/strengths of Wasm are as follows:

1. Performance

  • Wasm is designed to be highly performant, running code nearly as fast as native machine code. This is achieved through its binary format, which is lightweight and optimized for execution in the browser.
  • It enables resource-intensive applications, like games or scientific simulations, to run smoothly in the browser, achieving near-native performance.

2. Cross-Platform Compatibility

  • Wasm code can run on various platforms (e.g., Windows, macOS, Linux) and in any modern browser, providing consistency across different environments.
  • It allows developers to write code once and have it work everywhere, reducing the need for platform-specific adjustments.

3. Security

  • Wasm is designed with a strong security model, running in a sandboxed environment. This containment prevents unauthorized access to system resources, reducing the risk of malicious code execution.
  • Browsers enforce Wasm’s security by isolating it from the host system, adding another layer of protection.

4. Interoperability with JavaScript

  • Wasm is designed to work seamlessly with JavaScript, allowing developers to call Wasm modules from JavaScript and vice versa.
  • This interoperability makes it easy to integrate Wasm modules into existing JavaScript-based web applications, enhancing performance without fully rewriting applications.

5. Support for Multiple Languages

  • Wasm supports multiple languages, including C, C++, Rust, Go, and more. This enables developers to use familiar languages and compile them to Wasm for web deployment.
  • This also opens up the web to non-JavaScript developers, expanding the talent pool for web development and allowing for more diverse, complex web applications.

6. Portability Beyond Browsers

  • Wasm is not limited to web browsers; it can run in environments like Node.js and other server-side platforms.
  • This versatility means Wasm can be used to optimize performance on the server side, in edge computing, or even in resource-constrained environments, like IoT devices.

7. Efficiency in Resource Usage

  • Wasm’s compact binary format loads faster and uses less memory, which is especially advantageous for low-latency applications.
  • This resource efficiency is beneficial for mobile and low-powered devices, where efficient memory usage and load times are crucial.

8. Growing Ecosystem and Tooling

  • The Wasm ecosystem is rapidly evolving, with tools and libraries expanding to support more complex use cases.
  • Technologies like WebAssembly System Interface (WASI) enable Wasm to access system calls safely, further extending its potential for non-browser applications.

As I noted above, I think the first “killer app” for Wasm was video games that could run in any browser at “native” speed. Some games you can play include classic Doom, Quake, Flight Simulator and Minecraft. The Unity engine on which ¾ of a million games have been built can also run in Wasm.

Beyond gaming, developers have found new cool apps that can leverage the performance and speed of Wasm to bring to market new applications. If you do any kind of web design, you have probably heard of Figma. Well, one of the reasons Figma can do so much cool stuff at speed is that it leverages Wasm. You have probably heard of AutoCAD. It is older than the web and over 15 million lines of C code. Guess what? It can run in Wasm also!

When should I use Wasm? What is it best for?

1. Performance-Critical Components

  • What to move: Any part of your application that requires heavy computation or intensive processing and it makes sense for this logic to be in the browser, such as:
    • Real-time data processing (e.g., financial modeling, scientific calculations)
    • Image, video, or audio manipulation (e.g., editing tools, image filters, compression, encoding)
    • Cryptographic operations (e.g., encryption/decryption)
    • Machine learning inference in the browser (e.g., AI models running in real-time)
  • Why: Wasm allows you to run compute-intensive tasks much faster than JavaScript, making these tasks more efficient and responsive in a browser environment. By running these in your browser, you can save on server-side processing and overhead of network calls of sending data back and forth between the browser and server, allowing a better end-user experience.

Example: A browser-based video editing tool can offload video encoding or filtering operations to WebAssembly to ensure smoother, faster performance, even on less powerful devices.

2. Web Components of Desktop-Class Applications

  • What to move: If you’re developing desktop-like web applications (e.g., a SaaS platform or complex tools), consider moving features that mimic desktop software functionality:
    • 3D rendering engines for graphics-heavy applications (e.g., CAD software, gaming)
    • Complex UI components (e.g., real-time collaboration features, design tools)
    • Spreadsheet manipulation (e.g., Excel-like functionalities with heavy data processing)
  • Why: WebAssembly is ideal for porting code from languages like C++ or Rust, allowing these traditionally desktop-only features to run efficiently in the browser without compromising performance.

Example: A project management tool offering Gantt charts or resource planning can use WebAssembly to perform calculations for timeline rendering and dependencies, ensuring a responsive user experience in the browser.

3. Porting Legacy Code

  • What to move: If your application relies on legacy codebases in languages like C/C++ or Rust, and you want to run them in a modern web environment without a complete rewrite:
    • Math libraries or scientific algorithms from legacy applications
    • Custom business logic or tools developed over the years in non-JavaScript languages
  • Why: Instead of rewriting the entire codebase in JavaScript, you can compile these legacy systems to WebAssembly, maintaining compatibility while benefiting from Wasm’s performance in the browser.

Example: A financial services company can move its risk calculation algorithms (written in C++) to WebAssembly, enabling its web app to perform complex calculations directly in the browser, with no need to offload the processing to servers.

4. Security-Sensitive Operations

  • What to move: Critical parts of your application that deal with security-sensitive tasks can benefit from WebAssembly’s sandboxed environment:
    • Authentication and encryption modules
    • Processing user data or sensitive information
    • Running untrusted third-party plugins or extensions
  • Why: WebAssembly runs in a secure, isolated sandbox, which can help mitigate security risks when handling sensitive operations or untrusted code in your application.

Example: An e-commerce platform handling user payment details can process encryption-related operations (e.g., hashing credit card info) within a WebAssembly module, reducing the risk of exposing sensitive data to browser vulnerabilities.

5. Offline-First Applications

  • What to move: If parts of your application need to run offline or in low-connectivity environments, Wasm can be useful for:
    • Client-side data processing (e.g., calculations, local data storage, and transformation)
    • File handling and compression
    • Handling large datasets locally
  • Why: By leveraging WebAssembly, you can offload processing-heavy tasks to the client’s machine, allowing your app to run smoothly even without constant access to the server.

Example: A data visualization tool that allows users to analyze large datasets can use WebAssembly to process the data directly in the browser, providing users with insights even if they temporarily lose internet connectivity.

Why Now in 2024?

This is great Joel, why are you writing this article now if Wasm was ready two years ago?

I think there are three key things that are happening now that brought Wasm to my attention and I think are worth calling out.

  1. The first and most important thing, I believe, is that developers have had time to figure out cool uses of Wasm including some of the applications I talked about above including Figma.
  2. The second thing that is happening is Wasm is going beyond the browser. It is now being used by non-browser environments. There are runtimes like WasmCloud,  Wasmtime, Wasmer and WasmEdge that allow your Wasm runtime to run almost anywhere. Also, there are services that do this as well like Cosmonic and Fermyon. DevOps folks are also finding uses of Wasm to run some of their processing in a serverless type environment. It is lightweight, secure and has a fast start, making it ideal for these types of usage. 
  3. AI – Well, LLMs are all the rage right now, so it was only a matter of time before folks wondered, can we run an LLM in our browser? Well, it turns out that yes you can, using Wasm! Here is a YouTube talk on how to do this! And here is an open source engine that allows you to interact with multiple LLM models. 

Conclusion

In this article we reviewed this history of rich applications in the browser, why Wasm, what are its strengths and lastly, why it is so important in 2024. Normally I would walk you through a Hello World for Wasm, but someone has already done that for us! If you want to get your feet wet with Wasm, you can start here. I recommend starting with the Rust programming language as that seems to be the path of least resistance.