Cheerp 2.0 released — the most powerful Cheerp yet

Stefano De Rossi
leaningtech
Published in
8 min readFeb 19, 2019

Best in class C/C++ to WebAssembly/JavaScript compiler

Today we are proud to announce the release of Cheerp 2.0, the culmination of 4 years of improvements and optimisations and our biggest release yet since Cheerp 1.0 in 2014.

Cheerp is an open-source, commercial C/C++ compiler for HTML5 web applications, capable of compiling C/C++ to WebAssembly, JavaScript, or a combination of the two.

Cheerp is the most advanced and flexible solution to bring C++ code to the Web. It is based on the industry-standard Clang/LLVM stack, and provides a robust workflow with sensible defaults, clear error messages and gcc-like command-line options that allow for an easy integration in IDEs and continuous integration environments. Cheerp runs on Windows, macOS and Linux, making it possible for C++ developers to create Web application in a seamless manner on their system of choice.

Cheerp 2.0 generates WebAssembly code which is on average 20% smaller in footprint, and either as fast or faster (7% faster on average) than what generated by Emscripten, the main alternative C++ to WebAssembly compiler. In addition, it can also generate mixed JavaScript-WebAssembly outputs, circumventing the limitations of WebAssembly (such as direct DOM and WebGL/WebAudio access) without sacrificing its native-like speed.

Cheerp is the most flexible, best performing solution to run C/C++ code on the web. Battle-tested on millions of lines of code, used in many commercial products, and backed by Leaning Technologies, a company with years of experience in compile-to-JavaScript and compile-to-WebAssembly solutions, Cheerp is the tool of choice for converting C/C++ to web applications.

New Features of Cheerp 2.0

Cheerp 2.0 introduces support to WebAssembly, in addition to the garbage-collectible JavaScript target that has always been part of Cheerp. In addition, Cheerp 2.0 also introduces a new mixed mode, which allows to compile C/C++ to JavaScript, WebAssembly, or a combination of them, from a single code base.

The focus of Cheerp 1.0 was to compile C/C++ to an object-based, garbage-collectible JavaScript target, capable of interacting with the DOM and HTML5 APIs in a fully transparent way, with no overhead.

Cheerp 2.0 allows to tap into the native-like performance of WebAssembly, while retaining the flexibility and power of the object-based compilation to regular JavaScript. With a new range of attribute tags (such as [[cheerp::genericjs]] and [[cheerp::wasm]]), Cheerp 2.0 new mixed mode allows to tag specific classes and functions that will be compiled to the specified target, allowing to mix-and-match WebAssembly and JavaScript modes. No tags are required at all if the codebase is wholly compiled to WebAssembly or to JavaScript.

Cheerp 2.0 also introduces a new set of improved optimisation steps, targeting both improved runtime performance as well as reduced output size. In this regard, one of the most significant changes is the introduction of the CFGStackifier algorithm. As a result, Cheerp 2.0 generates WebAssembly code that is at least as fast but usually faster than Emscripten, and typically smaller in footprint.

CFGStackifier — better structured control flow reconstruction

CFGStackifier is an algorithm to reconstruct a JavaScript/WebAssembly structured control flow from a LLVM optimized control flow graph. A basic version of this algorithm is implemented by upstream LLVM.

We extended CFGStackifier and tailored it to work well for both the WebAssembly and JavaScript targets. CFGStackifier replaces the aging Relooper algorithm introduced originally by the Emscripten project.

To a large extent, Relooper is a proof-of-concept algorithm, which can always compute a working solution, but not necessarily the optimal one, due to unnecessary restrictions imposed to the structure of the output flow. It does work reasonably well on many common cases, but over the years, we found significant inefficiencies in the compiled control flow on the complex commercial codebases (such as videogames and CAD software) that Cheerp is used on.

CFGStackifier is a principled, state-of-the-art, solution to the control flow reconstruction problem, which has provides a significant reduction in output size (both in WebAssembly and JavaScript targets). Moreover we have noticed a performance improvement up to 5–8% on very complex applications such as raytracing engines.

CFGStackifier has many interesting technical details and we plan to publish one (or maybe two) blog posts about it in the future. This new algorithm is stable and enabled by default in Cheerp 2.0, but we also allow users to select the old Relooper based solution by using the command line option -cheerp-cfg-legacy.

DOM manipulation and WebAPI access from WebAssembly — mixed-mode Cheerp

Cheerp 2.0 can compile C++ into a combination of WebAssembly and JavaScript code, allowing to leverage the advantages of WebAssembly (native-like speed and size) and of JavaScript (DOM manipulation and WebAPI access) on the same code base.

The -cheerp-mode command line switch selects the main compile output mode between JavaScript and WebAssembly. In addition, individual classes and functions can be tagged using Cheerp custom attributes — [[cheerp::wasm]] and [[cheerp::genericjs]] — to determine how they will be compiled. As an example, see this code snippet which can be compiled to WebAssembly:

This is very useful in the (common) case of wanting to compile a body of C++ code into fast WebAssembly code, but needing to interface with it from JavaScript. Using Cheerp’s interoperability and granular attribute tagging, this can be done without needing to write any ‘glue’ code.

Any method tagged with [[cheerp::genericjs]] will allow full access to the browser APIs (e.g. the DOM, WebGL, etc.), as well as any third-party JavaScript libraries. At the same time, and with no manual intervention, you can allocate and use objects from WebAssembly without having to worry about interfaces — Cheerp will generate all that automatically.

