SALT ANDPEPPER

RUNNING NATIVE CODE IN THEBROWSER WITH NACL

Christian Speckner, Mayflower GmbH

NATIVE CODE IN THEBROWSER?

[BOCHS DEMO]

SERIOUSLY THOUGH:The Web is transforming into a Platform for Application

Development!

SO, WHY NATIVE CODE?Existing codebases: lots of tried-and-tested C / C++code out thereEfficient memory managementSpeed

WHAT IS NACL?

SANDBOXED EXECUTIONENVIRONMENT FOR NATIVE

CODECode is generated by dedicated toolchain (gcc based)Static code analysis and verification before executionNo access to OS or memory outside the sandboxOS functionality only via browser API

PORTABLE NATIVE CLIENT(PNACL)

Compiles to LLVM bytecodeLLVM / clang toolchainTranslated to machine code by the browser at runtimeOnly a single, architecture independent binary

THE BIG PICTURE

COMPATIBILITYSO FAR ONLY CHROME :(

Supported platforms: x86, ARM, MIPSChrome on Windows, Linux, OSX, ChromeOSNo mobile systems yetNACL and PNACL for packaged appsPNACL for the web

API

PEPPERSimilar to the pepper plugin API (PPAPI)C and OOP C++ wrapperAsynchroneous, callback basedAccess to HTML5 filesystemVideo, including OpenGL ES 2.0AudioHTTP, TCP / UDP sockets (packaged apps only)Communication with Javascript via postMessage stylemessages

POSIX IS AVAILABLE AS WELLVirtual filesystem

Resides in memoryHTML5 filesystem and server can be mountedEnables standard POSIX file operations

Network SocketsPOSIX threads

→ Lots of existing POSIX-complient code just compiles outof the box!

NACL-PORTSCollection of opensource libraries and applications ported

to run on NaClBoostBulletffmpegImageMagickOpenCVSDL...

Most require only minor patches to the build system!

HOW DOES A NACL APPLOOK LIKE?(WARNING: C++ AHEAD)

C++: BIRD'S EYE VIEWclass Instance : public pp::Instance {// ...};

class Module : public pp::Module {// ...};

namespace pp { Module* CreateModule() { return new ::Module(); }}

C++: MODULE CLASSclass Module : public pp::Module { public: virtual pp::Instance* CreateInstance(PP_Instance instance) { return new Instance(instance); }};

C++: INSTANCE CLASSclass Instance : public pp::Instance { public: Instance(PP_Instance instance) : pp::Instance(instance) {}

virtual void HandleMessage(const pp::Var& msg) { std::stringstream ss; ss << "Echo: " << msg.AsString(); PostMessage(ss.str(); }};

MANIFESTDescribes the structure of the NACL module for the

browser{ "program": { "portable": { "pnacl-translate": { "url": "demo.pexe" } } }}

HTML<script>

</script>

<embed width=0 height=0 src="demo.nmf"type="application/x-pnacl" onload="onModuleLoad()" onmessage="onMessage()"/>

function onModuleLoad() { naclModule = document.querySelector('embed'); naclModule.addEventListener('message', function(e) { // ... }); }

function onClick() { if (naclModule) { // ... naclModule.postMessage(msg); } }

[DEMO]

USEFUL FOR WHAT?

NUMBER CRUNCHINGAudio / Video processingCustom video / audio decoding & playbackImage filtering editing (Google+ photo editor!)

PACKAGING EXITINGAPPLICATIONS

Browser gamesChrome store packaged appsChromeOS / Chromebooks!

COMPARISION TOASM.JS / EMSCRIPTEN

ASM.JSBytecode-like subset of JS

JIT can optimize very wellStatic type informationNo garbage collection

Firefox has a dedicated JIT codepath: Odinmonkey

Compiles C / C++ to Asm.js via LLVM / clang

EMSCRIPTEN

Compilation to native codeNaCl: Ahead-of-timeAsm.js: Just-in-time

PerformanceNaCl: Almost native (Google: 80%-90%), predictableAsm.js: 2x - 3x native, highly dependent on browser

ThreadsNaCl: full POSIX threadsAsm.js: No threading

CompatibilityNaCl: Just Chrome atmAsm.js: Everything that runs JS (performance varies)

PEPPER.JSImplements Pepper API in Javascript

Allows to compile applications for both NaCl and JS viaEmscriptenCan be used to target both NaCl and other browsers viaAsm.jsObviously still no threads :(

WRAP-UPPowerful technologyRuns existing C / C++ code almost unmodified in thebrowserSupports threadingUseful for both background processing and visibleinteractionPerfect package existing applicatons as Chrome appsCurrently only Chrome :(

THAT'S ALL —

THANK YOU FOR YOURATTENTION!