WebAssembly — The new joiner of HTML, CSS, JS trio

WebAssembly (aka wasm) allows you to take code written in other programming languages (yes,
apart from JavaScript) to run in the browser. Does it sound like a superpower?
WebAssembly will make the web platform even more awesome than it is today. In this article,
we learn everything one needs to know about WebAssembly — b ecause that’s why we are here :)

The Journey of JavaScript

source: https://unsplash.com/photos/rE3kbKmLmhE

The internet we see today is more interactive. But way back in the 1990s it was only static. The
main purpose of the internet was to share information between universities and science
institutes.
Then comes our hero — JavaScript. It was developed by its inventor in a 10 freaking days. It
opens up various possibilities for the web. Without JavaScript, the internet would have seen as
the biggest boring library on the planet. Thanks to JavaScript.
Since then JavaScript was constantly evolving. Thanks to ECMA for standardizing JavaScript,
otherwise every browser company would have come up with their own version of JavaScript (we
can’t even imagine what kind of mess it would have created). JavaScript continued its bull run as
the features like AJAX, JSON was added to its spec.
The release of Google Chrome and the V8 engine has made a tectonic shift in the JavaScript
ecosystem. This opens the door for the web to run High-performance applications in the browser.
It is followed by the invention of NodeJS — which allows programming the entire web
application stack with a single programming language — JAVASCRIPT!
That was a short history of the most loved programming language in the world.
The battle of performance

source: https://unsplash.com/photos/-L0N74GWsq8

You might have heard “The war of currents” in the late 1880s. It was between Nikola Tesla and
Thomas Edison praising their electrical inventions — Alternating Current and Direct Current.
There is a battle that exists even today in the age of the internet. It is between Native apps and
web apps.
Have you ever tried Microsoft Excel or Google Sheets in your browser? It might have worked
seamlessly. But when the amount of data increases you might notice some kind of sluggishness
in the browser version (which you may not see in the native variant of the same software).

The native applications are written targeting a specific OS or architecture. During the process of
compilation, the code is transformed into a low-level machine code — which is highly optimized
for the target environment.
But the web applications neither target OS nor architecture. It targets one or more browsers out
there having a decent market share.

The advent of Just-in-time (JIT) compilers has led to an inflection point in the performance of
JavaScript. JavaScript execution has become 10x faster than before. JIT process has made
several code optimizations to improve the overall performance. Even with these improvements,
the performance of JavaScript applications is highly unpredictable. So, what is the solution? The
next section is the answer!
Aboard WebAssembly to the browser family

source: https://www.polygon.com/2018/8/2/17645396/netflix-baahubali-prequel-series

WebAssembly became a World Wide Web Consortium recommendation in December 2019.

Alongside HTML, CSS, and JavaScript, WebAssembly is the fourth language to run natively in
browsers.
But WebAssembly itself is not a separate programming language like JavaScript. Instead,
WebAssembly is a way to run programming languages other than JavaScript on the browser.

For example, one can compile any application written in C++(or any other LLVM-supported
language such as D or Rust) into WebAssembly modules. This WebAssembly module runs in the
same sandbox where JavaScript code runs in the browser. Emscripten SDK is one of the tools
that helps you to compile C++ code into browser ready WebAssembly modules.
So what’s the Good news?
Firefox and Chrome browsers currently support the wasm format on Linux, macOS, Windows,
and Android. The latest versions of Edge and Safari now include WebAssembly support as well.

Can we brag about some of the pros of the WebAssembly?

1. WebAssembly welcomes applications/games/programming languages which weren’t even
thought of browsers while developing. So, no rewriting is needed!
2. WebAssembly delivers significant performance gains because modern browser engines can
parse and execute its binary format an order of magnitude faster than JavaScript (aka decoding
WebAssembly takes less time than parsing JavaScript).
3. Fetching WebAssembly takes less time because it is more compact than JavaScript, even when
compressed.
4. Garbage collection is not required since the memory is managed manually.

Does WebAssembly replace JavaScript?

source: https://unsplash.com/photos/2hPxUVQ3VNE

Many developers have this question in their minds ever since WebAssembly gained traction and
proving its mission. Let’s not speculate. Here is the response straight from the WebAssembly
team itself.

No! WebAssembly is designed to be a complement to, not replacement of, JavaScript. While
WebAssembly will, over time, allow many languages to be compiled to the Web, JavaScript has
an incredible amount of momentum and will remain the single, privileged dynamic language of
the Web.

What? To be a complement and not a replacement. But how?

We can keep our good old HTML, CSS, JavaScript stack for our web application development.
WebAssembly joins the club when there is a requirement like:
* Graphing/Simulation
* Image/sound/video processing
* Visualization
* Animation
* Compression, etc.
Just like today we use JavaScript modules from npm repository, we can use WebAssembly
modules for these computation heavy tasks.

WebAssembly will take the performance of web applications to near-native speed .

How does the future look like?

source: https://unsplash.com/photos/5LsRnLsWC6I

The advent of NodeJS has opened various avenues for web applications and beyond. The
introduction of JIT leads to the first inflection point for the JavaScript ecosystem. There is no
doubt that WebAssembly is going to be the next inflection point for JavaScript.
WebAssembly welcomes many applications to the open web — which was previously stuck in
native only. Autodesk was able to migrate its 30-year-old codebase of AutoCAD (a computer-
aided design desktop software application) to the web, which was possible only because of
WebAssembly.
Things like image processing, compression, graphics-heavy games were hardly possible to
implement on the web. But with WebAssembly, the web platform will continue to achieve
greater heights.

I feel more bullish about this new possibility of the web. Share your thoughts in the comments
section. And if you liked this article, show your love by .
Links

1. Why WebAssembly is a game-changer for the web

2. A cartoon intro to WebAssembly (video)
3. WebAssembly Will Finally Let You Run High-Performance Applications in Your
Browser
4. Compile a WebAssembly module from C/C++