WebAssembly - Running Assembly Code on the Web!

WebAssembly - Running Assembly Code on the Web!

WebAssembly has been around for some time by now. If you stay updated with the latest trends and happenings in the world of web development, you may have already heard of WebAssembly. Owing to its flexibility and ease of use, WebAssembly has taken the web development world by a storm.

That said, what exactly is WebAssembly all about and why should we care? Most importantly, how can it prove useful and add to our existing workflow?

In this article, we will be learning about WebAssembly and its usefulness. But first, we need to fully understand what WebAssembly actually is.

What is WebAssembly?

Often abbreviated as Wasm, WebAssembly is a type of instruction format. Its purpose is to facilitate the compilation of high level languages so that the said languages and their scripts can easily be deployed on the web.

Here is how the official website of WebAssembly describes itself:

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

Let us attempt to break down the above definition for easier comprehension.

At its onset, WebAssembly is a type of code that can be run in any modern web browser. We can safely assume that it is an assembly language with a simplified binary structure that allows it to run with near-native accuracy in modern web browsers.

However, that is not the ultimate benefit of WebAssembly. It allows high level languages, such as C++ or Rust, with a sort of compilation target such that these languages can be run on the web.

Thus, it is safe to assume that WebAssembly provides a way for code written in multiple languages to run at near native speed on the web. This can help client applications, say a C++ app, to run within a web browser, much like a native web app.

In the absence of Web Assembly, it would not have been possible for such apps to run at native speed on the web. Furthermore, WebAssembly can run alongside JavaScript with the help of its custom APIs. This means JavaScript developers can make use of WebAssembly's flexibility and prowess, all the while making use of the familiar JavaScript libraries and frameworks that they are more comfortable working with.

Why Do We Need WebAssembly?

Let's be honest -- JavaScript has been with us for years and it has proven to be very reliable programming solution. Regardless of the nature of the web project, JavaScript seems to be able to handle everything pretty well.

In that case, why should we even bother with WebAssembly?

The answer is simple -- the high level modular code that can be written and compiled using C++ or even C is something that many projects tend to require. However, owing to the fact that code written in C and similar languages cannot natively be run on the web, there are several performance-related adjustments that need to be made.

WebAssembly helps us tackle this very issue. In this effect, WebAssembly is what we should use when we wish to combine the best of both the worlds -- efficiency and performance of high level languages and the speed and flexibility of native web applications.

Another very vital aspect of WebAssembly is that it can widen the horizon for many developers and developmental workflows alike. It can help programmers run their programs on the web, even if the said programs were not initially built with a web development workflow in mind.

How to Get Started with WebAssembly?

Now that we have established the various benefits that WebAssembly can bring to the table, how do we get started with it?

The process is fairly simple:

  1. We can take any existing high level code, be it coded in C, C++ or Rust, or likewise.
  2. The next step is to wrap the said code in a Wasm binary that can be executed on the web.
  3. All said and done, it is worth reminding ourselves that WebAssembly can be run side by side with existing JavaScript.

WebAssembly consists of two variants -- the .wat file that is human readable text file. And the .wasm raw binary file, that is a machine-readable binary export. The fact that we are sending binary code to the machine further helps with speed optimization. In fact, we do not really need to code anything in WebAssembly ourselves (albeit we do have the option of doing so, should we so desire).

All we need to do is compile our existing code base to WebAssembly, so that it can be ported from native application to web app.

The WebAssembly website has a good set of documentation for folks looking to get started with WebAssembly compilation. The installation guide can be found here, and the rest is something that is fairly easy to follow along.


That brings us towards the end of this article about WebAssembly. As we can see, the possibilities and advantages of WebAssembly are plenty. A C++ developer can work on and maintain his project in C++, and it can be easily ported to the web and added to an existing JavaScript-based frontend. Thereafter, the developer can focus on C++ code, and keep it updated, with the web application being built atop the said code using WebAssembly.

If you have not given WebAssembly a try already, you should really consider getting started with it. Wasm can be used to save developmental time, efforts and resources and even bring down the costs substantially. With more and more users relying heavily on the web for their workflow, WebAssembly can be highly useful for porting high-level applications to the web and attracting a whole new lot of users.

Have you tried to use WebAssembly to generate binary code of your projects for use on the web at near-native speeds? If so, how has your experience been? Do share your views and thoughts with us using the comments below!

Sufyan bin Uzayr

Sufyan bin Uzayr

Freelance Writer

Sufyan bin Uzayr is a writer, web developer, digital nomad and educator. He has authored several books, writes for multiple publications, and also conducts pro bono classes on programming. Sufyan loves coffee, and you can find more about his works here.

Read similar articles

Building a Web App with Angular and Bootstrap

Check out our tutorial
Building a Web App with Angular and BootstrapBuilding a Web App with Angular and Bootstrap

Debugging JavaScript Efficiently with Chrome DevTools

Check out our tutorial
Debugging JavaScript Efficiently with Chrome DevToolsDebugging JavaScript Efficiently with Chrome DevTools

The Web Dev Monthly

Sign up for a free monthly scoop of news and features articles handpicked by our staff.

Unsubscribe at any time. No hidden catch.