Start developing for WebAssembly with our new guide

Start developing for WebAssembly with our new guide
sethkenlon
Thu, 02/09/2023 – 03:00

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 

using namespace std;

int main() {
    cout 

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.

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.

Programming at a browser, orange hands

opensource.com

What to read next

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

Powered by WPeMatico

Author: dasuberworm

Standing just over 2 meters and hailing from о́стров Ратма́нова, Dasuberworm is a professional cryptologist, entrepreneur and cage fighter. When he's not breaking cyphers and punching people in the face, Das enjoys receiving ominous DHL packages at one of his many drop sites in SE Asia.

Share This Post On