Developers

Portable Native Client (PNaCl)

How I Learned to Stop Compiling and Love the Translator

David Sehr

Tech lead, Native Client

Molly Mackinlay

Product Manager, Native Client

It’s a new web

We aren’t in the 90’s anymore...

The web in 1995

The web today

Google+Photos

We now expect native features in the web

Native

Web

Developers are expected to develop cross-platform

Native Code in the Web – a History

1995

ActiveX

NPAPI

Native Code in the Web – a History

Java

Flash

Silverlight

1995

Native Code in the Web – a History

1995

2008

• Security

• Plugin

• Integration

Native Code in the Web – a History

Security issues by plugin type*

• Security

*symantec

• Plugin

• Integration

Native Code in the Web – a History

1995

ActiveX

Java

Flash

2008

Emscripten

2013

NPAPI

Silverlight

Native Code in the Web – a History

• Developer complexity
• Not all native capabilities
• Performance

1995

ActiveX

Java

Flash

2008

Emscripten

2013

NPAPI

Silverlight

Why Bring Native Code to the Web?

Better performance

Increased developer options

Wins of Native Code in the Web

• Native capabilities
• Performance
• Familiar developer model

1995

ActiveX

Java

Flash

2008

Emscripten

2013

NPAPI

Silverlight

Native Client

Portable Native Client

gonacl.com

Developer Options

Our Solution: PNaCl

PNaCl is...

Access to Native: PPAPI

TCP/UDP

gonacl.com

Security

my_untrusted_code.nexe

Browser data

Browser APIs

OS APIs

X

gonacl.com

Platform Independence

...

...

gonacl.com

Deploying to other browsers with pepper.js

app.cpp

Pepper API

Browser

Deploying to other browsers with pepper.js

app.cpp

Pepper API

Browser

PNaCl

app.pexe

Chrome

Pepper API

Deploying to other browsers with pepper.js

Emscripten

app.cpp

app.js

Pepper API

pepper.js

Browser

PNaCl

Other Browser

app.pexe

Chrome

Pepper API

Performance

*via SPEC2k

lower is better

gonacl.com

Under the Hood of a PNaCl App

Building a PNaCl Application

C++ Source Code

pnacl-clang

.pexe

.nmf file (manifest)

<embed name="nacl_module"

id="airmech"

src="airmech.nmf"

type="application/x-pnacl" />

HTML

gonacl.com

Running a PNaCl Application

<embed name="nacl_module"

id="airmech"

src="airmech.nmf"

type="application/x-pnacl" />

HTML

embed

starts

translation

PNaCl Translator

airmech.pexe

airmech.com

​

​

​

​

air_mech_x86_64.nexe

Running a PNaCl Application

​

​

​

​

​

​

​

​

​

​

​

​

​

Native Client Sandbox

validator

​

​

​

​

air_mech_x86_64.nexe

?

Browser data

Browser APIs

OS APIs

gonacl.com

Running a PNaCl Application

​

​

​

​

​

​

​

​

​

​

​

​

​

Native Client Sandbox

validator

​

​

​

​

air_mech_x86_64.nexe

Browser data

Browser APIs

OS APIs

gonacl.com

Running a PNaCl Application

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Chrome Sandbox

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Chrome Sandbox

​

​

​

​

​

​

​

​

​

​

​

​

​

Native Client Sandbox

NaCl Runtime

​

​

​

​

air_mech_x86_64.nexe

gonacl.com

Running a PNaCl Application

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Chrome Sandbox

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Chrome Sandbox

​

​

​

​

​

​

​

​

​

​

​

​

​

Native Client Sandbox

​

​

​

​

air_mech_x86_64.nexe

NaCl Runtime

PPAPI

Browser data

Browser APIs

gonacl.com

Where are we and what’s next?

Google+Photos

“it’s virtually impossible to build great photo apps that can rival the likes of Photoshop in HTML5. That’s where Native Client comes it.”

-TechCrunch

Pexe Size

C++ exceptions and SIMD

Translation

Time

Developer Responsivity

Thank You!

http://gonacl.com

sehr@google.com, mackinlay@google.com

native-client-discuss@googlegroups.com

Thank You!

http://gonacl.com

sehr@google.com, mackinlay@google.com

native-client-discuss@googlegroups.com

Thank You!

http://gonacl.com

