Learning How to Learn WebAssembly
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 VBA 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 of the 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.x
- Emscripten SDK (emsdk)
For the Emscripten SDK, I’m using a Mac, so I downloaded the Emscripten SDK for Linux and OS X. I extracted it into the path ~/Tooling/emsdk (I dropped the -portable). It’s a pretty easy setup, just follow the directions in the installation section.
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: I added the environment variables generated when running the source ./emsdk_env.sh command to my PATH in my exports.zsh (if you use bash, you would add them to your .bash_profile) so I could run the compile commands without the ./ (emcc instead of ./emcc). The gist below shows what gets exported.
Step 3: Get the Development Tooling
There’s a whole 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 guy, 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 gist below represents a simple CMake configuration.
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 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 at 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 hackr.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 $40 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 😀.
At Pandera Labs, we’re always exploring new ways to build products and iterate on our engineering processes, and we value sharing our findings with the broader community as our company and our technology evolve together. To reach out directly about the topic of this article or to discuss our offerings, visit us at panderalabs.com.
