Previewing the WebAssembly Explorer

WebAssembly is a new, cross-browser format for programs on the Web. You can read all about it in Lin Clark‘s six-part series, A cartoon intro to WebAssembly. Unlike JavaScript, WebAssembly is a binary format, which means developers need new tools to help understand and experiment with WebAssembly. One such tool is Mozilla’s WebAssembly Explorer.

The video below demonstrates the basic functions of the WebAssembly Explorer, which lets developers type in simple C or C++ programs and compile them to WebAssembly.

One advantage of WebAssembly—and of the WebAssembly Explorer—is that developers can see exactly what optimizations are being applied to their code. For example, the WebAssembly compiler in the video is able to use C’s type information to automatically select between traditional division and a more efficient bit-shifting shortcut. With JavaScript, a browser’s JIT compiler may eventually arrive at the same optimization, but there are no guarantees. Ahead-of-time compilation also avoids the profiling and observational overhead associated with opportunistic JIT compilers.

While the WebAssembly Explorer is a great learning tool, it’s still in early development and not yet suitable for complex programs. Developers who need a production-grade compiler suite should look to Emscripten, which was originally written to output asm.js but has now been extended to produce WebAssembly as well.

You can find the WebAssembly Explorer’s source code on GitHub, and you can begin experimenting with WebAssembly when it lands in Firefox 52 later this week.

About Dan Callahan

Engineer with Mozilla Developer Relations, former Mozilla Persona developer.

More articles by Dan Callahan…


5 comments

  1. Rodolfo De Nadai

    Pretty damn cool!

    March 7th, 2017 at 08:45

  2. Jj

    Hey Dan,
    So this means that the code that arrives to my machine is as good as binary software?

    It looks like now it is even more difficult (past uglified js) to understand what code I’m running and the option I had to inspect a piece of downloaded JS and debug it to see what it is doing are going away.

    Is that so?

    March 7th, 2017 at 15:42

    1. Dan Callahan

      Hi Jj,

      With WebAssembly, the code that arrives at your machine is, literally, binary software. This does have costs in terms of inspection and debugging, but those concerns already exist in equal measure with asm.js or common minification/uglification/bundling toolchains.

      On a personal level, I’m hopeful that open source libraries will adopt reproducible build practices so that binaries can be verified against upstream source and and locked down via a hash, but that will, admittedly, have a limited reach.

      March 8th, 2017 at 07:23

  3. Jeffrey

    How does WasmExplorer translate C/C++ to wast? Is it somehow using a Clang and LLVM back end or something else?

    March 30th, 2017 at 08:29

    1. Dan Callahan

      Yep. Right now it’s just POSTing the code to a backend service that runs Clang.

      March 31st, 2017 at 14:31

Comments are closed for this article.