DEV Community 👩‍💻👨‍💻

Cover image for WebAssembly
Ben Adams
Ben Adams

Posted on

WebAssembly

If you want your application to be performant, you'd likely create a native desktop application instead of a browser based web app. That's where WebAssembly steps in. WebAssembly aims to bring resource intensive desktop applications to the browser with similar performance, with minimal difficulties. WebAssembly only requires the source code (of any language) be compiled into WASM's assembly-like language.
browser support for WASM

Arising from Asm.js

The idea of writing non-JavaScript code and having it run on the browser was previously explored through Asm.js, which would compile the source code into JavaScript. However, performance of Asm.js apps was about half of the native implementation. Even though Mozilla Firefox first launched support for Asm.js back in 2013, version 1.0 has yet to be released. Mozilla's Asm.js engine was called OdinMonkey. Asm.js required code to be compiled ahead of time.

Adoption

WebAssembly launched March 2017 and has largely replaced Asm.js, and as of this writing, over 94% of all web browsers support it. Some traditionally desktop only apps have already been brought to the browser with WebAssembly, like the game engine Unity, AI and ML library TensorFlow.js, AutoCAD's suite of software, and you can find more here. However, it still seems to be a rarity at this point, largely due to lack of exposure. Popular adblocking software uBlock Origin was rewritten with WebAssembly to be even more performant, see the below screenshot for a benchmark comparing JS and WASM implementations.

uBlock Origin benchmark comparing JS and WASM

There are over 40 supported languages for WASM, while the initial focus was on C/C++ and Rust. Using Emscripten as the compiler, code can be easily compiled to WebAssembly

From the desktop to the browser and back again

Similar to how Node.js brought JavaScript to the desktop and server environments, efforts have been made to bring WASM to the desktop through Wasmtime, Wasmer, and others. Similar to how Node provides filesystem I/O to JavaScript, WASI is an API that brings several operating system-like features to WASM.

Not a JavaScript Replacement

While whole apps can be made with WASM, it does not have the ability to manipulate the DOM. So the idea is that most of the app can be made with WebAssmebly, and JavaScript will be used to fill in the gaps between functionality. This gives WASM apps the near native performance while still able to dynamically modify the site with traditional JavaScript methods.
WASM diagram

Parting Thoughts

WebAssembly will allow for complex apps to be brought to the web, increasing accessibility and reach. WASM does not care about the user's OS or require additional plugins to run. WebAssembly has the joint support of W3C, Mozilla, Microsoft, Google, and Apple, so it's not going away anytime soon, and should only see more adoption. WebAssembly will allow more developers write highly performant web apps and make browsing the web a richer experience.

sources:

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await