Ruby in the Browser - RubyConf 2011

Ruby in the Browser
why, how, and how do we get there?
Ilya Grigorik
@igrigorik

How many languages are you proficient in?
take a few seconds…

…
…
…
…

JavaScript
CSS
DOM
ActionScript
Java Applets
ActiveX
…

Don’t know it, therefore don’t like it
Miserable experience with the DOM, hated it
(long pause)
Prototype + JQuery: hey, this is not bad
Writing pure JS FF extension – fun!
Maintaining extension + debug: it’s ok…
(personal) conclusion: it’s a great language
(personal) JavaScript retrospective
in 6 acts…

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

…
…
…
Diversity is good!
experimentation leads to innovation
…

50+ Ruby implementations
credit 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 browser
would be even better!

http://tryruby.org/

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
Server-side sessions
not 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 => ’”a” * (2**25)’
}
puts r.response['output'] # => ...
end
So, how much RAM can we claim?
security is always an issue…

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

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

JavaScript
CSS
DOM
Gestalt
IronPython
IronRuby
C#
F#
Dynamic Language Runtime

Is there a future for Silverlight?
How about IronRuby?
I hope so.. x2

Browser plugins
a brief detour…

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…
Inception

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..
NPAPI is born
Netscape Plugin API

JavaScript
CSS
DOM
NPAPI
Flash
Silverlight
…
External binaries

NPAPI
Standalone process
Full access to your OS
Full access to your filesystem
…
Full access to wreck havoc
Security nightmare
or we why we love to hate plugins
Flash
Silverlight
…
External binaries

Google Chrome
WebKit, V8, NaCl, speed…
* soon to be #2

Process
#1
Process
#2
Process
#3
Tabs are:
Isolated processes
Own security sandbox per tab
Flash Movie
Security ???
Security & Isolation
are a big focus in Chrome

JavaScript
CSS
DOM
NPAPI
Flash
Silverlight
…
External binaries

JavaScript
CSS
DOM
Pepper (PPAPI)
Pepper bridge
Sandboxed plugin
NaCl
NaCl
Plugin
Plugin
NaCl
Native Client
Sandboxing technology for safe execution of native code
Native machine code runs on the client CPU
Not an interpreter

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/

receive message
functionmoduleDidLoad() {
HelloTutorialModule=document.getElementById('hello_tutorial');
HelloTutorialModule.addEventListener('message', handleMessage, false);
// Send a message to the NaCl module
HelloTutorialModule.postMessage('hello');
}
send message
Talking to NaCl
via Pepper API

virtualvoidHandleMessage(constpp::Var& var_message) {
if (!var_message.is_string())
return;
std::string message = var_message.AsString();
pp::Varvar_reply;
var_reply = pp::Var(kReplyString);
PostMessage(var_reply);
}
dispatch response
Talking to the Browser
via Pepper API

<embedname="nacl_module"
id="hello_tutorial"
width=0 height=0
src="hello_tutorial.nmf"
type="application/x-nacl" />
Connecting the Pipes: NaCl, Pepper
executing native code in the browser

http://code.google.com/chrome/nativeclient/docs/reference/peppercpp/
Audio
FileIO
Graphics2D
ImageData
InputEvent
MouseInputEvent
PaintAggregator
Resource
URLLoader
URLResponseInfo
…
Same privileges as JS runtime!
NaCl SDK / API
what can we do in NaCl?

Full C/C++ library
Pthreads!
Dozens of ported libraries
…
pthreads!
boost
gsl
Gnuchess
Lame
libogg
Libtheora
… and many others
NaCl SDK / API
what can we do in NaCl?

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

https://s3.amazonaws.com/ivan.krasin/ruby.html
You’ll need ~ Chrome 9, with NaCl enabled
<embedid="client"type="application/x-nacl-srpc"
width="0"height="0"src="ruby.nexe" />
Ruby + NaCl
demo time!

http://nacl-quake.appspot.com/
You’ll need latest Chrome…
Quake via NaCl
Sounds, Graphics, etc

Future of NaCl?

NaCl is a built-in plugin in Chrome
PNaCl will replace NaCl in 2012
Enable NaCl in about:plugins
NaCl enabled in Chrome Webstore!
(P)NaCl in the wild
you may be using it already!

+
Exacycle
(1B CPU hours for research)
Netflix, AppEngine, Exacycle
NaCl in the wild

http://nativeclient.googlecode.com/svn/data/site/pnacl.pdf
Toolchainfor 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-gcchello.c -o hello.pexe
Portable NaCl (PNaCl)
LLVM under the hood

Mmm… LLVM in the browser
imagine the possibilities…

MacRuby
C
…
C++
Rubinius
…
PyPy
…
Objective-C
Fortran!
Dozens of languages
all within the browser

EMScripten
An LLVM-to-JavaScript Compiler

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, …
EMScripten
LLVM-to-Javascript

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

Try it: http://repl.it/
LLVM in the browser
it works!

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

1
2
3
LLVM bitcode
EMScripten
JavaScript
JavaScript
JavaScript
CSS
CSS
CSS
DOM
DOM
DOM
Silverlight
(P)NaCl
DLR
C/C++, LLVM
Complimentary

LLVM bitcode
EMScripten
EMScripten
JavaScript
CSS
DOM
(P)NaCl
PNacl
“LLVM sandwich”
in theory, it could work..
C/C++, LLVM

In summary:
innovation is good
we need more of it in the browser
I hopeJavascript is not the end all
play, experiment, push the (existing) boundaries...
Resources:
Google: NaCl / PNaCl
Google IO 2011: Beyond Javascript
Phew, time for questions?
hope this convinced you to explore the area further…

http://code.kzakza.com	299
http://paper.li	90
http://paper.li	90
http://a0.twimg.com	29
http://daadigitalportfolio.weebly.com	24
http://nuevospowerpoints.blogspot.com	15
http://nuevospowerpoints.blogspot.com	15
http://coderwall.com	11
https://twitter.com	5
http://www.weebly.com	2
http://www.google.es	2
http://www.hanrss.com	1
http://us-w1.rockmelt.com	1
http://us-w1.rockmelt.com	1
http://webcache.googleusercontent.com	1
http://www.hanrss.com	1

Ruby in the Browser - RubyConf 2011

by Ilya Grigorik

Accessibility

Categories

Upload Details

Usage Rights

16 Embeds 587

Statistics

Ruby in the Browser - RubyConf 2011 Presentation Transcript