Get Started With WebAssembly In 5 Minutes – A Beginner’s Tutorial

Welcome to a step-by-step beginner’s tutorial on how to get started with WebAssembly (that is WASM for short). Ever since the launch of WASM in 2017, it has created quite a stir in the web development world – From excited code ninjas trying to harness the new powers to demented cyber doomsayers shouting “the end of Javascript is here”.

Anyway, getting started with WASM is quite a hassle, as it does involve having to deal with a number of different languages. So in short, here are the overly simplified steps:

  1. Install Emscripten on your computer.
  2. Create your C, C++, or Rust code.
  3. Compile into WASM module with Emscripten.
  4. Glue-code the compiled WASM into an HTML page and serve it straight through HTTP.

But just how exactly are these done? What is WebAssembly and will it be the end of Javascript? Read on to find out how to write your first “Hello World” WASM application!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes The Basics Install Emscripten
Hello World C Compile & Run Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

A copy of Emscripten is obviously not included in the zip file. Follow the instructions below and download the latest copy instead. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

WEB ASSEMBLY BASICS

Before we go into any of the code stuff, let us start with some boring basics and background of WebAssembly – Feel free to skip if you already know.

 

WHAT IS WEB ASSEMBLY?

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

– Official definition from WebAssembly.org

Now, this definition can be rather cryptic for beginners to fully understand without the proper prior knowledge. So if you are one such lost soul in the cyber world, let us slowly walk through some technical jargon to help you understand.

 

 

INTERPRETED VS COMPILED

In the world of programming, there are 2 kinds of languages:

  • Interpreted Language – The source code is read “as-it-is” and executed on the fly. Examples of interpreted languages include Javascript, Python, PHP, and Perl.
  • Compiled Language – The source code is read and compiled into a lower level, “machine-like” code. Examples of compiled languages include Java, C, C++, and RUST.

 

SO WHY WEB ASSEMBLY?

Because Javascript is an interpreted language. Even though it is convenient that the source code does not have to be compiled (and recompiled on every change made), the performance is just not great for complex web applications these days. Also in terms of security, Javascript source code is open and can be easily viewed by anyone.

With WASM, the compiled code will have an edge in terms of performance and fully optimizing hardware support. Also in terms of security, compiled code is more “machine-like” and cannot be easily reverse-engineered.

 

WILL WEB ASSEMBLY TAKE OVER JAVASCRIPT?

Javascript and WebAssembly (Source: MDN)

Simply no. Several tutorials by the “big boys” even mentioned that “WASM will compliment JS, not replace it”. The key idea here is that WASM acts more like a high-performance module, rather than a fully standalone application. So there you go, please don’t join the doomsayer’s gang.

 

WHAT NOW? HOW TO START?

The above illustration and introduction earlier should have given you a good idea of how this entire “WebAssembly magic” works.

  • We need to install Emscripten first.
  • Write our “hello world” source code in C.
  • Use Emscripten for the sorcery to create our “hello world” WASM module.
  • Launch our WASM module in the browser, and that’s it.

 

 

STEP 1 – INSTALL EMSCRIPTEN

Now that you have a good idea of what WASM is, let us get started by downloading and installing Emscripten.

 

PREREQUISITES

Python 3.6 or newer is required, so go download it from their official website if you have not already done so.

 

DOWNLOADING EMSCRIPTEN

There are 2 ways to get Emscripten. If you have GIT installed, just run the following in the command line:

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

Alternatively, you can also directly download it from Github as a zip file.

 

DOWNLOADING THE TOOLCHAIN

Sadly, the copy that you have just downloaded is just but the core… You still need to get the SDK tools manually. So next, fire up the terminal, navigate to the folder where you installed Emscripten, and run the following:

FOR WINDOWS
cd WHERE/YOU/INSTALLED/EMSCRIPTEN
emsdk update
emsdk install latest
emsdk activate latest
emsdk_env.bat
emcmdprompt.bat
FOR MAC/LINUX
cd WHERE/YOU/INSTALLED/EMSCRIPTEN
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

 

 

STEP 2 – HELLO WORLD IN C

With that, the worst part is over. Moving on, we only have to create our world-famous “Hello World” application in C.

 

THE SOURCE CODE

2a-hello-world.c
#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello world!\n");
}

 

QUICK EXPLANATION

Well, that’s it. For you guys who have not touched on C before, here is a quick layman explanation:

  • #include <stdio.h> That is to include the “standard input-output” library… Without this, the app will be “mute” and cannot even output the “Hello World” text.
  • int main() This main function will run upon launch.
  • printf("Hello world!") Don’t think this one needs an explanation.

 

STEP 3 – COMPILE & RUN

Finally, all we have to do is to compile the “hello world” script into a WASM file – Then access it in our browser.

 

THE COMMAND LINE

emcc 2-hello-world.c -s WASM=1 -o hello-world.html
  • -s WASM=1 Specify that we want a WASM file output.
  • -o hello-world.html Generate the HTML page as well, with the Javascript “Glue Code” all done up nicely.

 

LAUNCH!

Finally, just access the generated HTML file in your web browser, and congratulations – You have created your first WASM application!

 

 

THINGS TO TAKE NOTE

  • Use http:// not file://. That is, directly opening the HTML file in the browser will not work.
  • An HTTP server is required, take your pick – Apache, IIS, NGINX, NodeJS, etc…
  • Alternatively, you can use Emscripten’s built-in simple HTTP server – emrun --no_browser --port 8080 hello-world.html. But take note, you will need to recompile the code with the –emrun linker flag.

 

USEFUL BITS & LINKS

Well done, code ninja! Even though this is only one step, you have already successfully created your first WASM application. Here is a small section on some extras and links that may be useful to you.

 

CAN WASM, JS, HTML TALK WITH EACH OTHER?

Yes and of course. If you poke around on the demo HTML page above – The “Hello World” output from the WASM application is placed into an HTML <textarea>. If you have GUI components, it will be rendered into the HTML <canvas>. It works the other way as well, we can call the WASM function through Javascript. So who says that Javascript is doomed?

 

WHAT ARE THE POSSIBLE USES?

Sadly, WebAssembly still doesn’t seem to be too widely adopted at the time of writing. But one thing for sure, the gaming industry is having a blast with the improved performance – List of WebAssembly Games on HackerNoon. The possibilities are endless though – Online Word Processors, Spreadsheets, Presentation Slides, Photo Editors, Video Editing, etc…

 

A LOT MORE LEARNING

That’s all for this tutorial, and you probably still have a ton of burning questions – How exactly do we “glue” the Javascript and WASM together? How do we customize the HTML page? How do we call WASM functions? Well, take it easy, and here are a couple of good links to check out.

 

 

CHEATSHEET

Getting Started With Web Assembly (Click to enlarge)

 

POWER OR DISASTER?

WebAssembly sure is an interesting addition to the online world, but will it bring more disasters to the web developers? As of right now, a full-stack web developer will be expected to know –

  • Client-side HTML, CSS, JS.
  • A certain degree of design.
  • Various server-side scripts and databases.
  • Mobile-friendly web applications.
  • API and 3rd party integration.
  • Mobile application integration, and maybe even mobile development itself.
  • Project management.
  • Security.
  • Server technologies.
  • Networking technologies and topology.

Now add WebAssembly to the chaos. Really doesn’t hurt much? 😐 But looking on the bright side, if anyone has this amount of knowledge and ninja skills – They can command a very high salary.

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to understand better, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “Get Started With WebAssembly In 5 Minutes – A Beginner’s Tutorial”

Leave a Comment

Your email address will not be published. Required fields are marked *