DEV Community

Cover image for What is WebAssembly? and does it have the potential to replace JavaScript on the web?
Peter Wainaina
Peter Wainaina

Posted on • Originally published at wainainapierre.hashnode.dev

What is WebAssembly? and does it have the potential to replace JavaScript on the web?

Since the inception of the web, the target compiler language has been JavaScript. Every web developer, myself included, has to have a good understanding of JavaScript, then advance to learning its frameworks, either for the front end or back end.

Some advantages of using JavaScript are:

  1. JavaScript is easy to learn and understand, making it accessible for both users and developers. The language’s structure is straightforward and user-friendly, making it easy to implement and saving web developers money when creating dynamic content.

  2. JavaScript is highly interoperable, as it integrates seamlessly with other programming languages, making it a preferred choice for many developers when creating a range of applications. It can be included in any webpage or the script of another programming language.

  3. JavaScript is client-side, therefore data validation can be done within the browser itself rather than being sent to the server, reducing the load on the server. In case of any discrepancies, only the selected area of the page needs to be updated by the browser, eliminating the need to reload the entire website.

  4. Unlike other programming languages such as Java, JavaScript is an interpreted language, which means it requires less compilation time, making it faster to execute. It is also a client-side script that speeds up program execution by eliminating wait times for server connections. JavaScript can be hosted anywhere and always runs in a client environment, which reduces bandwidth usage and boosts execution speed.

Truth be told, JavaScript is a bit stressful to work with, especially if you’re working on a large project and that’s where a language like TypeScript comes in, which is built on JavaScript but with type checking, meaning errors will be identified during run time and save you loads of time that you could have otherwise used during debugging your project, which is the worst situation to be in as a developer.

Some other disadvantages of JavaScript include:

  1. Although JavaScript may interpret quickly, the rendering of HTML through the JavaScript DOM can be slow, leading to delayed rendering and debugging in HTML editors is not as efficient as other programming languages like C/C++.

  2. For larger front-end projects, the configuration process can be tedious due to the need to integrate multiple tools to create a suitable environment. This can directly impact the performance of the library.

  3. Developing large applications in JavaScript can be challenging, but using a TypeScript overlay can help alleviate this issue by identifying errors during run time and significantly reducing the chance of shipping them to production.

  4. JavaScript can be interpreted differently by various browsers, making it challenging to write and read cross-browser code. Additionally, errors in JavaScript can halt the rendering of an entire website and the continuous conversion of JavaScript also increases the time needed to run scripts and reduces their speed.

That was just some background information to get you up to speed.

Now that we are on the same page, here’s the deal: everyone has that one language that they love programming with and sometimes wish they could use it in a more versatile manner, say use it to write code that will run on the web, if at all it’s not JavaScript.

I bear good news, you can do exactly that, with Web Assembly. This is exciting news! Well at least it was for me when I first heard about it.

lady jumping up in joy

I am sure you’re intrigued and asking what is this so called WebAssembly? WebAssembly is a binary instruction format that boosts the efficiency of web browser programs. It gives a programmer the power to create web applications in the language of their choice and creates minimal file sizes that load and run more quickly. In comparison to JavaScript, it is a new low-level binary compile format that is more suitable as a compiler target.

Great news, right? I believe you are now as elated as I was when I first heard about Web Assembly.

As a developer, you can write in your preferred language, say C, C++ or Rust, which is subsequently translated into WebAssembly bytecode, meaning WebAssembly is not a programming language and you won’t have to learn a new language, if at all you might be wondering. After you have written your code, the bytecode is performed on the client, usually in a web browser, where it is converted into native machine code.

picture showing the process of web assebly

WebAssembly has a load of perks, including its compatibility with contemporary browsers and support for a variety of languages, including C, C++, Go and Rust.

JavaScript is not meant to be replaced with WebAssembly, but rather to be used in collaboration with it. After all, JavaScript is still one of the core technologies of the web, since the inception of what we know as the World Wide Web, and powers more than 90% of websites on the client side for webpage behavior.

Developers have been adopting WebAssembly, especially for performance-intensive use cases like video editing, CAD Applications, gaming (which are intensive in terms of heavy graphics) and music streaming. Below is a graph showing these uses.

graph showing various uses of web assembly

As a UX Designer, I can’t fail to mention Figma as an example of a web service that has already embraced WebAssembly, having been written in C++ and it is evident how powerful and performance intensive it is as a collaborative design tool on the web. WebAssembly supports a variety of languages such as C, C++, C#, Rust, Swift, Kotlin and Go, but support for other languages is being added, so don’t be all sully if your favorite language is not yet supported. Chances are it will be supported by the time you are reading this.

The majority of WebAssembly scenarios involve writing code in a high-level language and converting it to WebAssembly. This can be accomplished in one of these three ways:

  1. Through direct compilation.

  2. Through third-party tools.

  3. Through a WebAssembly-based interpreter.

If at all you were interested in web development and for some reason don’t like JavaScript, WebAssembly has got your back. You can still create awesome web applications using your favorite language, so long as it is supported by WebAssembly. Happy coding!

Top comments (0)