What you can do with Cheerp

Home.by.me, a home and interior design 2D/3D CAD made with Cheerp, by Dassault Systèmes.

Cheerp is a powerful, flexible and robust tool, which can be used in multiple ways:

Convert existing C++ application to Web applications: Cheerp can recompile any large scale C++ application into an HTML5 web application, allowing you to provide your users with a modern, cloud integrated user experience with minimal interventions on the core business logic.

By compiling your C++ code, there is no need to rewrite your application from scratch in JavaScript, saving you time, resources and the headaches of maintaining two code bases in parallel.

Compile native C++ games to HTML5: Cheerp allows you to quickly port your C++ game to the web, with no code rewriting. Modern web browsers are powerful gaming platforms, including 3D graphics (through WebGL), programmable sound pipeline (through WebAudio) and motion sensors (accelerometers and GPS). You can use Cheerp to convert full games or to offer a playable teaser trailer or demo than can be started with a single click.

Teeworlds.wasm, an upcoming multi-player, serverless WebAssembly game compiled from C++ with Cheerp.

Convert C++ libraries and integrate them into HTML5 applications: as a general rule, if you have a problem, there is a C/C++ library (either open source or proprietary) that will solve it.

With Cheerp you can compile any library and expose a web API that can be used directly from JavaScript code in your Web app. For a worked example of a C++ library compiled using Cheerp see our previous post.

Cheerp add-ons (commercial users)

As part of our offering for commercial users we provide several proprietary add-on libraries, designed to simplify porting and debugging of complex applications using Cheerp.

The main add-ons for Cheerp currently available are:

  • Cheerp memory profiler: This tool provides real-time accounting of memory usage, including introspection APIs designed to help in identifying memory leaks. This is integrated with an hosted JavaScript script to be added to the application HTML page to monitor memory consumption (and particularly leaks) in real time. The full Documentation for the Cheerp memory profiler is available here.
  • libposixcompat: Provides additional compatibility with POSIX functions such as filesystem and timing APIs. For more info see here.
  • libemscompat: Provides partial compatibility with Emscripten APIs, to simplify migrating projects to Cheerp.

Performance Benchmarks

Detailed performance benchmarks will be provided in a dedicated blog post. A summary of runtime performance and output size, focused on WebAssembly, is provided in this post.

Performance was evaluated on Google Chrome (standalone v8 — git revision) and Mozilla Firefox (standalone SpiderMonkey — hg revision). Performance was compared with Emscripten (git revision).

Runtime performance — Firefox

On Firefox’s SpiderMonkey engine, Cheerp 2.0 WebAssembly output is on average 36% slower than native, ranging from 1.13x times native speed to 2.45x native speed depending on the specific benchmark.

On average, WebAssembly code generated by Cheerp 2.0 is 9% faster than the one generated by Emscripten (best case: Cheerp 29% faster, worst case: same speed).

Cheerp 2.0 runtime performance relative to native speed (Native = 1, the lower the better). Firefox SpiderMonkey. Full data available here.

Runtime performance — Chrome

On Chrome’s v8 engine, Cheerp 2.0 WebAssembly output is on average 80% slower than native, with Chrome therefore seeming overall slower, and a lot more variable, in executing WebAssembly code compared to Firefox.

On average, WebAssembly code generated by Cheerp 2.0 is 5% faster than the one generated by Emscripten (best case: Cheerp 11% faster, worst case: Emscripten 2% faster).

Cheerp 2.0 runtime performance relative to native speed (Native = 1, the lower the better). Chrome v8. Full data available here.

Build size

When comparing build size, the cumulative size of the loader JavaScript file and the WebAssembly file was used.

The output of Cheerp 2.0 is on average 20% smaller compared to Emscripten (best case: Cheerp 44% smaller, worst case: Emscripten 2% smaller).

Cheerp 2.0 build size (WebAssembly binary plus any other required file, the lower the better.) Log scale. Full data available here.

Getting started with Cheerp 2.0

Cheerp 2.0 is available for Windows, macOS and Linux from https://leaningtech.com/cheerp/download/.

To get started with Cheerp, please visit the main Documentation page. You will find instructions on how to download, install and use Cheerp, as well as step-by-step tutorials.

Summary

Cheerp 2.0 is the most powerful release of Cheerp yet, and the culmination of 4 years of work since Cheerp 1.0 in 2014. This new major release introduces support for WebAssembly, as well as selective compilation into mixed-mode JavaScript-WebAssembly, which allows to leverage the advantages of WebAssembly (speed and size) and JavaScript (DOM and WebAPI access, garbage collection) on the same code base.

Cheerp 2.0 produces WebAssembly code that is faster, and smaller in size, then Emscripten, while retaining more flexibility in accessing the DOM and WebAPIs and libraries. Cheerp is an actively developed project backed by Leaning Technologies, a company with years of experience in compile-to-JavaScript and compile-to-WebAssembly solutions, and a strong technical team that can provide support and professional services if needed.

Tested on millions of lines of code, chosen by many commercial products, Cheerp is the best technology to enable complex, large-scale applications to be converted to a Web application.

For more information on how Cheerp can help your organization to leverage your existing C++ code to develop HTML5 web applications that work on any device, with no need for plug-ins or download, please check out our website at https://leaningtech.com/cheerp/.

Follow us on twitter and on our website https://leaningtech.com. For additional technical information on Cheerp, please visit our wiki or our tech blog.

--

--