What is WebAssembly?
Your favourite language compiled to a bytecode that is interpret by a virtual machine running in a browser. @guyroyse
WebAssembly is a standard developed by W3C WebAssembly Working, to produce a bytecode for the Web. One of its main goals is to enable high performance applications and processing on the Web. All modern browsers support it today.
In a Wasm module the information is encoded in dense binary format. This means you will have smaller binary sizes, faster loading times, faster decoding and smaller memory footprint compared to any high-level, interpreted programming language like JavaScript.
In itself WebAssembly is a low-level virtual machine inside your browser that runs the bytecode that is stored in .wasm files.
Here is what Thomas Tränkler says about the WebAssembly:
WebAssembly is about making web apps run fast and secure without breaking the web and overcoming long standing language and operating system barriers that fragmented the developer community and limited what we can do cross platform for decades.
Learn more:
I highly recommend watching An Introduction to WebAssembly by Guy Royse and Real World WebAssembly (Chrome Dev Summit 2017) to understand the basic structure and fundamentals of WebAssembly.
Through the eyes of a front-end developer 👀
When I first heard about WebAssembly I thought it was a new JavaScript framework as they tend to spawn frequently every other Monday. So to help myself understand what WebAssembly is I asked some questions!
Is WebAssembly a replacement for JavaScript?
No, WebAssembly is not a replacement for JavaScript. They are separate projects and WebAssembly in itself is a JavaScript object that acts as the namespace for all Wasm-related functionality. I red the MDN Web Docs - WebAssembly and found out why WebAssembly is not a constructor itself but just a namespace constructor for loading WebAssembly code! 🚀
WebAssembly should generally be used for computationally intensive tasks, such as math, image manipulation, physics and audio. JavaScript should still be used for more common things on the web such as Dom Manipulation, APIs and UIs.
Vaibhav Shah wrote an excellent post about will WebAssembly replace JavaScript. He points out that WebAssembly Complements JavaScript and I really like that!
TL;DR;
No, WebAssembly is a completely different project and it is not going to take over the JavaScript world.
What can I do with it?
WebAssembly has not been a life changer for me as a front-end developer – at least not yet. Currently I develop on top of a popular eCommerce system. Maybe one day I could use Wasm as a versatile high performance processing tool for example image processing.
List of awesome projects built with WebAssembly that are worth checking out:
- Powerful 3D modelling and construction with AutoCAD Web App
- A barcode scanner for the Web
- UI library developed in C++11
Aaron Turner is also hosting a site called Made with WebAssembly. It might be wort checking out for some additional hype. Thomas Tränkler created an WebAssembly showcase last summer, but it lacks updates.
Some of you might also want to check out games made with WebAssembly
For general use cases read the official unordered and incomplete list of applications and domains that would benefit from WebAssembly.
If you really want to dive in to the future you should read the article about post-MVP future and learn why folks in Mozilla Hacks say that "People have a misconception about WebAssembly"
TL;DR;
You can do many things with WebAssembly already. Check out this official use-case list
Should I start learning WebAssembly?
By learning WebAssembly I mean porting low-level code like Go, C# and Rust to the Web. I came to a conclusion that no, at least not yet. I really like the idea of it all but since it wont help me on my day-to-day work as a developer I'd rather skip it for now. Maybe I will change my mind if WebAssembly skyrockets!
Maybe WebAssembly will change the way GO/Pyhon/Rust/C# developers work. What do you think?
Where can I learn more about WebAssembly?
I loved reading the official documentation! Maybe you will too? Sometimes videos help. Especially when people (way smarter than me) talk about things I don't yet understand.
But anyways, here are a couple of tutorials worth checking out if you want to learn more about the Wasm!
- Google Codelabs - a 60 minute intro
- WebAssembly Studio - test Wasm online
- Learn X in Y minutes - Where X=WebAssembly
- Learn WebAssembly by Mike Rourke - 500 pages (huge pdf)
Studies worth checking out
In a joint paper (pdf) few authors at Google, Mozilla, Microsoft and Apple came to a conclusion that overall WebAssembly is very competitive with native code like C. With raw calculating power like proved the possibilities are pretty much endless.
In another more practical study from Google they rotated a 4094px by 4096px image (16 megapixels) pixel by pixel with WebAssembly in 2 seconds compared to the 8 seconds in plain JavaScript. They came to a conclusion that if you want fast, predictable performance across browsers for raw performance code like this, WebAssembly can really help you.
Other Dev's posts about WebAssembly worth checking out
- Why the heck is everyone talking about WebAssembly?
- Rust and WebAssembly for masses - Introduction
- Visualizing memory management in V8 Engine (JavaScript, NodeJS, Deno, WebAssembly)
Anything else?
Be sure to comment what you think about the WebAssembly!
Top comments (1)
Great article. It's a great flow to help frontend developer consider the things consider and a good overview.
I don't think people will write code for WebAssembly on a day to day basis. I do see WebAssembly being used for writing frameworks such as ReactJS under the hood, for web libraries with API to access through JavaScript.
I'm currently working in a 3D visualization tool that can be controlled from JavaScript to display 3D models with legends, annotations etc. I do think for charting webapps, statistical analysis and things like that can benefit from a little wasm specially those projects that use to run on web workers like PDFjs