Mar 12, 2019
“WebAssembly” is a new type of code that runs on your browser. There is a lot of hype surrounding WebAssembly and how it’s going to change the way we code for the web. But how does it work? That’s what I will be covering in this article.
WebAssembly is also a replacement for native browser plugins (like adobe flash and adobe reader). It also enables us to use existing code in other languages directly on the web.
In a nutshell, WebAssembly provides a way to write specialized, fast code once in a while when we really need a boost in performance.
So, What Exactly is WebAssembly?
In technical terms, WebAssembly is a compiler target(output after compiling a high-level language) for programs on the Web.
If that doesn’t make any sense, WebAssembly is another language that can run on the browser. It’s a platform-independent code that sits just above machine code, this means that it can easily be converted to machine code depending on the type of system(ARM or x86). WebAssembly has a text format that is human readable, this is quite similar to native assembly code.
You can quickly explore WebAssembly code using the online tool WebAssembly Explorer. Here is an example of a square function in WebAssembly.
We can use compilers to convert a high-level language like C/C++ to WebAssembly. This means that we don’t need to directly write code in WebAssembly, but the textual representation is still there if you want to take a quick look.
So coming back to the question, what exactly is WebAssembly?
- It’s a compilation target for other languages.
- It’s a way to improve the performance of web applications.
How WebAssembly works?
Just In Time(JIT) Compiler
- The main thread that will parse, compile and execute the code.
- A separate thread that will create optimised native code(optimising compiler).
- A profiler or monitor that keeps track of the executing code for opportunities to optimise.
- And threads for garbage collection.
Overheads of JITs
- Optimization and deoptimization
- Memory used for the monitor’s bookkeeping and recovery information for when bailouts happen
- Memory used to store baseline and optimized versions of a function
WebAssembly is not the native assembly code that runs directly on your machine. But it’s machine code for a conceptual machine. This lets us deliver WebAssembly code across the web and run it on all types of devices.
WebAssembly Explorer: https://mbebenita.github.io/WasmExplorer/
“.wasm “ is the file type for WebAssembly code. Although you can write WebAssembly code, it’s more practical to compile a high-level language like C/C++ to wasm. We can make use of the Emscripten compiler or web pack to compile to WebAssembly and import it as a module.
Limitations of WebAssembly
Although WebAssembly seems like the next big thing, it still has a long way to go. As of now, there are limitations that will make it harder for everyone to use WebAssembly.
Why WebAssembly is faster than Js.
- Less time to download, because it’s more compact.
- Parsing is faster since it’s already a byte code.
- Compiling is faster since most of it was already done beforehand.
- Many optimizations are already done during the compile phase rather than during runtime.
- Depending on the application, it can run 10-800% faster.
Status of WebAssembly right now?
- WebAssembly 1.0(MVP) has shipped in 4 major browser engines.
- MVP provides enough to make WebAssembly fast and usable.
- You can compile and run already existing C/C++ code to wasm.
More info about the MVP release can be found at webassembly.org.
- Exception handling
- Garbage collection
- ECMAScript module integration
- Dom integration
- Fixed-width SIMD
- And a lot more
Check out future features from webassembly.org for more details.
- Cross compile existing libraries for the web.
- Image/Video editing.
- Image recognition/Computer vision.
More use cases can be found at webassembly.org.
- It’s a step in the right direction to make the web a truly universal platform.
- It is useful for doing computational tasks.
- It will enable new and interesting use cases for the web.
- As a developer, you might never use it directly.
These are some of the resources that I went through to learn about WebAssembly.
- MDN: WebAssembly
- Porting Examples and Demos
- A cartoon intro to WebAssembly by Lin Clark
- Why WebAssembly? by Andreas Rossberg
- WebAssembly: How and why by Milica Mihajlija
- Lin Clark: A Cartoon Intro to WebAssembly | JSConf EU 2017
- Lin Clark: WebAssemblys Post MVP Future (2019 and Beyond)