Developers Club geek daily blog

2 years, 10 months ago
WebAssembly is a new binary format in which web applications can be compiled. It is projected and implemented directly while you read these lines and developers of all main browsers move it forward. Everything changes very quickly! We will show a current status of the project with rather deep immersion in tools on work with WebAssembly in this article.

In order that WebAssembly earned, we need two main components: the code assembly tooling in a binarnik of the WebAssembly format and the browsers capable this binarnik to load and execute. Both that, and another is not completely created and very strongly depends on completion of work on the WebAssembly specification, but in general it is separate components and their development goes in parallel. This separation — a good thing, it will allow compilers to create the WebAssembly-applications capable to work in any browser, and to browsers — to start WebAssembly-programs is not dependent on by what compiler they were created. In other words — we receive an open competition of building tools and browsers that all this will continuously move forward, bringing to the ultimate user the excellent choice. Besides, such separation allows design teams of tools and browsers to work in parallel and independently.

The new project on the party the WebAssembly tools about which I want to tell today is called Binaryen. Binaryen is the library for support of WebAssembly in compilers written on With ++. If you personally do not work on the compiler WebAssembly, then you probably do not need to know something about Binaryen directly. If you use some compiler WebAssembly, then it, perhaps, under a cowl uses Binaryen — we will review examples below.

The kernel of Binaryen library is intended for parsing and generation of WebAssembly, and also representation of its code in the form of an abstract syntax tree (AST). On the basis of these opportunities the following useful utilities are created:

  • the utility for the command line, capable to load the WebAssembly-module, to rasparsit it and to execute its code as the interpreter (to make actions, to output result in the console). For loading of the module and an output of result the temporary notation of s-expressions having .wast suffix is used (I will remind that a final format of representation of binary WebAssembly modules still in development process).
  • asm2wasm — the utility for compilation of asm.js in WebAssembly.
  • wasm2asm — the utility in asm.js (is still developed) for compilation of WebAssembly
  • s2wasm which compiles .s-files (the format created by a new bekend for WebAssembly in LLVM) in WebAssembly.
  • wasm.js — Binaryen port on JavaScript. It will allow to start all above-stated tools directly in the browser.

About Binaryen it is possible to look at these slides.

Once again I will remind that WebAssembly is in a stage of active design, so the input and output Binaryen formats (.wast.s) are not final. Binaryen is constantly updated with updating of the WebAssembly specification. Degree of cardinality of changes decreases over time, but nobody can guarantee to any compatibility, of course, yet.

Let's consider several areas where Binaryen can be useful.

Compilation in WebAssembly with use of Emscripten

Emscripten can compile a code on With in asm.js, and Binaryen (by means of the utility of asm2wasm) can compile asm.js in WebAssembly, thus the linking of Emscripten + Binaryen gives us complete set of tools for compilation of a code on With and With ++ in WebAssembly. You can start asm2wasm on asm.js a code, but it is simpler to allow Emscripten to make it for you, somehow so:

emcc file.cpp -o file.js -s ‘BINARYEN=”path-to-binaryen”’

Emscripten will compile the file.cpp file and on an output will give you the JavaScript-file, plus the separate file in the .wast format with WebAssembly. Under a cowl of Emscripten will compile a code in asm.js, itself will start for it asm2wasm and will save result. In more detail it is described on Wicky of the Emscripten project.

But wait what sense to compile something in WebAssembly if browsers do not support him yet? Excellent question! :) Yes, we meanwhile will not be able to start this code in one browser. But we can already test something with its help. So, we want to check whether a right binarnik the linking of Emscripten + created Binaryen. How to make it? For this purpose we can use wasm.js which Emscripten integrated into the output .js-file received by command of a challenge emcc (see above). be comprised by wasm.js Binaryen port on Javascript, including the interpreter. If you start file.js (in node.js or in the browser), then you receive result execution of WebAssembly. It allows us to confirm actually that the compiled binarnik of WebAssembly works truly. You can look at couple more of examples on an example of such program, plus is in a repository for the test purposes.

