Upload
mayflower-gmbh
View
334
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Wie man nativen Code in Webseiten direkt einbindet. Ein Ansatz.
Citation preview
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!