ruby in the browser - rubyconf 2011

Ruby in the Browser @igrigorik

Ruby in the Browser

Ilya Grigorik@igrigorik

why, how, and how do we get there?

Ruby in the Browser @igrigorik

How many languages are you proficient in?

take a few seconds…

Ruby in the Browser @igrigorik

…

…

… …

Ruby in the Browser @igrigorik

CSS JavaScript

DOM

ActionScript Java AppletsActiveX

…

Ruby in the Browser @igrigorik

(personal) JavaScript retrospectivein 6 acts…

1. Don’t know it, therefore don’t like it2. Miserable experience with the DOM, hated it

3. (long pause)

4. Prototype + JQuery: hey, this is not bad5. Writing pure JS FF extension – fun!6. Maintaining extension + debug: it’s ok…

(personal) conclusion: it’s a great language

Ruby in the Browser @igrigorik

JavaScript as a monopoly?they (ECMA) are colluding against us!

Ruby in the Browser @igrigorik

…

…

… …

Diversity is good!experimentation leads to innovation

Ruby in the Browser @igrigorik

50+ Ruby implementationscredit to Konstantin Haase - @rkh

Ruby in the Browser @igrigorik

Case in point…

Ruby in the Browser @igrigorik

Disclaimer: I work for Google. I have no affiliation to NaCl, Chrome, … teams. All opinions are my own, etc… :-)

Ruby in the Browser @igrigorik

Ruby in the browser?that would be nice…

Ruby in the Browser @igrigorik

Ruby/Python/X/Y/Z in the browserwould be even better!

Ruby in the Browser @igrigorik

http://tryruby.org/

Ruby in the Browser @igrigorik

Server-side sessionsnot really in your browser…

require 'em-synchrony'require 'em-synchrony/em-http'require 'em-http/middleware/json_response'

TRYRUBY = 'http://tryruby.org/levels/1/challenges/0/play’EM::HttpRequest.use EM::Middleware::JSONResponse

EM.synchrony do

r = EM::HttpRequest.new(TRYRUBY).put :body => {:cmd => '1+1'} puts r.response['output'] # => 2

r = EM::HttpRequest.new(TRYRUBY).put :body => {:cmd => 'RUBY_VERSION'} puts r.response['output'] # => 1.9.2

end

Ruby in the Browser @igrigorik

So, how much RAM can we claim?security is always an issue…

require 'em-synchrony'require 'em-synchrony/em-http'require 'em-http/middleware/json_response'

TRYRUBY = 'http://tryruby.org/levels/1/challenges/0/play’EM::HttpRequest.use EM::Middleware::JSONResponse

EM.synchrony do

r = EM::HttpRequest.new(TRYRUBY).put :body => { :cmd => ’”a” * (2**25)’ }

puts r.response['output'] # => ...

end

Ruby in the Browser @igrigorik

In the browser, for real..anyone crazy enough to try?

Ruby in the Browser @igrigorik

http://visitmix.com/work/gestalt/

Ruby in the Browser @igrigorik

IronRuby, IronPython, …Micorosoft’s Silverlight + DLR

<script type="text/ruby">

def onclick(s,e) window.alert "Hello, World!" end

document.say_hello.attach_event('onclick', System::EventHandler [ System::Windows::Browser::HtmlEventArgs ].new(method(:onclick)) )

</script>

How awesome is that?

sweet!

Ruby in the Browser @igrigorik

CSS JavaScript

DOM

Dynamic Language Runtime

IronPython IronRuby C# F#

Gestalt

Ruby in the Browser @igrigorik

Is there a future for Silverlight?How about IronRuby?

I hope so.. x2

Ruby in the Browser @igrigorik

Browser pluginsa brief detour…

Ruby in the Browser @igrigorik

Inception

Setting: Live demo to Jim Clark (CEO of Netscape)

Links to any file other than an image cause the user to be prompted to download the file.. However, when a user clicked on a link to a PDF file, the file instantly opened within the browser window, seamlessly blending HTML and PDF consumption!

Clark: wow, who provided the support on our side?

Adobe: we reverse-engineered it…

Ruby in the Browser @igrigorik

NPAPI is bornNetscape Plugin API

• Implemented in Netscape 2• Implemented / in-use by most browsers to this day

• Plugin registers a content-type, ex: music/mp3• Browser encounters the file, delegates to plugin• Ex: Flash, Silverlight, Quicktime, Acrobat, etc..

Ruby in the Browser @igrigorik

CSS JavaScript

DOM

NPAPI

Flash Silverlight …External binaries

Ruby in the Browser @igrigorik

NPAPI

Flash Silverlight …External binaries

Security nightmareor we why we love to hate plugins

• Standalone process• Full access to your OS• Full access to your filesystem• …• Full access to wreck havoc

Ruby in the Browser @igrigorik

Google ChromeWebKit, V8, NaCl, speed…

IE Firefox Chrome0

1020304050

Market Share (Sept 2011)

* soon to be #2

Ruby in the Browser @igrigorik

Security & Isolationare a big focus in Chrome

Process#1

Process#2

Process#3

Tabs are:

• Isolated processes• Own security sandbox per tab

Flash Movie

Security ???

Ruby in the Browser @igrigorik

CSS JavaScript

DOM

NPAPI

Flash Silverlight …External binaries

Ruby in the Browser @igrigorik

NaClNative Client

