Wie man nativen Code in Webseiten direkt einbindet. Ein Ansatz.

1. SALT AND
PEPPER
RUNNING NATIVE CODE IN THE
BROWSER WITH NACL
Christian Speckner, Mayflower GmbH

2. NATIVE CODE IN THE
BROWSER?

3. [BOCHS DEMO]

4. SERIOUSLY THOUGH:
The Web is transforming into a Platform for Application
Development!

5. SO, WHY NATIVE CODE?
Existing codebases: lots of tried-and-tested C / C++
code out there
Efficient memory management
Speed

6. WHAT IS NACL?

7. SANDBOXED EXECUTION
ENVIRONMENT FOR NATIVE
CODE
Code is generated by dedicated toolchain (gcc based)
Static code analysis and verification before execution
No access to OS or memory outside the sandbox
OS functionality only via browser API

8. PORTABLE NATIVE CLIENT
(PNACL)
Compiles to LLVM bytecode
LLVM / clang toolchain
Translated to machine code by the browser at runtime
Only a single, architecture independent binary

9. THE BIG PICTURE

10. COMPATIBILITY
SO FAR ONLY CHROME :(
Supported platforms: x86, ARM, MIPS
Chrome on Windows, Linux, OSX, ChromeOS
No mobile systems yet
NACL and PNACL for packaged apps
PNACL for the web

11. API

12. PEPPER
Similar to the pepper plugin API (PPAPI)
C and OOP C++ wrapper
Asynchroneous, callback based
Access to HTML5 filesystem
Video, including OpenGL ES 2.0
Audio
HTTP, TCP / UDP sockets (packaged apps only)
Communication with Javascript via postMessage style
messages

13. POSIX IS AVAILABLE AS WELL
Virtual filesystem
Resides in memory
HTML5 filesystem and server can be mounted
Enables standard POSIX file operations
Network Sockets
POSIX threads
→ Lots of existing POSIX-complient code just compiles out
of the box!

14. NACL-PORTS
Collection of opensource libraries and applications ported
to run on NaCl
Boost
Bullet
ffmpeg
ImageMagick
OpenCV
SDL
...
Most require only minor patches to the build system!

15. HOW DOES A NACL APP
LOOK LIKE?
(WARNING: C++ AHEAD)

16. C++: BIRD'S EYE VIEW
classInstance:publicpp::Instance{
//...
};
classModule:publicpp::Module{
//...
};
namespacepp{
Module*CreateModule(){
returnnew::Module();
}
}

17. C++: MODULE CLASS
classModule:publicpp::Module{
public:
virtualpp::Instance*CreateInstance(PP_Instanceinstance){
returnnewInstance(instance);
}
};

18. C++: INSTANCE CLASS
classInstance:publicpp::Instance{
public:
Instance(PP_Instanceinstance):pp::Instance(instance){}
virtualvoidHandleMessage(constpp::Var&msg){
std::stringstreamss;
ss<<"Echo:"<<msg.AsString();
PostMessage(ss.str();
}
};

19. MANIFEST
Describes the structure of the NACL module for the
browser
{
"program":{
"portable":{
"pnacl-translate":{
"url":"demo.pexe"
}
}
}
}

20. HTML
<script>
</script>
<embedwidth=0height=0src="demo.nmf"type="application/x-pnacl"
onload="onModuleLoad()"onmessage="onMessage()"
/>
functiononModuleLoad(){
naclModule=document.querySelector('embed');
naclModule.addEventListener('message',function(e){
//...
});
}
functiononClick(){
if(naclModule){
//...
naclModule.postMessage(msg);
}
}

21. [DEMO]

22. USEFUL FOR WHAT?

23. NUMBER CRUNCHING
Audio / Video processing
Custom video / audio decoding & playback
Image filtering editing (Google+ photo editor!)

24. PACKAGING EXITING
APPLICATIONS
Browser games
Chrome store packaged apps
ChromeOS / Chromebooks!

25. COMPARISION TO
ASM.JS / EMSCRIPTEN

26. ASM.JS
Bytecode-like subset of JS
JIT can optimize very well
Static type information
No garbage collection
Firefox has a dedicated JIT codepath: Odinmonkey

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

28. Compilation to native code
NaCl: Ahead-of-time
Asm.js: Just-in-time
Performance
NaCl: Almost native (Google: 80%-90%), predictable
Asm.js: 2x - 3x native, highly dependent on browser
Threads
NaCl: full POSIX threads
Asm.js: No threading
Compatibility
NaCl: Just Chrome atm
Asm.js: Everything that runs JS (performance varies)

29. PEPPER.JS
Implements Pepper API in Javascript
Allows to compile applications for both NaCl and JS via
Emscripten
Can be used to target both NaCl and other browsers via
Asm.js
Obviously still no threads :(

30. WRAP-UP
Powerful technology
Runs existing C / C++ code almost unmodified in the
browser
Supports threading
Useful for both background processing and visible
interaction
Perfect package existing applicatons as Chrome apps
Currently only Chrome :(

31. THAT'S ALL
—
THANK YOU FOR YOUR
ATTENTION!