ruby in the browser - rubyconf 2011
DESCRIPTION
JavaScript is great, but let's face it, being stuck with just JavaScript in the browser is no fun. Why not write and run Ruby in the browser, on the client, and on the server as part of your next web application?TRANSCRIPT
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