• Sandboxing technology for safe execution of native code • Native machine code runs on the client CPU• Not an interpreter

CSS JavaScript

DOM

Pepper (PPAPI)

NaCl

Pepper bridge

Plugin

NaCl

PluginSandboxed plugin

Ruby in the Browser @igrigorik

• Compile code using specialized toolchain• Modified GCC compiler, etc• Build for different CPU architectures

• NaCl runtime verifies untrusted code (static analysis)• NaCl executes verified code• No fork, process control, file system access, etc.

http://code.google.com/chrome/nativeclient/

Ruby in the Browser @igrigorik

function moduleDidLoad() { HelloTutorialModule = document.getElementById('hello_tutorial'); HelloTutorialModule.addEventListener('message', handleMessage, false);

// Send a message to the NaCl module HelloTutorialModule.postMessage('hello');}

Talking to NaClvia Pepper API

send message

receive message

Ruby in the Browser @igrigorik

virtual void HandleMessage(const pp::Var& var_message) { if (!var_message.is_string()) return;

std::string message = var_message.AsString();

pp::Var var_reply; var_reply = pp::Var(kReplyString);

PostMessage(var_reply);}

Talking to the Browservia Pepper API

dispatch response

Ruby in the Browser @igrigorik

<embed name="nacl_module" id="hello_tutorial" width=0 height=0 src="hello_tutorial.nmf" type="application/x-nacl" />

Connecting the Pipes: NaCl, Pepperexecuting native code in the browser

Ruby in the Browser @igrigorik

NaCl SDK / APIwhat can we do in NaCl?

• Audio• FileIO• Graphics2D• ImageData• InputEvent• MouseInputEvent

• PaintAggregator• Resource• URLLoader• URLResponseInfo• …

http://code.google.com/chrome/nativeclient/docs/reference/peppercpp/

Same privileges as JS runtime!

Ruby in the Browser @igrigorik

NaCl SDK / APIwhat can we do in NaCl?

• pthreads!

• Full C/C++ library• Pthreads!• Dozens of ported libraries• …

• boost• gsl• Gnuchess• Lame• libogg• Libtheora• … and many others

Ruby in the Browser @igrigorik

Ruby on NaCl?we did say it runs C/C++ code right?

Ruby in the Browser @igrigorik

Ruby + NaCldemo time!

https://s3.amazonaws.com/ivan.krasin/ruby.html

You’ll need ~ Chrome 9, with NaCl enabled

<embed id="client" type="application/x-nacl-srpc" width="0" height="0" src="ruby.nexe" />

Ruby in the Browser @igrigorik

Quake via NaClSounds, Graphics, etc

http://nacl-quake.appspot.com/

You’ll need latest Chrome…

Ruby in the Browser @igrigorik

Future of NaCl?

Ruby in the Browser @igrigorik

(P)NaCl in the wildyou may be using it already!

• NaCl is a built-in plugin in Chrome• PNaCl will replace NaCl in 2012

• Enable NaCl in about:plugins• NaCl enabled in Chrome Webstore!

Ruby in the Browser @igrigorik

Netflix, AppEngine, ExacycleNaCl in the wild

+

Exacycle (1B CPU hours for research)

Ruby in the Browser @igrigorik

Portable NaCl (PNaCl) LLVM under the hood

http://nativeclient.googlecode.com/svn/data/site/pnacl.pdf

• Toolchain for compiling Native Client applications to LLVM bitcode• No more nmf manifests or *.nexe’s• Compile to .pexe (portable executable)

• Support for: x86-32, x86-64, ARM

• $> pnacl-gcc hello.c -o hello.pexe

Ruby in the Browser @igrigorik

Mmm… LLVM in the browserimagine the possibilities…

Ruby in the Browser @igrigorik

Dozens of languagesall within the browser

CC++

PyPy

Objective-C

Rubinius

MacRuby

Fortran!

…

…

…

Ruby in the Browser @igrigorik

EMScriptenAn LLVM-to-JavaScript Compiler

Ruby in the Browser @igrigorik

EMScriptenLLVM-to-Javascript

Compiles LLVM bitcode to Javascript

Example: • Compile C/C++/Objective C / etc to LLVM bitcode• Run natively

• Compile LLVM bitcode to JS• Run in the browser

Python, Lua, C, C++, Objective C, …

Ruby in the Browser @igrigorik

Ruby 1.8 to LLVMhttps://github.com/replit/emscripted-ruby

Ruby in the Browser @igrigorik

LLVM in the browserit works!

Try it: http://repl.it/

Ruby in the Browser @igrigorik

This is not an exhaustive list…but where does that leave us?

Ruby in the Browser @igrigorik

CSS

JavaScript

DOM

Silverlight

DLR

CSS

JavaScript

DOM

(P)NaCl

C/C++, LLVM

CSS

JavaScript

DOM

EMScripten

LLVM bitcode

1 2 3

Complimentary

Ruby in the Browser @igrigorik

CSS

JavaScript

DOM

(P)NaCl

C/C++, LLVM

EMScripten

LLVM bitcodeEMScripten

PNacl

“LLVM sandwich”in theory, it could work..

Ruby in the Browser @igrigorik

Phew, time for questions?hope this convinced you to explore the area further…

In summary:

• innovation is good• we need more of it in the browser• I hope Javascript is not the end all

• play, experiment, push the (existing) boundaries...

Resources:• Google: NaCl / PNaCl• Google IO 2011: Beyond Javascript