In this post, we’ll do a deep dive into WebAssembly, then look at a comparison between the two.
WebAssembly (also known as WASM) is an efficient, low-level bytecode for the web. On the WebAssembly developer website, documentation describes it as “a new type of code that can be run in modern web browsers and provides new features and major gains in performance”.
WebAssembly is an open standard developed by a W3C Community Group.
Goals for WebAssembly
- Speed – WebAssembly code can be executed at near-native speed: it runs at just 20% slower than native code execution
- Portability – WebAssembly is browser-agnostic: it works across multiple platforms by leveraging common hardware capabilities and has similar execution times across them
- Readable & debuggable – the fact it has a human-readable text format allows code to be written, viewed and debugged by hand
- Security – It is built to run in a safe, sandboxed execution environment. It will enforce the browser’s policies on permissions and same-origin to ensure it has no security vulnerabilities
- Maintains backward compatibility
- Flexible – plays well with other technologies
WebAssembly overall has an efficient and portable representation:
- Compact: WebAssembly has a binary format, which because it is smaller than typical text or native code formats, is faster to transmit
- Modular: programs within WebAssembly can be split up into component parts, which can be transmitted, cached, and consumed separately
- Efficient: in a single pass, code can be decoded, validated, and compiled with either just-in-time (JIT) or ahead-of-time (AOT) compilation
- Streamable: decoding, validation, and compilation can begin as quickly as possible (even before all data has been viewed)
- Parallelizable: decoding, validation, and compilation can be split into numerous independent parallel tasks
- Portable: no architectural assumptions are made that are not broadly supported across modern hardware
The WebAssembly Web Platform
The Web platform essentially has two parts:
(ii) a series of web APIs, which the web app is able to call to control the functionality of the web browser/device to make things happen (DOM, CSSOM, WebGL, IndexedDB, etc.)
WebAssembly Java API
- To load WebAssembly code that uses the WebAssembly.instantiate() function
- To create new memory and table instances through the WebAssembly.Memory()/WebAssembly.Table() constructors
- To provide facilities that can handle errors which occur in WebAssembly via the WebAssembly.CompileError()/WebAssembly.LinkError()/WebAssembly.RuntimeError() constructors
WebAssembly Consensus was reached earlier this year by members representing four browsers, Chrome, Edge, Firefox, and WebKit. Consensus was reached that the design of the initial WebAssembly API and binary format is complete “to the extent that no further design work is possible without implementation experience and significant usage”. This also means that moving forward, future features will be designed to ensure backwards compatibility.
Future steps the WebAssembly community group and contributors plan to take include:
- distilling the design and spec interpreter repos into a single unified specification
- suggest a new charter for a W3C WebAssembly Working Group
- graduate the WebAssembly LLVM backend from experimental to stable (and update Emscripten)
- prototype additional WebAssembly integration into browser developer tools
- commence work on post-MVP features
Test Out WebAssembly
This open source project lets you play around with WebAssembly right now in your web browser: https://webassembly.studio/ It is built to run close to native speed.
Which is faster?
While many call WebAssembly a gamechanger due to the fact that it can run code on the web faster, there have been mixed results in proving which code is faster.
Firefox proved that in terms of streaming compilation, the browser is able to compile the code as it is still being downloaded. In addition, the latest release of Firefox includes a 2-tiered compiler that compiles code 10-15 times more quickly than the optimizing compiler. Working in tandem, the two changes mean Firefox compiles code more quickly than it comes in from the network.
KBall also cites a set of benchmarks published by Figma, a browser-based design tool that compared implementations between asm.js vs. WebAssembly, which demonstrated a 3x improvement in load time enabled by WebAssembly. Figma found that for large docs, load time went from 10+ seconds to under 5.
KBall points out that run-time performance improvements “have been less dramatic”, but are “still in evidence”. For intense graphical operations, comparing WASM to D3 demonstrated a 30% improvement in large projects.
Full details can be found here.
Full details can be found here.
Pros to WebAssembly
- Performance boosts – if you are only handling numeric data or your algorithm is highly complex and worth the cost of parsing arguments to the WebAssembly module
- Diversity of language – WASM supports over 20 different languages, including Rust, C/C++, Java, Python, Elixir, Go and C#/.Net – this enables a huge number of web frameworks for developers of these languages, meaning they can develop applications directly in their preferred language (this has already begun with Yew for Rust and Humble in Go)
- Obfuscated code – WebAssembly is useful if you want to ship obfuscated code in browsers
- Future development – WebAssembly intends to support languages with garbage-collected memory models down the road
Cons to WebAssembly
- Time – writing a full web application in WebAssembly has been said to be slow, painful and counterproductive as there are no debuggers thus a lot of time will need to be spent on handling trivial topics.
- Sqreen says writing a full web app in WebAssembly is counterproductive because “your framework will expose DOM-related methods and these calls will be pretty slow”.
- It is dynamically typed
- No compile step is required
- It has a massive ecosystem, which offers powerful frameworks, libraries and other such tools
- The virtual machine in the web platform can load and run both types of code.
- The two code types can call one another if required
- WebAssembly modules are symmetric in lots of ways to ES2015 modules
With the rise of WebAssembly, front-end development is underway a significant change. It is hard to see how exactly the change will play out, however, it is clear that the future of web development will be fast, parallel and linguistically diverse.