Learn WebAssembly With WebAssembly Studio
Join the DZone community and get the full member experience.Join For Free
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?
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:
In the Create New Project view, select Empty C Project and click the Create button. We will be sent to the following window:
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):
- 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.cfile contains C code, the
main.htmlcontains HTML markup, and the
main.jscontains 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
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:
There is a new file below our Area 3:
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 (
sub ) are converted into WebAssembly.
You can download and use this file in your local project by clicking the Download:
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!
Opinions expressed by DZone contributors are their own.