Start developing for WebAssembly with our new guide

Developing for WebAssembly can go in many different directions, depending on what you already know and what you're trying to build. Download our new guide to WebAssembly.
2 readers like this.
Programming at a browser, orange hands

opensource.com

Over the past few decades, the web browser has endured as the most popular cross-platform application. Looking at the browser from a different angle, it is one of the most popular platforms for application delivery. Think of all the websites you use that take the place of activities you used to do with software running on your desktop. You're still using software, but you're accessing it through a browser, and it's running on somebody else's Linux server. In the eternal effort to optimize the software we all use, the world of software development introduced WebAssembly back in 2019 as a way to run compiled code through a web browser. Application performance is better than ever, and the options for coding go far beyond the usual list of PHP, Python, and JavaScript.

A target and a language

One of the powerful but also most confusing things about WebAssembly is that the term "webassembly" refers to both a language and a target. WebAssembly is an assembly language, but not many people choose to write code directly in assembly. Even the assembly language is ultimately converted to a binary format, which is what a computer requires to run code. This binary format is also called WebAssembly. This is good, though, because it means that you can use your choice of languages to write something that's ultimately delivered in WebAssembly, including C, C++, Rust, Javascript, and many others.

The gateway into WebAssembly is Emscripten, an LLVM compiler toolchain that produces WebAssembly from your code.

Install Emscripten

To install Emscripten on your Linux or macOS computer, use Git:

$ git clone \
https://github.com/emscripten-core/emsdk.git

Change directory into the emsdk directory and run the install command:

$ ./emsdk install latest
$ ./emsdk activate latest

Everything in the Emscripten toolchain is installed within the emsdk directory and has no effect on the rest of your system. For this reason, before you use emsdk, you must source its environment:

$ source ./emsdk_env.sh

If you plan on using emsdk often, you can also source its environment setup script in .bashrc.

To install Emscripten on Windows, you can run Linux in the WSL environment.

Visit the Emscripten website for more information on installation.

Hello world

Here's a simple "hello world" application in written in C++.

#include <iostream>

using namespace std;

int main() {
    cout << "Hello world";
    return 0;
}

Test it as a standard binary for your system first:

$ g++ hello.cpp -o world
$ ./world
Hello world

Seeing that it works as expected, use emcc to build it as WebAssembly:

$ emcc hello.cpp -o world.html

Finally, run it with emrun:

$ emrun ./world.html

The emrun utility is a convenience command for local testing. When you host your application on a server, emrun isn't necessary.

Learning more about WebAssembly

Developing for WebAssembly can go in many different directions, depending on what you already know and what you're trying to build. If you know C or C++, then you can write your project using those. If you're learning Rust, then you can use Rust. Even Python code can use the Pyodide module to run as WebAssembly. You have lots of options, and there's no wrong way to start (there's even a COBOL-to-WebAssembly compiler). If you're keen to get started with WebAssembly, download our complimentary eBook.

What to read next

A guide to WebAssembly

In the eternal effort to optimize the software we all use, the world of software development introduced WebAssembly back in 2019 as a way to run compiled code through a web…

Seth Kenlon
Seth Kenlon is a UNIX geek, free culture advocate, independent multimedia artist, and D&D nerd. He has worked in the film and computing industry, often at the same time.

Comments are closed.

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.