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

50 %
50 %
Information about Salt and pepper — native code in the browser Browser using Google native...
Software

Published on July 18, 2014

Author: mayflowergmbh

Source: slideshare.net

Description

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

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 and verification before execution No access to OS or memory outside the sandbox OS functionality only via browser API

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

THE BIG PICTURE

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

API

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

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!

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!

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

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

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

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(); } };

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

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); } }

[DEMO]

USEFUL FOR WHAT?

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

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 dedicated JIT codepath: Odinmonkey

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%), 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)

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 :(

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 :(

THAT'S ALL — THANK YOU FOR YOUR ATTENTION!

Add a comment

Related presentations

Speaker: Matt Stine Developing for the Cloud Track Marc Andressen has famou...

This presentation explains how to develop a Web API in Java using (JAX-RS or Restl...

1 App,

1 App,

November 10, 2014

How to bring innovation to your organization by streamlining the deployment proces...

Cisco Call-control solutions can handle voice, video and data

Nathan Sharp of Siemens Energy recently spoke at the SAP Project Management in Atl...

Related pages

Google Native Client - Wikipedia, the free encyclopedia

Google Native Client; Developer(s) Google, others: ... Sandbox in web browsers for native code: License: ... Standardize rendering using the browser's ...
Read more

winapi - using google chrome Pepper API to access Win32 ...

Is Pepper API/Native Client the ... Native Client is a sandbox for running compiled C and C++ code in the browser ... Access Local Files using a Google ...
Read more

Welcome to Native Client - Google Chrome

Native Client is a sandbox for running compiled C and C++ code in the browser efficiently and securely, independent of the user’s operating system.
Read more

Google Adds Salt and Pepper to Tiny Smartphone Chips - WIRED

... from Google, and it's called Native Client, ... Wired Home Page. Google Adds Salt and Pepper to ... code running in the browser cannot ...
Read more

What is Google Chrome’s Native Client? | ExtremeTech

What is Google Chrome’s Native Client? By Sebastian Anthony on September 20, 2011 at 7:30 am; Comment; In the most recent stable build of Google Chrome ...
Read more

Technical Overview - Google Chrome

Toolchains. A Native Client toolchain consists of a compiler, a linker, an assembler and other tools that are used to convert C/C++ source code into a ...
Read more

Google Chrome Beta Now Supports C/C++ - ReadWrite

Google has been working on Native Client (aka NaCl), an SDK that brings C/C++ functionality to browsers since at least last year, and now the latest Google ...
Read more