Ruby in the Browser - RubyConf 2011
-
Upload
ilya-grigorik -
Category
Technology
-
view
14.565 -
download
1
description
Transcript of 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