WebAssembly is a new type of code that can be run in modern browsers. It was created to get better performance on the web. It’s a low-level binary format that has a small size, so it’s fast to load and execute. You do not write WebAssembly, you compile other higher level languages to it.
Assembly typically refers to humanly readable languages that are similar to machine code. Machine code is what your processor understands, a bunch of numbers.
Every high-level programming language gets translated down to machine code in order to run on the processor. Different kinds of processor architectures need different machine codes and different kinds of assembly for each of them.
Despite its name, WebAssembly is not quite an assembly language because it’s not meant for any specific machine. It’s for the browsers, and when you’re delivering code to be executed in the browser, you don’t know what kinds of machines will your code be running on.
WebAssembly is a language for a conceptual machine that’s the least common denominator of the popular real world hardware. When the browser downloads the WebAssembly code it can quickly turn it to any machine’s assembly.
This is what WebAssembly looks like — it has a textual format that’s easy to read (.wat), but binary representation is what you actually deliver to the browser (.wasm).
Why we need WebAssembly
Video games are particularly challenging because they have to coordinate not only audio and video, but also often physics and artificial intelligence. Being able to reach the performance for running games on the web efficiently would open the doors to bringing many other applications to the web and that’s what WebAssembly set out to do.
Why is the web so attractive
The beauty of the web is that it’s like ✨magic ✨ — it works anywhere. There is no download and no installation. In one click, web applications are delivered as soon as you need them. It’s safer than downloading and running a binary directly on a computer because browsers have established security properties that keep the code running in them from messing with your system. And sharing on the web is as easy as it gets — links are just clickable strings that you can put anywhere.
It is the only truly universal platform that makes your application accessible on any device. This also allows you to maintain a single code base, make the updates simple and be sure that every user can access your application.
Because of these built-in powers and the interactivity that the web offers, we went from hypertext and a small scripting language all the way to an incredibly powerful and popular platform filled with amazing applications and capabilities. But until now, it was still fundamentally powered by the same scripting language that was never really designed to do all of this in the first place.
What WebAssembly brings to the table
Here’s what makes WebAssembly special and such a good fit for the web:
One of the main goals in designing WebAssembly was portability. To run an application on a device, it has to be compatible with the device’s processor architecture and operating system. That means compiling source code for every combination of operating system and CPU architecture that you want to support. With WebAssembly there is only one compilation step and your app will run in every modern browser.
You can port not only your own applications to the web, but also the incredible wealth of C++ libraries and open source applications that exist out there. It is a language that is supported on practically every platform, including iOS and Android. With WebAssembly, it can be used as the common language across your web and mobile deployments.
The current fully supported languages are C, C++ and Rust, but there are many others that are in the works, including Kotlin and .NET, both of which have already shipped experimental support.
How it works
You need a tool that will compile your source code to WebAssembly. One way is to use the seasoned modular compiler toolchain LLVM that can be set up to work with different languages. For compiling C and C++ you can use a simpler tool based on LLVM called Emscripten. Rust Nightly has it’s own compiler rustc that can output WebAssembly directly.
If you have a “Hello world” written in C, this Emscripten command will generate the files necessary to run it in the browser. What you get is a WebAssembly module along with HTML and JS files.
emcc hello.c -s WASM=1 -o hello.html
textarea or a
If you want to try it out without any setup head over to webassembly.studio or WebAssembly Explorer.
Can you use it?
There are already some very exciting examples of WebAssembly in the real world.
I mentioned video games as a big goal for WebAssembly and both Unity and Unreal Engine 4 already have working demos. You can play a game of Tanks! with WebAssembly running in the Unity engine and Epic has a short WebAssembly demo online.
Figma is an interface design tool that runs in the browser and allows designers to easily collaborate and share their work. It’s mostly written in C++ and has a 2D WebGL rendering engine that can handle very large documents. Initially they were using asm.js to compile their C++ code for the web. By switching to WebAssembly, their load time improved by more than 3x regardless of document size.
AutoCAD is design software which is mostly used in various engineering fields for making drawings such as floor plans, electrical circuits, piping designs etc. It’s written in C++ and it has been around for 35 years, longer than the web itself. Because of WebAssembly, it is now available as a web app without the need to rewrite such a huge code base in another language.
You can expect more and more applications to use WebAssembly and there are also some interesting demos online, like a video editor, raytracer and facial recognition algorithm running in the browser.
What’s to come
The browsers are already working on new features. Support for threading and garbage collection is coming, which will make WebAssembly a more suitable target for compiling languages like Java, C# and Go. One of the important goals is also creating debugging tools that support source maps which would allow developers to easily map WebAssembly to their source code.
The future is here now and it looks fast and bright 🚀🌞
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Get set up with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID
- Install LogRocket via npm or script tag.
LogRocket.init()must be called client-side, not server-side
- (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- NgRx middleware
- Vuex plugin
$ npm i --save logrocket
import LogRocket from 'logrocket';
Add to your HTML:
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
3 Replies to “WebAssembly: How and why”
Articles that are good and very interesting, I like reading the articles you do.
Enjoyed this article very much. Thanks