Have you heard the news about WebAssembly? Google, Microsoft, Mozilla and others are teaming up for launching a new binary format for the web.
We at Usersnap took a closer look on what WebAssembly is and why it’s appearance and future development should matter to everyone! Even if you’re not a developer!
It will change the web. At least to some extent.
JavaScript – the web’s language.
The web is based on many standards which is absolutely fine. And it makes the life of builders and creators easier. Imagine there wouldn’t be any rule, language, framework, concept on which we build websites and applications.
The web standard which holds much things together has a well-known name. It’s called JavaScript.
JavaScript is basically the standard programming language of web platforms. And since more and more software becomes web software, JavaScript gains an immense drive.
There has been some attempts over the years to work around the limitations of JavaScript, which it definitely has. JavaScript files are plain text files. These files are downloaded from the server and then parsed and compiled by the JavaScript engine in the browser.
Browsers currently use JavaScript to interpret code and enable functionalities, like dynamic content. Performance improvements with JavaScript frameworks have been made. However bytecode-based systems are still faster and better performing.
So, what the heck is WebAssembly?
WebAssembly is kind of a new byte code. WebAssembly – or short: “wasm” – is a new binary syntax for low-level safe code. It defines a “portable, size- and load-time-efficient format and execution model” designed to serve as a compilation target for the web.
This definitely means performance improvements in the browser. And it gives us access to a set of low-level building blocks, such as a range of types and operations.
Don’t get me wrong. It’s not announced and designed as an alternative to JavaScript.
And as Bjarne Stroustup stated:
Or as Eric Elliott stated:” It may be useful not to think of WebAssembly as a language at all. It’s more like a machine”
From asm.js to WebAssembly?
asm.js is great for compiling code written in – for example – C or C++. asm.js is a subset of JavaScript, which can be used as a low-level, efficient target language for compilers.
The idea of asm.js is to code JavaScript in such a way that engines produce machine code which is super efficient. If you compile C++ to asm.js you can reach massive speed improvements in web browsers.
It has some advantages over asm.js which involve mainly performance issues. According to the FAQ: “On mobile, large compiled codes can easily take 20-40s just to parse […] First experiments show that WebAssembly can be loaded more than 20 times faster because the work for parsing is minimal.”
What’s so great about this at all?
So you’re probably asking? Why is it all over the news? WebAssembly is definitely an improvement to JavaScript. But not only that. It’s a great browser improvement too.
Browsers will understand binary format. So you’ll be able to compile binary bundles that compress smaller than a JavaScript text.
This could bring “app-like performance” to all web content and web apps. Sounds great, huh? 😉
Instead of having to parse the full code, which can often take quite a while, it can be decoded significantly faster.
Make sure to check out this talk by Brendan Eich:
Who’s already on it?
Google, Microsoft, and Mozilla are just a few names. Leading engineers have launched a WebAssembly Community Group with its mission to “promote early-stage cross-browser collaboration on new, portable […] format suitable for compilation on the web.”
However, it must be stated that work “has just begun”. So it’s pretty early-stage and it will definitely take some time until WebAssembly will become something like a well-known web standard.
Why it affects every web developer?
Because it will enable developers to do all kind of new stuff which wouldn’t have been possible or so easy with JavaScript.
The W3C WebAssembly Community group named quite a few use cases for using WebAssembly and how it will make life easier for web developers. Here are just a few:
- Better execution of programming languages that are cross-compiled to the web
- for developer tooling inside the browser
- faster client for enterprise applications (e.g. databases)
It can be used in various ways. For example, it can be used in existing JavaScript/HTML code where it can be embedded. On the other hand, WebAssembly can be used as the main framework, while the UI is still in JavaScript/HTML.
Less code, better performance, less bugs?
According to the WebAssembly group, WebAssembly means less source code. Compared to asm.js it means a reduction of about 25% in code size. Though this is just a prototype and results vary.
So you’re probably wondering how to keep up-to-date on WebAssembly? I’d recommend the following useful WebAssembly resources:
Update: Experimental Support for WebAssembly in V8
Starting with March 15, WebAssembly is available in V8, Google’s open source, JavaScript engine. To get started, you need to run d8 version 5.1.117 or greater from the comand line with the
--expose_wasm
You can also turn on the WebAssembly feature under chrome://flags#enable-webassembly in Chrome Canary 51.0.2677.0 or greater. For further information, I recommend to check out this blog post announcing the experimental support for WebAssembly.
Update: One year after the initial release of WebAssembly
About one year ago (yep – it’s already been a year), WebAssembly was released to the public. A lot of things happened ever since and people started experimenting with WebAssembly. As we’ve been a keen observer of WebAssembly, we’re happy to see the progress which has been made. According to an official blog post, the WebAssembly initiative made the following progress:
- a description and rationale of the initial feature set and planned future features;
- a specification and reference interpreter;
- 13,000 lines of tests used to validate both the spec interpreter and browsers;
- a first draft of the binary format.
The progress seems promising and browsers are trying to offer early WebAssembly implementations in their browser engine. It’s now possible to build WebAssembly demos.
If you found this post interesting, follow us on twitter where we tweet about web development, web design and startups.
This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.
Resolve issues faster with visual bug reporting.
Simplify and reduce issue & bug reporting efforts with screen recordings, screenshots, and annotations.
And if you’re ready to try out a visual bug tracking and feedback solution, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
