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 definitely make the web platform even more awesome than it is today. In this article, we learn everything one needs to know about WebAssembly — because that’s why we are here :)
The Journey of JavaScript🏃♀️
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⚔️
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👶
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?🤔
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.
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 definitely take the performance of web applications to near-native speed 🚀.
How does the future look like?🔮
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🔗
- Why WebAssembly is a game-changer for the web
- A cartoon intro to WebAssembly (video)
- WebAssembly Will Finally Let You Run High-Performance Applications in Your Browser
- Compile a WebAssembly module from C/C++
Feel free to connect with me on the following Social media platforms.
Medium Twitter YouTube LinkedIn Dribbble Github!
