Is WebAssembly the Future of Web Development?

WebAssembly is a big part of the web's future, but as a partner to JavaScript rather than a replacement. It lets code written in languages like C, C++ and Rust run in the browser at near-native speed, which opens the web to demanding applications such as design tools, games and full language runtimes. JavaScript still drives the page, its user interface and most application logic.

Key takeaways#

• WebAssembly (Wasm) is a portable binary format and compilation target, not a language you normally write by hand.
• The WebAssembly MVP shipped in major browsers in 2017, and the W3C published the core specification as an official Recommendation in December 2019.
• Wasm is designed for near-native execution in a memory-safe sandbox, which suits CPU-heavy work.
• Wasm can't directly access the DOM. It calls JavaScript to use Web APIs, so the two work together.
• Real products already use it: Figma compiles its C++ editor engine to Wasm, and runtimes such as Pyodide bring CPython to the browser.

The fourth language of the web#

For most of the web's history, browsers natively understood three languages:

1. HTML for structure.
2. CSS for presentation.
3. JavaScript for behaviour.

Anything that ran in the page had to be JavaScript, whether written directly or compiled to it. JavaScript engines are highly optimised, but the language wasn't designed as a compilation target for existing C++ or Rust codebases.

WebAssembly changed that. Major browsers shipped the first version (the "MVP") in 2017, and on 5 December 2019 the W3C announced that the WebAssembly Core Specification had become an official web standard, calling it "the fourth language for the Web".

According to webassembly.org, WebAssembly is "a binary instruction format for a stack-based virtual machine", designed as "a portable compilation target for programming languages". In practice, you write code in a language like C, C++, Rust or Go, compile it to a .wasm file, and load it from JavaScript.

Why WebAssembly can be fast#

How JavaScript runs

When a browser loads a script, the engine parses the source text, compiles it to bytecode and runs it. It then watches the running code and uses a just-in-time (JIT) compiler to optimise frequently executed paths based on the types it observes. If those assumptions stop holding, the engine has to fall back to slower code. Memory is managed by a garbage collector.

How WebAssembly runs

A .wasm module arrives already compiled to a compact, typed binary format. The browser decodes and validates it, then compiles it to machine code, often while the file is still downloading. Because the types are fixed up front, the engine doesn't need to guess and later undo optimisations. Wasm uses a linear memory that the compiled program manages itself, so languages like C and Rust run without a garbage collector.

MDN's WebAssembly concepts guide says Wasm "can be executed at near-native speed across different platforms". How close it gets depends on the workload, the compiler and the browser. Modern JavaScript is also fast, so Wasm's advantage is most noticeable for sustained, CPU-intensive computation, and when reusing existing code written in other languages.

Real-world examples#

Figma

Figma's editor is written in C++. In a 2017 engineering post, the company reported that its load time "improved by more than 3x" after switching the browser build to WebAssembly.

TensorFlow.js

TensorFlow.js runs machine learning models in the browser. In 2020, the team introduced a WebAssembly backend, built on the XNNPACK library, as "an alternative to the WebGL backend, bringing fast CPU execution with minimal code changes".

WebFiddle's language sandboxes

WebFiddle uses existing WebAssembly builds of language runtimes so code can run in your browser tab:

• Python: the Python sandbox uses Pyodide 0.26.1, the CPython 3.12 interpreter compiled to WebAssembly by the Pyodide project.
• PHP: the PHP sandbox uses php-wasm, which compiles the official PHP interpreter to WebAssembly and offers PHP 8.0 to 8.5.
• Ruby: the Ruby playground uses ruby.wasm to run Ruby 3.4.
• SQL: the SQL playground uses sql.js, which is SQLite compiled to WebAssembly.

When you run print("Hello") in the Python sandbox, the real C-based CPython interpreter executes it, sandboxed inside your tab. We didn't build these runtimes. Their open-source maintainers did, and WebFiddle provides the editor and interface around them. Read PHP in WebAssembly vs server-side PHP for a closer look at the trade-offs.

Write once, run anywhere#

Java applets promised portable code in the 1990s, but they required a browser plugin, and the plugin model was eventually removed from browsers. WebAssembly revisits the idea with two important differences:

1. Built in: Chrome, Firefox, Safari and Edge support WebAssembly natively, with no plugins.
2. Sandboxed: webassembly.org describes it as "a memory-safe, sandboxed execution environment". A Wasm module can only reach files, the camera or the network through the same JavaScript Web APIs and permission prompts as any other web page.

Shared code across platforms

Imagine an image-compression library written in Rust:

• The web team compiles it to WebAssembly.
• The mobile team links the native Rust library.
• The backend team builds a native binary for its servers.

One codebase serves every platform, each built for its target.

Will WebAssembly replace JavaScript?#

No. MDN states that WebAssembly "is not intended as a replacement" for JavaScript. It "cannot currently directly access the DOM", and to use any Web API it has to call out to JavaScript.

Think of them as partners:

• JavaScript handles the user interface, events, network requests and application glue.
• WebAssembly handles performance-critical computation and code ported from other languages.

Getting started#

You rarely write WebAssembly by hand. Choose a language with good tooling:

• Rust: build a library and run wasm-pack build, which generates the .wasm file plus a JavaScript wrapper you can import.
• C and C++: compile existing code with Emscripten.
• Go: compile with GOOS=js GOARCH=wasm, as described in the Go WebAssembly wiki.

If you're a front-end developer, you may not need a new language at all. Many npm packages ship WebAssembly internally, such as ffmpeg.wasm for video processing, and you use them like any other JavaScript library. See how to use npm packages in the browser.

Frequently asked questions#

What is WebAssembly used for?

WebAssembly is used for performance-critical code in the browser and for bringing existing C, C++ and Rust code to the web. Common uses include design and video tools, games, image and audio processing, machine learning backends, and running language interpreters such as Python, PHP and Ruby inside a browser tab.

When did WebAssembly become a web standard?

The first version of WebAssembly, known as the MVP, shipped in major browsers during 2017. The World Wide Web Consortium then published the WebAssembly Core Specification as an official W3C Recommendation on 5 December 2019, describing it as the fourth language for the web, alongside HTML, CSS and JavaScript.

Is WebAssembly faster than JavaScript?

WebAssembly is designed for near-native execution and often runs sustained, CPU-heavy computation faster and more predictably than equivalent JavaScript. It isn't automatically faster for everything, though. Modern JavaScript engines are highly optimised, and passing data between JavaScript and Wasm adds overhead, so benchmark your specific workload before rewriting code.

Can WebAssembly access the DOM directly?

No. According to MDN, WebAssembly cannot currently access the DOM directly. A Wasm module calls imported JavaScript functions, which then use the DOM or other Web APIs on its behalf. Tools such as wasm-bindgen for Rust and Emscripten for C and C++ generate this JavaScript glue code for you automatically.

Which languages compile to WebAssembly?

Many languages can target WebAssembly. The most mature toolchains are Emscripten for C and C++, and wasm-pack with wasm-bindgen for Rust. Go supports WebAssembly in its standard toolchain, and AssemblyScript offers a TypeScript-like syntax. Interpreted languages such as Python, PHP and Ruby run by compiling their interpreters to Wasm.