The web is growing fast and online games and other compute-intensive applications expand their user-bases every day. These trends create a growing demand on performance in JavaScript applications. Even though JavaScript has benefited from huge performance improvements in recent years, there is great potential for an even faster web. Browser technologies such as asm.js or Google’s NativeClient enable near-native performance in browsers. More recent efforts led to the specification of WebAssembly, the future vendor-independent standard for native webapps. This talk takes a closer look at Emscripten, a toolchain that transpiles C++ to asm.js. The talk answers questions regarding performance and about the integration with the popular CMake build system.

1. Veranstalter Gold-Partner
Patrick Charrier
C++ for the Web

2. Veranstalter Gold-Partner
20
16
Patrick Charrier
PHD-candidate
in Darmstadt
Graduate School
Computational
Engineering
(TU Darmstadt)
Computer
Animation and
Medical Simulation
Vorstellung

3. Veranstalter Gold-Partner
20
16
 Why C++ for theWeb?
 Tools
 Demos
 Outlook -WebAssembly
Content

4. Veranstalter Gold-Partner
20
16
JavaScript
 Slow
 Not typesafe
 Runs in browser
C++
 Fast
 Typesafe
Why C++ for the Web?
C++ and
JavaScript

5. Veranstalter Gold-Partner
20
16
 TheWeb is the Master of Deployment.
 Simple Updates
 Platform independent
 “JavaScript is slow.”
 Yes and No: seeV8,TraceMonkey and Nitro
 Near-native performance
possible (see later)
Why C++ for the Web?

6. Veranstalter Gold-Partner
20
16
asm.js
and
Emscripten
Partner:

7. Veranstalter Gold-Partner
20
16
 asm.js is not Assembly!
 Low-level subset of JavaScript
 Easily optimizable
 Memory abstracted as Array
 Emscripten is a C++ to asm.js transpiler.
 Files have to be specially handled.
 Supports OpenGL through WebGL.
 No support for SIMD.
Tools – asm.js and Emscripten

8. Veranstalter Gold-Partner
20
16
 JavaScript Engines accelerate typed code.
 Emscripten emulates typed code:
JavaScript Optimizations
function compiledCalculation() {
var x = f() | 0; // x is a 32-bit value
var y = g() | 0; // so is y
return (x + y) | 0;
// 32-bit addition, no type or overflow checks
}

9. Veranstalter Gold-Partner
20
16
 JavaScript Engines optimize typed arrays.
 Emscripten uses typed arrays to emulate “memory”:
JavaScript Optimizations
var MEM8 = new Uint8Array(1024 * 1024);
var MEM32 = new Uint32Array(MEM8.buffer);
// alias MEM8's data
function compiledMemoryAccess(x) {
MEM8[x] = MEM8[x + 10]; // read from x+10, write to x
MEM32[(x + 16) >> 2] = 100;
}

10. Veranstalter Gold-Partner
20
16
(from http://kripken.github.io/mloc_emscripten_talk/#/16)
Emscripten Academic Benchmarks

11. Veranstalter Gold-Partner
20
16
(from http://kripken.github.io/mloc_emscripten_talk/#/17)
Emscripten Realistic Benchmarks

12. Veranstalter Gold-Partner
20
16
 Commandline-Demo
 Debug-Demo
 Library-Demo
 CMake-Demo
 Visual Studio (2010)-Demo
Tools – asm.js and Emscripten

13. Veranstalter Gold-Partner
20
16
 Install Emscripten into
a directory without whitespaces.
 Some libraries have been ported already:
emcc –-show-ports
 Ported, but not deployed with Emscripten:
QT, Ogre3D, Box2D, Recast, Poppler, SQLite,
bardecode, …
Helpful Remarks

14. Veranstalter Gold-Partner
20
16
Google
Native
Client
Partner:

15. Veranstalter Gold-Partner
20
16
 Native Code in sandbox
 Runs only in Google Chrome or Chromium.
 Files have to be specially handled
 This is the main difficulty while porting.
Tools – Google Native Client

16. Veranstalter Gold-Partner
20
16
 Demo
Tools – Google Native Client

17. Veranstalter Gold-Partner
20
16
Architecture Performance Penalty
x86-32 15%
x86-64 25%
ARM 10%
Google Native Client Benchmarks
Frequently Questioned Answers:
• Yes, Native Client supports Threading!
• Yes, Native Client supports SIMD!

18. Veranstalter Gold-Partner
20
16
Cheerp
Partner:

19. Veranstalter Gold-Partner
20
16
 Commercial,
but free for Open Source projects
 Better memory model
 Consumes less memory
 No 2GB limit
 (Better protection from buffer overflows)
 C++ language extensions for improved bindings
Tools –

20. Veranstalter Gold-Partner
20
16
WebAssembly
Partner:

21. Veranstalter Gold-Partner
20
16
 Byte-code running in the web browser
 Announced in June 2015.
 First goal: Compilation from C++
 Later: Other languages
 Will be supported by Firefox, Chrome
Microsoft Edge and Safari.
 First implementations will be based
on Native Client and asmjs.
Outlook -

22. Veranstalter Gold-Partner
20
16Partner:
Vielen Dank!Ich freue mich auf Ihr Feedback!

23. Veranstalter Gold-Partner
20
16
Fragen?
Partner: