WebAssembly trough the eyes of a front-end developer 👀
Tags: webassembly
Published: 2020-04-09 19:54:53

## What is WebAssembly?
> Your favourite language compiled to a bytecode that is interpret by a virtual machine running in a browser. [@guyroyse](https://twitter.com/guyroyse)

`WebAssembly` is a standard developed by W3C WebAssembly Working, to produce a bytecode for the Web. One of its [main goals](https://webassembly.org/docs/high-level-goals/) is to enable high performance applications and processing on the Web. All modern browsers [support](https://caniuse.com/#feat=wasm) it today.

In a Wasm module the information is encoded in dense binary format. This means you will have smaller binary sizes, faster loading times, faster decoding and smaller memory footprint compared to any high-level, interpreted programming language like JavaScript. 
In itself WebAssembly is a low-level virtual machine inside your browser that runs the bytecode that is stored in `.wasm` files.

Here is what [Thomas Tränkler](https://medium.com/@10fingers/webassembly-the-silent-revolution-of-javascript-engines-eda4d07d66eb) says about the WebAssembly:
> WebAssembly is about making web apps run fast and secure without breaking the web and overcoming long standing language and operating system barriers that fragmented the developer community and limited what we can do cross platform for decades. 

**Learn more:**
I highly recommend watching [An Introduction to WebAssembly by Guy Royse](https://youtu.be/C4fxz0004Nc "An Introduction to WebAssembly by Guy Royse") and [Real World WebAssembly (Chrome Dev Summit 2017)](https://youtu.be/PpuAqLCraAQ "Real World WebAssembly (Chrome Dev Summit 2017)") to understand the basic structure and fundamentals of WebAssembly.

---

# Through the eyes of a front-end developer 👀

When I first heard about WebAssembly I thought it was a new JavaScript framework as they [tend to spawn frequently every other Monday](https://www.evolutionjobs.com/uk/media/why-are-there-so-many-javascript-frameworks-188799/ "WHY ARE THERE SO MANY JAVASCRIPT FRAMEWORKS?"). So to help myself understand what WebAssembly is I asked some questions!

### Is WebAssembly a replacement for JavaScript?

No, WebAssembly is not a replacement for JavaScript. They are separate projects and WebAssembly in itself is a *JavaScript object* that acts as the namespace for all Wasm-related functionality. I red the [MDN Web Docs - WebAssembly](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) and found out why WebAssembly is not a constructor itself but just a namespace constructor for loading WebAssembly code! 🚀

WebAssembly should generally be used for computationally intensive tasks, such as math, image manipulation, physics and audio. JavaScript should still be used for more common things on the web such as Dom Manipulation, APIs and UIs.

Vaibhav Shah wrote an excellent post about [will WebAssembly replace JavaScript](https://dev.to/vaibhavshah/will-webassembly-replace-javascript-or-will-wasm-make-javascript-more-valuable-in-future-5c6e). He points out that _WebAssembly Complements JavaScript_ and I really like that!

_TL;DR;_ 
No, WebAssembly is a completely different project and it is not going to take over the JavaScript world.

### What can I do with it?

WebAssembly has not been a life changer for me as a front-end developer – at least not yet. Currently I develop on top of a popular eCommerce system. Maybe one day I could use Wasm as a versatile high performance processing tool for example image processing.

List of awesome projects built with WebAssembly that are worth checking out:
- Powerful 3D modelling and construction with [AutoCAD Web App](https://www.autodesk.com/products/autocad-web-app/overview?linkId=68719474)
- [A barcode scanner](https://tech.ebayinc.com/engineering/webassembly-at-ebay-a-real-world-use-case/) for the Web
- [UI library](http://shi-yan.github.io/AssortedWidgets/) developed in C++11

[Aaron Turner](https://aaronthedev.com/) is also hosting a site called [Made with WebAssembly](https://madewithwebassembly.com/). It might be wort checking out for some additional hype. [Thomas Tränkler](https://twitter.com/ttraenkler) created an [WebAssembly showcase](https://webassembly.eu/) last summer, but it lacks updates. 
Some of you might also want to check out [games made with WebAssembly](https://worldofwasm.bubbleapps.io/)

For general use cases read [the official unordered and incomplete list](https://webassembly.org/docs/use-cases/) of applications and domains that would benefit from WebAssembly. 
If you _really_ want to dive in to the future you should read the article about [post-MVP future](https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/) and learn why folks in Mozilla Hacks say that _"People have a misconception about WebAssembly"_

_TL;DR;_ 
You can do many things with WebAssembly already. Check out this [official use-case list](https://webassembly.org/docs/use-cases/) 

### Should I start learning WebAssembly?

By learning WebAssembly I mean porting low-level code like Go, C# and Rust to the Web. I came to a conclusion that no, at least not yet. I really like the idea of it all but since it wont help me on my day-to-day work as a developer I'd rather skip it for now. Maybe I will change my mind if WebAssembly skyrockets!

Maybe WebAssembly will change the way GO/Pyhon/Rust/C# developers work. What do you think?

### Where can I learn more about WebAssembly?

I loved reading the [official documentation](https://webassembly.github.io/spec/js-api/index.html)! Maybe you will too? Sometimes videos help. Especially when people (way smarter than me) talk about things I don't yet understand. 
But anyways, here are a couple of tutorials worth checking out if you want to learn more about the Wasm!

- [Google Codelabs - a 60 minute intro](https://codelabs.developers.google.com/codelabs/web-assembly-intro)
- [WebAssembly Studio - test Wasm online](https://webassembly.studio/)
- [Learn X in Y minutes - Where X=WebAssembly](https://learnxinyminutes.com/docs/wasm/)
- [Learn WebAssembly by Mike Rourke - 500 pages (huge pdf)](https://deinfo.uepg.br/~dierone/2019_aep/S33_AP_59.2_13.11.2019__Learn-WebAssembly.pdf)

### Studies worth checking out

In a [joint paper (pdf)](https://github.com/WebAssembly/spec/blob/master/papers/pldi2017.pdf "Bringing the Web up to Speed with WebAssembly") few authors at Google, Mozilla, Microsoft and Apple came to a conclusion that overall WebAssembly is **very competitive with native code** like C. With raw calculating power like proved the possibilities are pretty much endless.
In another [more practical study](https://developers.google.com/web/updates/2019/02/hotpath-with-wasm) from Google they rotated a 4094px by 4096px image (16 megapixels) pixel by pixel with WebAssembly in 2 seconds compared to the 8 seconds in plain JavaScript. They came to a conclusion that if you want fast, predictable performance across browsers for raw performance code like this, WebAssembly can really help you.

### Other Dev's posts about WebAssembly worth checking out

- [Why the heck is everyone talking about WebAssembly?](https://dev.to/captainsafia/why-the-heck-is-everyone-talking-about-webassembly-455a)
- [Rust and WebAssembly for masses - Introduction](https://dev.to/sendilkumarn/rust-and-webassembly-for-masses-introduction-1034)
- [Visualizing memory management in V8 Engine (JavaScript, NodeJS, Deno, WebAssembly)](https://dev.to/deepu105/visualizing-memory-management-in-v8-engine-javascript-nodejs-deno-webassembly-105p)


### Anything else?

Be sure to comment what you think about the WebAssembly!