If you're interested in WebAssembly and want to learn more, check out the book I wrote for Packt:

WebAssembly is no joke. It took me two damn years to get a single star on one of my GitHub repositories. It's an npm package that had over 900 downloads last month.

I created a repository as a placeholder for an npm package using WebAssembly, and it got 4 stars...in 14 hours! If you're like me, you're probably intrigued by this new technology, but have no idea where to start.

Rather than write a post about what WebAssembly can do or how neat it is (which it is), I'm going to try to provide a course of action you can follow to get up and running.

Before I get into the meat and potatoes, I should probably provide a little of my background. I'm a JavaScript developer who wrote a lot of VB code, so the underlying technologies were just as new to me as they may be to you. Let's get started!

Step 1: Understand the Technology

It's probably a good idea to familiarize yourself with some higher level concepts before you start writing any code. There's a great series of articles that Lin Clark from Mozilla wrote called A cartoon intro to WebAssembly. Honestly, if that's all you read, you'll be in pretty good shape.

If you want to go a little deeper, you'll find that the dates for explanatory blog posts and articles are all over the map. This is a problem because the standard has been evolving over the last few years and some of this information might be outdated. I would highly recommend going to the official site, WebAssembly.org, and poking around. The Getting Started section is helpful and the spec is available for download, although its 157 pages and can be overwhelming.

If you're sick of reading about it, and want to get down to brass tacks, you'll need to install the toolchain. Let's get crackin'!

Step 2: Install the Toolchain

Before I get into the installation steps, I wanted to point out an alternative: If you just want to play around with WebAssembly without committing to installing a bunch of stuff on your computer, you can actually get pretty far with WasmFiddle.

The main caveat being that each time you make a code change, you'll have to download a new .wasm file and drop it in a directory.

If you want to go all in, great! There's a few things you'll need to install to start creating WebAssembly modules. This page has more details about what you'll need, but here's the quick breakdown:

• Git
• CMake
• Host system compiler (GCC, Xcode, or Visual Studio 2015)
• Python 2.7
• Emscripten SDK (emsdk)

For the Emscripten SDK, I'm using a Mac, so I followed the installation instructions on the Emscripten site. I cloned the repository into the path ~/Tooling/emsdk.

I don't want to get into the details of what Emscripten is or how it's related to WebAssembly. I'll just say it's a LLVM-to-JavaScript compiler that can also generate WebAssembly modules.

Note

Made sure you run the source ./emsdk_env.sh command (within the /emsdk directory) every time you open a new terminal instance. Alternatively, you can add the command to your .bash_profile or .zshrc file.

Step 3: Get the Development Tooling

There's a bunch of options available for development tooling. You need an editor or IDE that supports C or C++. There's a good chance that the editor you‘re already using will work. I personally use CLion because I'm a JetBrains enthusiast, but you can use Visual Studio Code, Visual Studio (Windows), Xcode (Mac), and many others.

Note

If you decide to use CLion, you need to create a CMakeLists.txt file with some pretty basic information that goes in the root folder path of your project.

The snippet below represents a simple CMake configuration.

# This is the version that came packaged with my version of CLion:
cmake_minimum_required(VERSION 3.7)

# I'm giving the project an arbitrary name for demonstration purposes,
# you can name it whatever you want:
project(example)

# Create a src directory at the root level of your project and add a
# file with whatever name you want (I used the project name for
# simplicity):
add_executable(example src/example.c)

Step 4: Learn C or C++

This is probably the most time-consuming part. You'll need to learn C, C++, or Rust. If you have a Pluralsight membership, there's a great learning path for C++, but you're looking at a 47-hour commitment. Pluralsight also has a couple of C courses (I haven't watched them, but I'm sure they're solid).

There's a wealth of free resources on the web to learn either one, given their level of maturity. Here's a few I found that are a good place to start:

• Learn C
• Learn C the Hard Way
• Learn C++
• C and C++ Programming

Learn C and Learn C++ are pretty nifty because they have interactive tutorials, so you can run the code right in the browser. If you decide to go the C++ route, Kate Gregory does an awesome job of teaching the language.

She's the author for several of the Pluralsight courses in the C++ learning path mentioned above. Rust is another great option that works well with WebAssembly. It's a relatively new language, so the training material available online isn't as abundant as C or C++.

There's a Rust Fundamentals course on Pluralsight and Udemy offers a Rust training course for a very reasonable price. I also found this list on hacker.io with training material available from various sources.

Step 5: Learn WebAssembly

This was probably one of the trickiest parts for me. There's a lot of blog posts and tutorials out there to get you up and running, but they don't get too deep into the underlying technology (or they get way too deep). I would highly recommend the Getting Started Using WebAssembly course by Guy Bedford on egghead.io. If you're serious about WebAssembly, the price you pay for an egghead membership is well worth the cost.

A one-stop shop of great resources is Awesome wasm repo on GitHub. There's an incredibly comprehensive list of articles, tooling, walkthroughs, etc. If you're a JavaScript developer that's familiar with Node.js, I put together a simple boilerplate project on GitHub that demonstrates how to integrate .wasm files with JavaScript. If you want to test it out, you'll need to have Node.js 8 installed.

Wrap Up

Getting started with WebAssembly is no trivial task. I've been researching and playing around with it for almost two months, and I feel like I've barely scratched the surface. It's impossible to predict the future (especially the future of the web), but I believe learning WebAssembly will be a beneficial investment of time.

You can also look at it this way: Even if WebAssembly gets scrapped, you can still get a job as a C++ programmer 😀.