Creating Websites with WebAssembly

WebAssembly is a relatively new way to run code on the web that allows developers to write code in languages like C, C++, and Rust. WebAssembly was created to reduce web page loading times by allowing users to load more data at once. This article will give you an overview of WebAssembly and how it creates fast and responsive websites.

History of WebAssembly

WebAssembly (sometimes abbreviated to WASM) was initially announced in 2015. It was designed to be an open standard that would allow web browsers worldwide to run code faster and more efficiently than previously.

JavaScript rose to popularity for its use in writing browser-based applications (and most websites), but it wasn't originally built with a performance at a large scale in mind. This led engineers to look for an alternative that would allow them to load more data into the page at once, resulting in faster frame rates. To help fix this, a new subset of JavaScript was built to run quickly in several different languages called asm.js.

While asm.js was a step in the right direction, a few vital improvements needed to be made, such as faster parsing. In 2017, WebAssembly was released, creating a faster alternative to asm.js. is meant to solve these problems by allowing developers familiar with languages such as C or C++ (and now Rust) to work on web pages without translating their code to JavaScript. This is done through a process known as compilation, which takes code written in one programming language and converts it into another format that the computer can understand (in this case WebAssembly).

What can you build with WebAssembly?

WebAssembly allows developers to create dynamic web applications using languages they are familiar with. It does not require them to learn a new language or familiarize themselves with JavaScript.

In addition to this, WebAssembly also allows you to create visually appealing user interfaces that run smoothly and quickly across devices of all different shapes and sizes. This is because it can take advantage of multi-core processors found in today's computers, allowing for better performance when it comes to rendering graphics. This is something that JavaScript or other web programming languages cannot do independently.

How can you use WebAssembly in your projects?

WebAssembly can be implemented by using a tool called Emscripten, which takes C and C++ source code (amongst others) and compiles it into the .wasm format. This is then passed to your web browser to be executed. For other programming languages, a similar process happens with different compilers.

Since WebAssembly has been designed specifically for the web, you will need a hosting environment for this to work properly. One option would be using NodeJS, which allows you to host an app on a website through its backend system, or create one from scratch with Express.

Benefits of WebAssembly

There are a few primary benefits to using WebAssembly. These include:

Startup speed

WebAssembly is designed to load quickly and run simultaneously, so developers can produce code that runs instantly upon loading. This is crucial for creating fast-paced games or other apps that need to start up as soon as possible after a user clicks on their link.

Code size reduction

WebAssembly allows you to create small code bundles, which means your website will load more quickly. This is because it can run at a rate of around 70% of its original speed, which means that your web page will load much faster for users who cannot afford high-speed internet connections. It is difficult to improve the download size of gzipped JavaScript code because it is already relatively compact. Still, WebAssembly has been optimized to such a degree that it can be as much as 20% smaller than JavaScript.

Easier debugging and testing

Since WebAssembly is closer in structure to the language you are coding for, debugging becomes easier because there will not be any translation errors which means that developers do not need to use an expensive debugger like they would when using JavaScript.

For those who are familiar with programming languages such as C, you know how difficult it can be to take advantage of multi-threading. Since WebAssembly is a single instruction, multiple data (SIMD) language, making threading is more straightforward. There are even tools online that can convert C/C++ code into SIMD for easy debugging in Chrome DevTools or Microsoft Visual Studio Code.

Downsides to WebAssembly

As with any new technology, some disadvantages need to be considered before moving forward. For example, you may have to deal with security issues if you are not careful about how the wasm file is handled. Because it was originally designed for performance at a large scale, it is not always suitable for small projects (such as web applications) where other options might work better.

Another downside with WebAssembly is that most browsers do not yet support this new technology, although they gradually become more compatible. For example, Chrome only began supporting WASM in version 51, and Firefox has introduced experimental support since version 52.

However, this is likely to change soon as more developers use it for their projects and demand increases. For instance, there are already plans being made by Mozilla to remove support for Google's Native Client technology which has been used with C/C++ code instead of WASM until now. It seems clear that support for WebAssembly will continue to grow as it becomes more popular.

Click here for more information on a basic example of WASM in action.

How you can get started with WebAssembly

To get started with WebAssembly, you will first need a text editor that supports the language. Most major editors, such as Atom and Visual Studio Code, have built-in support for it, which means all you need to do is open up your favorite coding program and start writing.

If this does not appeal to you or if you need specific features to work with WebAssembly, other options are available. For example, Mihalis Tsoukalos' WasmFiddle allows for coding right online without having to download anything and can even run WASM code on your local machine instead of uploading it to an external website like GitHub or GitLab.

Online tools can also convert C/C++ code into WASM for developers who prefer using the latter. These include WAVM (WebAssembly VM) and Emscripten, a compiler toolkit created by Alon Zakai in collaboration with Mozilla Research back in 2012.

WebAssembly resources

Depending on which programming language you use, you will need a corresponding language compiler.

C or C++ - Emscripten

C# - Blazor

Rust - WASM Bindgen

Swift - Swift WASM

Python - Pyodide

Java - JWebAssembly

TypeScript - AssemblyScript

Summary

WebAssembly brings new life to the web by providing developers with a new open-source language that is not only easy to work with but can improve performance significantly without requiring too much effort or extra programming knowledge. It may have taken several years for this revolutionary technology to launch. Still, it has been well worth the wait and will likely continue growing in popularity as browsers show increasing support for it.

Developers who want to get started right away can either use their favorite text editor or start coding directly online, which is a nice feature that many developers will appreciate over time, so keep an eye out for it in the future. For more information on WebAssembly, be sure to check out this article, those linked to this article, and other posts about C/C++ and other WASM configurations.