A Quick Overview of WebAssembly
In under 5 mins
WebAssembly or Wasm is like an efficient low-level programming language at browser runtime. This means that it enables you to compile high-level languages into a binary format and run them on the web without a browser lock-in or plugin.
Need for WebAssembly
In spite of being a reasonably fast language, JavaScript is unpredictable and performs inconsistently. Also, it is not a good compilation target. As plugins are not viable, new languages such as Elm, Dart, etc. were developed to compile the scripting language. Google and Mozilla created Native Client and asm.js to meet the demands of complex applications. However, all these attempts failed at addressing the problems of safe and fast code on the Web.
WebAssembly was first introduced in 2015 by Brendan Eich, the creator of JavaScript. After JavaScript, it is the first universally supported language. The World Wide Web Consortium (W3C) developed WebAssembly in 2017 with the following goals in mind:
- Fast, efficient & portal
It executes near-native code performance on different platforms using common hardware abilities. The compact code can be decoded, validated, and compiled in a single pass, equally with just-in-time or ahead-of-time compilation. - Readable & debuggable
The code is well-defined. It is easy to inspect and debug. Programs can be split up into modules (smaller parts) that can be worked with independently. - The decoding, validation, and compilation are streamable (begins before all the data is seen) and parallelizable (can be split into many independent parallel tasks).
- Don’t break the Web. Maintains backward compatibility.
Definition of WebAssembly
Wasm is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for the compilation of high-level languages like C/C++ or Rust, enabling deployment on the web for client and server applications.
- Binary Instruction Format
WebAssembly code in text format is used to define an Abstract Syntax Tree. It describes the components of the program and simplifies verification and compilation. The AST is compiled (using compilers such as Emscripten SDK) to a binary format “.wasm” file which is loaded to a web page. The browser’s JavaScript engine then uses a decoding stack to decode the file back to AST to interpret it. - Portable Target for Compilation
As WebAssembly is designed to run on virtual machines; it runs on a variety of devices irrespective of the operating system and instruction set architecture.
Advantages of WebAssembly
WebAssembly is rapidly becoming a mainstream technology. It is adopted by all the major browser vendors, particularly because of the near-native code performance. Some of the benefits of WebAssembly are:
- Better Performance: WebAssembly provides enhanced performance in two areas namely, start-up speed and throughput. Minified JavaScript needs to be parsed, interpreted, compiled, and optimized. On the other hand, wasm is more compact and the binary format allows for faster parsing and speedy optimization due to its clean design.
- Portable and Secure: It is platform-independent, hardware-independent, and language-independent. This means that it makes no assumptions about the device or browser. This enhances portability. The code is validated and executed in a memory-safe, sandboxed environment. This prevents security breaches and data corruption.
- Integrating Legacy Libraries: If your application is in C/C++ or any other compatible language, WebAssembly allows you to easily make your code or desktop application available to the web. Usually, two libraries are used; wasm-pack for Rust and Emscripten for C/C++.
Use Cases of WebAssembly
WebAssembly is typically used in computationally intensive applications where high performance is required. These may include AR/VR live development, video editing, VPN, image recognition, etc. To learn about various technologies that use wasm, click here.
- After adding wasm backend support to tensorflow.js, the performance of the models increased by around 10 times.
- As it was originally written in C++, Figma was exported to Asm.js using Emscripten. After the launch of WebAssembly by adding the appropriate Emscripten flags, they saw a 3x performance increase.
- After switching to WebAssembly, the improvement in the performance of OpenCV Python Library was apparent. The inferencing time for ResNet50 increased 15x and the kernel performance test was 3.5x faster.
- Unity exports a web player for games using Emscripten outputting WebAssembly. The games that traditionally could not export to the web due to slowdowns with JavaScript, got consistently good performance on the web.
How to implement WebAssembly?
Depending upon the language used, there are four ways to implement WebAssembly in your web app.
- Porting a C/C++ application with Emscripten.
- Writing or generating WebAssembly directly at the assembly level.
- Writing a Rust application and targeting WebAssembly as its output.
- Using AssemblyScript that compiles to WebAssembly binary.
To learn about each method in detail, check their MDN documentation.
Limitations of WebAssembly
Although new functions are being constantly developed, WebAssembly’s functionality is limited.
- No Garbage Collection: Unlike JavaScript which employs garbage collection, Wasm uses a flat/linear memory model that allocates a large chunk of memory at instantiation and does not reclaim memory automatically. This is why some popular high-level languages such as Java were not included initially.
- No direct DOM access: WebAssembly is unable to access the Document Object Model (DOM). Any DOM manipulation needs to be done indirectly using JavaScript. Alternatively, any toolchain such as Emscripten can also be used where DOM manipulation is done through the JavaScript glue code. The performance is dependent on the library being used.
- No support in older browsers: Generally older browsers don’t have the required object available to instantiate and load Wasm modules. To check if your browser is compatible, click here.
Some learning resources and references
Read more about WebAssembly and the structure in this official PDF.
- Battagline, R. (2021). The Art of WebAssembly: Build Secure, Portable, High-Performance Applications. No Starch Press.
- Rourke, M. (2018). Learn WebAssembly: Build web applications with native performance using Wasm and C/C++. Packt Publishing.
- Join the W3C community:
Mailing Lists:
- https://lists.w3.org/Archives/Public/public-webassembly-announce/
- public-webassembly@w3.org Mail Archives
Contribute: https://github.com/WebAssembly/design/blob/main/Contributing.md
Read the Code of Ethics and Professional Conduct.
Editorial Note:
This article was compiled by Durva Dev from our technical content team.
If you wish to contribute to our blog as a technical writing intern or an independent contributor/guest blogger, do reach out to us at the.research.nest@gmail.com
For more details on guest blogging, visit-
