WebAssembly
Tags: javascript, webdev, performance, opensource
Published: 2021-11-01 04:04:39

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vr31iauizjo35jcio2v.png)

#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](https://blog.tensorflow.org/2020/03/introducing-webassembly-backend-for-tensorflow-js.html), [AutoCAD's suite of software](https://www.autodesk.com/products/autocad-web-app/overview), and you can find more [here](https://madewithwebassembly.com/).  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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n7mmkcd60ug4pgw971h.png)

There are over 40 supported languages for WASM, while the initial focus was on C/C++ and Rust.  Using [Emscripten](https://emscripten.org/) 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](https://wasmtime.dev/), [Wasmer](https://wasmer.io/), and others.  Similar to how Node provides filesystem I/O to JavaScript, [WASI](https://wasi.dev/) 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](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts/emscripten-diagram.png)

#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:  
* https://webassembly.org/
* https://developer.mozilla.org/en-US/docs/WebAssembly
* http://asmjs.org/spec/latest/
* https://github.com/bytecodealliance/wasmtime/blob/main/docs/WASI-overview.md
* https://blog.mozilla.org/luke/2013/03/21/asm-js-in-firefox-nightly/