Slides:

gonacl.com/magic

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

0 - 256MB
Code
256MB - 1GB / 4GB
Data

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!