sehr@google.com, mackinlay@google.com

native-client-discuss@googlegroups.com

How Do I Use It?

Developers

Backup

Subtitle Placeholder

Running a PNaCl Application

​

​

​

​

​

​

​

​

​

​

​

​

​

Native Client Sandbox

NaCl Runtime

​

​

​

​

air_mech_x86_64.nexe

gonacl.com

Running a PNaCl Application

​

​

​

​

​

​

​

​

​

​

​

​

​

Native Client Sandbox

​

​

​

​

air_mech_x86_64.nexe

Browser data

Browser APIs

OS APIs

Try PNaCl in Chrome 31

Try the PNaCl Examples extension

​

We want your feedback at http://gonacl.com

Try our demos

PNaCl SDK

• Compiler, debugger, libraries
• NaClPorts
• Examples, demos

PPAPI

Writing a Secure Plugin

Porting an Application to NaCl

• Build as an out-of-process plugin
• Convert browser interaction to PPAPI
• 2D, audio, mouse/keyboard, files
• Convert 3D graphics to OpenGL ES2.0
• Convert Windows threads to pthreads
• Convert to newlib and static linking

​

Porting an Application to PNaCl

• Build as an out-of-process plugin
• Convert browser interaction to PPAPI
• 2D, audio, mouse/keyboard, files
• Convert 3D graphics to OpenGL ES2.0
• Convert Windows threads to pthreads
• Convert to newlib and static linking
• Remove assembly code

​

Native Client and the Chrome Web Store

Native Client Limitations

"No ISAs in the web platform"

Portable Native Client

Developer

User

Distribution

Portable Native Client Distribution

Developer

User

Distribution

The Compatibility Story with Pepper.js

Pepper.js is a JavaScript library that enables the compilation of native Pepper applications into JavaScript using Emscripten.

The Compatibility Story with Pepper.js

• Take C code using the Pepper interface (what you would normally compile into you PNaCl executable)
• Make sure no threading, non-blocking
• Run through Emscripten to output JavaScript
• Bundle with Pepper.js
• Deploy as cross-browser solution

Our Failures, and How We Address Them

“40% of people abandon a website that takes more than 3 seconds to load”

Sean Work

KISSmetrics

PNaCl Progress Events

Translation Time and Application Architecture

Translation Options for PNaCl Applications

{� "files": {},

"program": {� "portable": {� "pnacl-translate": {� "url": "ssh.pexe",

"-O": level� }� }� }�}

​

Translate Speed and Execution Speed

.nmf

HTML

Translation Rate

Translation Rate

A Taste of Things to Come

PNaCl in Chrome

PNaCl Roadmap

Developer Features

PNaCl Roadmap

Developer Features

PNaCl Roadmap

Developer Features

PNaCl Roadmap

User Features

PNaCl Roadmap

User Features

PNaCl Roadmap

User Features

Portable Native Client

• C++ code
• Run securely in the open web
• 80+% of native performance
• Try it right now in Chrome 31

Building a Portable Native Client Application

• Native executable
• Portable across operating systems
• Specific to x86, ARM, etc.

C++ Source Code

gcc/g++

.nexe

Building a Portable Native Client Application

C++ Source Code

gcc/g++

.nexe

.nexe

.nexe

Instruction Set Architecture (ISA) Dependency

{

"files": {},

"program": {

"x86-64": { "url": "air_mech_x86_64.nexe" },

"x86-32": { "url": "air_mech_x86_32.nexe" },

"arm": { "url": "air_mech_arm.nexe" }

}

}

NaCl Manifest File

.nmf

Running a Native Client Application

<embed name="nacl_module"

id="air_mech"

src="air_mech.nmf"

type="application/x-nacl" />

​

HTML

So We're Done, Right?

• C++ executables
• Run in the browser
• Distributed in the web store
• Native ISA code is not right for the open web
• We need a way to upload device-independent code, then translate to the client's ISA...

Related Technology

• Asm.js
• Similarities
• C/C++
• LLVM
• Performance, ~50% of native
• Differences
• Interchange format is JavaScript with type annotations
• In-renderer, faster DOM accesses
• No threading or SIMD without further JavaScript support
• Significant effort required to attain 80+% of native

The PNaCl Translator

"ssh.pexe"

Save ssh_x86_64.nexe