Learn WebAssembly With WebAssembly Studio

Ngoc Minh Tran

CORE ·

Apr. 16, 20 · Tutorial

Likes (4)

Comment

Save

6.4K Views

Introduction

As web technologies have advanced, there’s been a push to move more and more applications to the web. This has presented developers with another challenge because web browsers support only one programming language: JavaScript. As browser makers looked for ways to improve JavaScript’s performance, they came up with a great new invention: WebAssembly.

WebAssembly was first introduced in 2015, and, alongside HTML, CSS, and JS, it became the fourth language for the Web that runs natively in browsers (W3C announced on 5 December 2019 ).

What Is WebAssembly?

As mentioned, one of the biggest issues that WebAssembly aims to solve is performance. JavaScript is a great language, but it is also known as an interpreted programming language and optimizations are always difficult with interpreted languages.

WebAssembly is a way of taking code written in programming languages other than JavaScript and running that code in the browser (by Lin Clark ). Currently, C, C++, and Rust were given focus as languages that could target WebAssembly.

The WebAssembly Core Specification describes WebAssembly as a safe, portable, low-level code format designed for efficient execution and compact representation.

There are lots of websites and documents explained about WebAssembly, so in this article, I will only introduce WebAssembly through implementing an extremely simple project using WebAssembly Studio.

A Project Demo

There are many tools to convert C, C++, or Rust snippets into WebAssembly. In this demo, I will explain how to convert C snippets into WebAssembly and use them in a simple project by using the WebAssembly Studio online tool. You can also see examples for C++ and Rust.

First, you access https://webassembly.studio/ . Its interface looks like this:

Creating a new WebAssembly project

Creating a new WebAssembly project

In the Create New Project view, select Empty C Project and click the Create button. We will be sent to the following window:

New C project

New C project

There are a lot of items in this window, however, as a beginner, we just want to focus on the following functions. (Areas of focus are highlighted with yellow borders and numbers):

Areas of focus

Areas of focus

Area 1: Build and run our project.
Area 2: Save the content that we created.
Area 3: Our project contains three main files: the main.c file contains C code, the main.html contains HTML markup, and the main.js contains JS code.
Area 4: Display the compiling process.
Area 5: Things will be displayed in the browsers.

Next, we click the main.c in the Area 3 and look at its default content:

    C
   
xxxxxxxxxx

#define WASM_EXPORT __attribute__((visibility("default")))
WASM_EXPORT
int main() {
  return 42;
}

Change the code so we get this:

    C
   
xxxxxxxxxx

#define WASM_EXPORT __attribute__((visibility("default")))
WASM_EXPORT
int add(int a, int b) {
  return a + b;
}
WASM_EXPORT
int sub(int a, int b) {
  return a - b;
}

We defined two functions add and sub and we also note that, these functions must be marked by WASM_EXPORT attributes. This implies that our functions will be converted into WebAssembly. Click the Save button in the Area 2.

Next, also in the Area 3, we click the main.html. Delete the existing HTML markups and replace them with the following markups:

    HTML
   
 

     
    
xxxxxxxxxx

            
          
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      background-color: rgb(255, 255, 255);
    }
  </style>
</head>
<body>
  <h1 id="add"></h1>
  <h1 id="sub"></h1>
  
</body>
</html>

Click the Save button in Area 2.

Finally, we click the main.js in the Area 3. We replace the statement:

    JavaScript
   
xxxxxxxxxx

document.getElementById("container").textContent = instance.exports.main();

with the following statements:

    JavaScript
   
          x
         
document.getElementById("add").textContent = "1 + 2 = " + instance.exports.add(1,2);
document.getElementById("sub").textContent = "1 - 2 = " + instance.exports.sub(1,2);

And don't forget to click the Save button in Area 2.

Well done! So far, we can build and run our project by clicking the Build & Run button in Area 1, and we can also note things that would be displayed in Area 4 and 5:

Building and running application

Building and running application

There is a new file below our Area 3:

Newly created file

Newly created file

Here is the WebAssembly file, and you can see its content in the right view. We note export "add" and export "sub" , which are two of our C functions (add and sub ) are converted into WebAssembly.

You can download and use this file in your local project by clicking the Download:

Downloading file

Downloading file

Conclusion

In this article, I introduced an online tool that will help us to learn and work with WebAssembly easily. WebAssembly is a great tool, and you can discover more about it by referring to the WebAssembly website. Happy coding!

WebAssembly

Opinions expressed by DZone contributors are their own.

Related

Trending