Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SALT AND
PEPPER
RUNNING NATIVE CODE IN THE
BROWSER WITH NACL
Christian Speckner, Mayflower GmbH
NATIVE CODE IN THE
BROWSER?
[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 there
Efficient memory management
Speed
WHAT IS NACL?
SANDBOXED EXECUTION
ENVIRONMENT FOR NATIVE
CODE
Code is generated by dedicated toolchain (gcc based)
Static code analysis ...
PORTABLE NATIVE CLIENT
(PNACL)
Compiles to LLVM bytecode
LLVM / clang toolchain
Translated to machine code by the browser ...
THE BIG PICTURE
COMPATIBILITY
SO FAR ONLY CHROME :(
Supported platforms: x86, ARM, MIPS
Chrome on Windows, Linux, OSX, ChromeOS
No mobile ...
API
PEPPER
Similar to the pepper plugin API (PPAPI)
C and OOP C++ wrapper
Asynchroneous, callback based
Access to HTML5 filesy...
POSIX IS AVAILABLE AS WELL
Virtual filesystem
Resides in memory
HTML5 filesystem and server can be mounted
Enables standar...
NACL-PORTS
Collection of opensource libraries and applications ported
to run on NaCl
Boost
Bullet
ffmpeg
ImageMagick
OpenC...
HOW DOES A NACL APP
LOOK LIKE?
(WARNING: C++ AHEAD)
C++: BIRD'S EYE VIEW
classInstance:publicpp::Instance{
//...
};
classModule:publicpp::Module{
//...
};
namespacepp{
Module...
C++: MODULE CLASS
classModule:publicpp::Module{
public:
virtualpp::Instance*CreateInstance(PP_Instanceinstance){
returnnew...
C++: INSTANCE CLASS
classInstance:publicpp::Instance{
public:
Instance(PP_Instanceinstance):pp::Instance(instance){}
virtu...
MANIFEST
Describes the structure of the NACL module for the
browser
{
"program":{
"portable":{
"pnacl-translate":{
"url":"...
HTML
<script>
</script>
<embedwidth=0height=0src="demo.nmf"type="application/x-pnacl"
onload="onModuleLoad()"onmessage="on...
[DEMO]
USEFUL FOR WHAT?
NUMBER CRUNCHING
Audio / Video processing
Custom video / audio decoding & playback
Image filtering editing (Google+ photo ...
PACKAGING EXITING
APPLICATIONS
Browser games
Chrome store packaged apps
ChromeOS / Chromebooks!
COMPARISION TO
ASM.JS / EMSCRIPTEN
ASM.JS
Bytecode-like subset of JS
JIT can optimize very well
Static type information
No garbage collection
Firefox has a d...
Compiles C / C++ to Asm.js via LLVM / clang
EMSCRIPTEN
Compilation to native code
NaCl: Ahead-of-time
Asm.js: Just-in-time
Performance
NaCl: Almost native (Google: 80%-90%), pre...
PEPPER.JS
Implements Pepper API in Javascript
Allows to compile applications for both NaCl and JS via
Emscripten
Can be us...
WRAP-UP
Powerful technology
Runs existing C / C++ code almost unmodified in the
browser
Supports threading
Useful for both...
THAT'S ALL
—
THANK YOU FOR YOUR
ATTENTION!
Upcoming SlideShare
Loading in …5
×

Salt and pepper — native code in the browser Browser using Google native Client

2,143 views

Published on

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

Published in: Software
  • Be the first to comment

Salt and pepper — native code in the browser Browser using Google native Client

  1. 1. SALT AND PEPPER RUNNING NATIVE CODE IN THE BROWSER WITH NACL Christian Speckner, Mayflower GmbH
  2. 2. NATIVE CODE IN THE BROWSER?
  3. 3. [BOCHS DEMO]
  4. 4. SERIOUSLY THOUGH: The Web is transforming into a Platform for Application Development!
  5. 5. SO, WHY NATIVE CODE? Existing codebases: lots of tried-and-tested C / C++ code out there Efficient memory management Speed
  6. 6. WHAT IS NACL?
  7. 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. 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. 9. THE BIG PICTURE
  10. 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. 11. API
  12. 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. 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. 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. 15. HOW DOES A NACL APP LOOK LIKE? (WARNING: C++ AHEAD)
  16. 16. C++: BIRD'S EYE VIEW classInstance:publicpp::Instance{ //... }; classModule:publicpp::Module{ //... }; namespacepp{ Module*CreateModule(){ returnnew::Module(); } }
  17. 17. C++: MODULE CLASS classModule:publicpp::Module{ public: virtualpp::Instance*CreateInstance(PP_Instanceinstance){ returnnewInstance(instance); } };
  18. 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. 19. MANIFEST Describes the structure of the NACL module for the browser { "program":{ "portable":{ "pnacl-translate":{ "url":"demo.pexe" } } } }
  20. 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. 21. [DEMO]
  22. 22. USEFUL FOR WHAT?
  23. 23. NUMBER CRUNCHING Audio / Video processing Custom video / audio decoding & playback Image filtering editing (Google+ photo editor!)
  24. 24. PACKAGING EXITING APPLICATIONS Browser games Chrome store packaged apps ChromeOS / Chromebooks!
  25. 25. COMPARISION TO ASM.JS / EMSCRIPTEN
  26. 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. 27. Compiles C / C++ to Asm.js via LLVM / clang EMSCRIPTEN
  28. 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. 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. 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. 31. THAT'S ALL — THANK YOU FOR YOUR ATTENTION!

×