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:

Change the code so we get this:

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:

Click the Save button in Area 2.

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

with the following statements:

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!



Source link

Write A Comment