Download - 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?


How many languages are you proficient in?

take a few seconds…


…

…

… …


CSS JavaScript

DOM

ActionScript Java AppletsActiveX

…


(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


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


…

…

… …

Diversity is good!experimentation leads to innovation


50+ Ruby implementationscredit to Konstantin Haase - @rkh


Case in point…


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


Ruby in the browser?that would be nice…


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


http://tryruby.org/


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


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


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


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


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!


CSS JavaScript

DOM

Dynamic Language Runtime

IronPython IronRuby C# F#

Gestalt


Is there a future for Silverlight?How about IronRuby?

I hope so.. x2


Browser pluginsa brief detour…


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…


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


CSS JavaScript

DOM

NPAPI

Flash Silverlight …External binaries


NPAPI


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


Google ChromeWebKit, V8, NaCl, speed…

IE Firefox Chrome0

1020304050

Market Share (Sept 2011)

* soon to be #2


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


CSS JavaScript

DOM

NPAPI



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


• 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/




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


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


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!




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 on NaCl?we did say it runs C/C++ code right?


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" />




Quake via NaClSounds, Graphics, etc

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

You’ll need latest Chrome…




Future of NaCl?


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


Netflix, AppEngine, ExacycleNaCl in the wild

+

Exacycle (1B CPU hours for research)


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




Mmm… LLVM in the browserimagine the possibilities…


Dozens of languagesall within the browser

CC++

PyPy

Objective-C

Rubinius

MacRuby

Fortran!

…

…

…


EMScriptenAn LLVM-to-JavaScript Compiler


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 1.8 to LLVMhttps://github.com/replit/emscripted-ruby

https://github.com/replit/emscripted-ruby

https://github.com/replit/emscripted-ruby


LLVM in the browserit works!

Try it: http://repl.it/

http://repl.it/

http://repl.it/

http://repl.it/


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


CSS

JavaScript

DOM

Silverlight

DLR

CSS

JavaScript

DOM

(P)NaCl

C/C++, LLVM

CSS

JavaScript

DOM

EMScripten

LLVM bitcode

1 2 3

Complimentary


CSS

JavaScript

DOM

(P)NaCl

C/C++, LLVM

EMScripten

LLVM bitcodeEMScripten

PNacl

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


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

http://www.google.com/events/io/2011/sessions/beyond-javascript-programming-the-web-with-native-client.html

http://www.google.com/events/io/2011/sessions/beyond-javascript-programming-the-web-with-native-client.html