Of course, we for the present do not stand on the firm earth with all these tools. A test environment turns out oddish. With ++ the code is compiled in WebAssembly and then executed in the WebAssembly-interpreter which in itself is written on With ++, but is ported on JavaScript. Also there are no other methods yet to start all this. But we have several reasons to trust the received results:

  • The output code takes all Emscripten tests. They include processing of a set of real code bases (Python, zlib, SQLite) plus a set of "suspicious" situations in With and With ++. By experience it is possible to tell that if the Emscripten tests are taken for all these cases, then and other code processed by Emscripten will normally behave
  • The Binaryen interpreter takes all internal WebAssembly tests defining correctness of execution of WebAssembly. In other words, when we will get support of WebAssembly in browsers, they will have to behave in the same way (well unless to work quicker).
  • The most part of work is done by Emscripten which is the stable compiler long ago used in the prodakshena and only relatively the small part over it becomes by means of Binaryen (its code makes only couple of thousands of lines). It is less than code — less bugs.

All this shows that we already have some result, we can compile a code on With and With ++ in WebAssembly and even somehow to start it.

Notice that WebAssembly — only one more new feature, and, having distracted from it, all the rest in Emscripten works still: Emscripten allows to use libc and syscalls, OpenGL/WebGL a code, integration into browsers, integration with node.js, etc. As a result projects which already use Emscripten will be able to be switched to WebAssembly just by adding of new command line option. And it will allow With ++ to projects to be compiled in WebAssembly and to work in browsers without any efforts.

Use of a new experimental bekend to LLVM for WebAssembly with Emscripten

We just saw a new important stage in development of Emscripten which gave it the chance to create WebAssembly-modules and even to test their work. But on it work does not stop: it was only use of the current compiler asm.js, together with the utility of asm2wasm. Is new bekend to LLVM for WebAssembly (more correct for the present is not present, but it is actively written) — directly in the main branch of development of LLVM. And, though it is also not ready for real life application, over time it will become very important tool. Binaryen supports a format of its output data.

LLVM бекенд for WebAssembly, as well as majority LLVM бекендов, creates assembler code, in this case in a special .s-format. This format is close to WebAssembly, but is not directly identical to it — it is rather similar to a compiler C output (the linear list of instructions, one instruction for the line), than on WebAssembly abstract syntax tree. This .s-file can be transformed to WebAssembly by rather trivial method (in general, Binaryen includes the utility of s2wasm which also does it — look as far as it is simple). You can start her on yourself, or use for this Emscripten which supports now the new option WASM_BACKEND which you can use here so:

emcc file.cpp -o file.js -s ‘BINARYEN=”path-to-binaryen”’ -s WASM_BACKEND=1

Pay attention that you need also to use the option BINARYEN as s2wasm is a part of Binaryen. When all these options are specified, Emscripten uses new bekend for WebAssembly instead of use of the compiler asm.js. After a challenge of a bekend and receipt of the file from it in the Emscripten .s-format will cause s2wasm for converting in WebAssembly. You can find several examples of programs which you can already collect by a similar method on Wicky of the Emscripten project.

Thus, we have two methods to assemble the WebAssembly-module with use of Binaryen:
  1. Emscripten + asm.js backend + asm2wasm that works already right now and has to be rather simple and acceptable option
  2. Emscripten + new bekend for WebAssembly + s2wasm which yet not completely working option, but with development of a bekend for WebAssembly will come to the forefront.

The purpose at the moment — to make transition from the first method to the second as less as possible difficult. Ideally everything has to be reduced to replacement of one argument in the command line.

Thus we create the accurate plan:

  1. We use Emscripten for generation of asm.js of a code (already today)
  2. We pass to generation of WebAssembly through asm2wasm (it is already possible, but browsers are not ready yet)
  3. We pass to generation of WebAssembly through new LLVM bekend (as soon as it is ready)

Each step gives new benefits to users (speed!) and practically does not cause difficulties in developers.

In conclusion I want to tell that though this article and is written about Binaryen in the context of its application with Emscripten, it is still separate library for WebAssembly of the general application. If you have ideas of creation of some tools for work with WebAssembly — you can take Binaryen library and work with it, without looking back at Emscripten, LLVM or something else.

This article is a translation of the original post at
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here:

We believe that the knowledge, which is available at the most popular Russian IT blog, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus