Slides:

Expect more from the Web Platform

• Vibrant platforms let developers innovate!

Virtues of the Web

• Open
• Portable
• Secure
• Ephemeral

What's missing?

Powerful → Native Code → Magic!

Native Code on the Web

• Native Code is awesome
• Other options don't work
• Security
• Emerging Standards
• What can I start using now?

Magic Words (Jargon)

• Native Client → NaCl
• Portable Native Client → PNaCl
• Emscripten → [Put into] script [become]
• Asm.js → "Assembly Language" as JavaScript

Native Code

• Runs really fast
  • Close to the metal
  • Low power
• Has access to "native" APIs
• All the languages: C++, Java, Python...
• Threads + Shared Memory
• Dynamic code generation

Native Client

• Run machine code, safely
• Portable variant
• Fast
• 80-95% of Raw Native
• SIMD support
• Threads and shared memory
• Shared Libraries
• JIT Support
• Mature and powerful, but Chrome only

Emscripten / Asm.js

• C/C++ compiled to JavaScript
• Use ArrayBuffer as a C/C++ heap
• Synchronous access to JS + the DOM
• Faster in some browsers than others
• High percentage of Raw Native
• More portable, but generally less powerful

APIs

• 2D Graphics
• 3D Graphics
• Sound
• Media Streams
• Local Storage


• Network Access
• Clipboard

What can Native Code do?

GNU Image Manipulation Program (GIMP)

Android → ChromeOS

But I'm a JavaScript Forth developer...

• C/C++ libraries
• Codecs
• Widgets

Aren't JavaScript + the DOM enough?

• JavaScript performance is plateauing
• The DOM is inherently slow


• Both require browsers to infer and guess

JavaScript "Type Declarations"

• float64 → +(xxx)
• float32 → Math.fround(xxx)
• int32 → (xxx)|0
• uint32 → (xxx)>>>0


• TypedArray → pointers

function MyAsmModule(stdlib, foreign, heap) {
  "use asm";
  var HEAPU8 = new Uint8Array(heap);
  function strlen(ptr) {
    ptr = ptr|0;
    var curr = 0;
    curr = ptr;
    while (HEAP8[curr]|0 != 0) {
      curr = (curr + 1)|0;
    }
    return (curr - ptr)|0;
  }
  ...
          

Is it safe?

The Good Stuff

• High Performance
  • Games / Physics Engines
  • Video / Image Processing
  • Compression
  • Encryption
• Compatibility
• Port non-JS apps, as is
• Language freedom
• Maybe more APIs

The Bad Stuff

• Malware
  • Steals your data
  • Stays around when you leave the page
  • Pretends to be something else
  • Eavesdrops on you
• Portability
• Architecture dependent
• OS dependent
• Browser dependent
• Configuration dependent

Good witch or bad witch?

Technology Graveyard

• ActiveX
• NPAPI
• Java
• Flash

Security for Native Code

• API surface equivalent to JavaScript
• Hardened Web APIs
• Secure Native Code container

What makes NaCl safe?

• Two Sandboxes!
  • Outer Process Sandbox
  • Inner Static Verification Sandbox

Process Sandbox (NaCl)

			⤢	Renderer Process	↔	NaCl Process
OS	↔		↔	Renderer Process
			⤡	Renderer Process

Software Fault Isolation

(NaCl Inner Sandbox)

• Verify before run
• Disassemble everything
• Limit instructions
• Restrict what code can execute
  (Control Flow Integrity)
• Restrict what data can be accessed
  (Data Integrity)
• Restrict I/O interface

Software Fault Isolation

(NaCl Inner Sandbox)

SIMD.js

• SIMD → Single Instruction, Multiple Data
• Expose SSE/AVX/Neon to the Web
• 128-bit SIMD Types: Float32x4
  [U]Int32x4 [U]Int16x8 [U]Int8x16
  Bool32x4 Bool16x8 Bool8x16
• Load and Store to ArrayBuffers
• Close correspondence to SIMD instructions
• TC39 Stage 3
• SIMD.js + Asm.js

function vec4average(a) {
  var a_length = a.length;
  var sum = SIMD.Float32x4.splat(0.0);
  for (var i = 0; i < a_length; i += 4) {
    sum = SIMD.Float32x4.add(
        sum, SIMD.Float32x4.load(a, i));
  }
  return SIMD.div(sum, SIMD.Float32x4.splat(n));
}
        

SharedArrayBuffers

• Shared Memory for JavaScript
• ArrayBuffer transfer + postMessage
• Atomics + Futexes
• TC39 Stage 1

Threads in JavaScript

• postMessage is SLOW!
• Fast synchronization
• Use all the cores!
• Blocking on background threads!
• Different concurrency models
• C/C++ code expects threads

Challenges with Threads on the Web

• Concurrency is hard
• Side channel attacks?
• What about the main thread?
• Shared Memory + Web APIS
• Will it change how Web apps work?

Web Assembly

• Cross-browser binary Native Code
• Minimum Viable Product
• Polyfill
• LLVM backend upstream
• Post MVP
  • Threads + Shared Memory
  • SIMD
  • Hardware Fault Interception
  • Memory mapping
  • Dynamic Linking / Shared Libraries
  • JIT Support

(func $aligned (result i32)
  (local i32 i32 i32)
  (set_local 0 (i32.const 10))
  (label
    (loop
      (if
        (i32.eq (get_local 0) (i32.const 0))
        (break 0)
      )
      (set_local 2
        (i32.mul (get_local 0) (i32.const 4)))
      (i32.store (get_local 2) (get_local 0))
...
        

Planning Ahead

• Use NaCl / Emscripten today
• Use SIMD.js + SABs when ready
• Transition to WebAssembly

The future is coming FAST

How can I start TODAY!?

• Focus on features you can optionally push to the server
• Or replace with an alternative experience
• Or focus on a particular platform

Where does it run?

• Asm.js → Modern browsers, various speeds
• PNaCl → Chrome on any website
• NaCl → Chrome Web Store

Get an SDK

NaCl SDK:
gonacl.com

Emscripten:
emscripten.org

Leverage Ports

• naclports + Emscripten ports
• cross compile + autoconf
• Use an interpreter ports for Python, Lua, Ruby...

var mgr = new NaClProcessManager();
mgr.spawn(
    'python.nmf', ['python', 'foo.py', [
      'PYTHONHOME=/lib/python2.7',
      'PYTHONPATH=/lib/python2.7',
    ], '/', 'pnacl', null,
    function(pid) {
  callback();
});
          

Demand the Magic!