0
Ruby in the Browser<br />why, how, and how do we get there?<br />Ilya Grigorik<br />@igrigorik<br />
How many languages are you proficient in?<br />take a few seconds…<br />
…<br />…<br />…<br />…<br />
JavaScript<br />CSS<br />DOM<br />ActionScript<br />Java Applets<br />ActiveX<br />…<br />
Don’t know it, therefore don’t like it<br />Miserable experience with the DOM, hated it<br />(long pause)<br />Prototype +...
JavaScript as a monopoly?<br />they (ECMA) are colluding against us!<br />
…<br />…<br />…<br />Diversity is good!<br />experimentation leads to innovation<br />…<br />
50+ Ruby implementations<br />credit to Konstantin Haase - @rkh<br />
Case in point…<br />
Disclaimer: I work for Google. I have no affiliation to NaCl, Chrome, … teams. All opinions are my own, etc… :-) <br />
Ruby in the browser?<br />that would be nice…<br />
Ruby/Python/X/Y/Z in the browser<br />would be even better!<br />
http://tryruby.org/<br />
require 'em-synchrony'<br />require 'em-synchrony/em-http'<br />require 'em-http/middleware/json_response'<br />TRYRUBY = ...
require 'em-synchrony'<br />require 'em-synchrony/em-http'<br />require 'em-http/middleware/json_response'<br />TRYRUBY = ...
In the browser, for real..<br />anyone crazy enough to try?<br />
http://visitmix.com/work/gestalt/<br />
<script type="text/ruby"><br />defonclick(s,e)<br />window.alert"Hello, World!"<br />  end<br />document.say_hello.attach_...
JavaScript<br />CSS<br />DOM<br />Gestalt<br />IronPython<br />IronRuby<br />C#<br />F#<br />Dynamic Language Runtime<br />
Is there a future for Silverlight?<br />How about IronRuby?<br />I hope so.. x2<br />
Browser plugins<br />a brief detour…<br />
Setting: Live demo to Jim Clark (CEO of Netscape)<br />Links to any file other than an image cause the user to be prompted...
<ul><li>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..</li></ul>NPAPI is born<br />Netscape Plugin API<br />
JavaScript<br />CSS<br />DOM<br />NPAPI<br />Flash<br />Silverlight<br />…<br />External binaries<br />
NPAPI<br /><ul><li>Standalone process
Full access to your OS
Full access to your filesystem
…
Full access to wreck havoc</li></ul>Security nightmare<br />or we why we love to hate plugins<br />Flash<br />Silverlight<...
Google Chrome<br />WebKit, V8, NaCl, speed…<br />* soon to be #2<br />
Process<br />#1<br />Process<br />#2<br />Process<br />#3<br />Tabs are:<br /><ul><li>Isolated processes
Own security sandbox per tab</li></ul>Flash Movie<br />Security ???<br />Security & Isolation<br />are a big focus in Chro...
JavaScript<br />CSS<br />DOM<br />NPAPI<br />Flash<br />Silverlight<br />…<br />External binaries<br />
JavaScript<br />CSS<br />DOM<br />Pepper (PPAPI)<br />Pepper bridge<br />Sandboxed plugin<br />NaCl<br />NaCl<br />Plugin<...
Native machine code runs on the client CPU
Not an interpreter</li></li></ul><li><ul><li>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.</li></ul>http://code.google.com/chrome/nativeclient/<br />
receive message<br />functionmoduleDidLoad() {<br />HelloTutorialModule=document.getElementById('hello_tutorial');<br />He...
virtualvoidHandleMessage(constpp::Var& var_message) {<br />if (!var_message.is_string())<br />return;<br />std::string mes...
<embedname="nacl_module"<br />id="hello_tutorial"<br />width=0 height=0<br />src="hello_tutorial.nmf"<br />type="applicati...
http://code.google.com/chrome/nativeclient/docs/reference/peppercpp/<br /><ul><li>Audio
FileIO
Graphics2D
ImageData
Upcoming SlideShare
Loading in...5
×

Ruby in the Browser - RubyConf 2011

14,695

Published on

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?

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,695
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
57
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Ruby in the Browser - RubyConf 2011"

  1. 1. Ruby in the Browser<br />why, how, and how do we get there?<br />Ilya Grigorik<br />@igrigorik<br />
  2. 2. How many languages are you proficient in?<br />take a few seconds…<br />
  3. 3. …<br />…<br />…<br />…<br />
  4. 4. JavaScript<br />CSS<br />DOM<br />ActionScript<br />Java Applets<br />ActiveX<br />…<br />
  5. 5. Don’t know it, therefore don’t like it<br />Miserable experience with the DOM, hated it<br />(long pause)<br />Prototype + JQuery: hey, this is not bad<br />Writing pure JS FF extension – fun!<br />Maintaining extension + debug: it’s ok…<br />(personal) conclusion: it’s a great language <br />(personal) JavaScript retrospective<br />in 6 acts…<br />
  6. 6. JavaScript as a monopoly?<br />they (ECMA) are colluding against us!<br />
  7. 7. …<br />…<br />…<br />Diversity is good!<br />experimentation leads to innovation<br />…<br />
  8. 8. 50+ Ruby implementations<br />credit to Konstantin Haase - @rkh<br />
  9. 9. Case in point…<br />
  10. 10. Disclaimer: I work for Google. I have no affiliation to NaCl, Chrome, … teams. All opinions are my own, etc… :-) <br />
  11. 11. Ruby in the browser?<br />that would be nice…<br />
  12. 12. Ruby/Python/X/Y/Z in the browser<br />would be even better!<br />
  13. 13. http://tryruby.org/<br />
  14. 14. require 'em-synchrony'<br />require 'em-synchrony/em-http'<br />require 'em-http/middleware/json_response'<br />TRYRUBY = 'http://tryruby.org/levels/1/challenges/0/play’<br />EM::HttpRequest.use EM::Middleware::JSONResponse<br />EM.synchrony do<br /> r =EM::HttpRequest.new(TRYRUBY).put :body => {:cmd => '1+1'}<br /> puts r.response['output'] # => 2<br /> r =EM::HttpRequest.new(TRYRUBY).put :body => {:cmd => 'RUBY_VERSION'}<br /> puts r.response['output'] # => 1.9.2<br />end<br />Server-side sessions<br />not really in your browser…<br />
  15. 15. require 'em-synchrony'<br />require 'em-synchrony/em-http'<br />require 'em-http/middleware/json_response'<br />TRYRUBY = 'http://tryruby.org/levels/1/challenges/0/play’<br />EM::HttpRequest.use EM::Middleware::JSONResponse<br />EM.synchrony do<br /> r =EM::HttpRequest.new(TRYRUBY).put :body => {<br />:cmd => ’”a” * (2**25)’<br />}<br /> puts r.response['output'] # => ...<br />end<br />So, how much RAM can we claim?<br />security is always an issue…<br />
  16. 16. In the browser, for real..<br />anyone crazy enough to try?<br />
  17. 17. http://visitmix.com/work/gestalt/<br />
  18. 18. <script type="text/ruby"><br />defonclick(s,e)<br />window.alert"Hello, World!"<br /> end<br />document.say_hello.attach_event('onclick',<br /> System::EventHandler [<br /> System::Windows::Browser::HtmlEventArgs<br /> ].new(method(:onclick))<br />)<br /></script><br />How awesome is that?<br />IronRuby, IronPython, …<br />Micorosoft’s Silverlight + DLR<br />sweet!<br />
  19. 19. JavaScript<br />CSS<br />DOM<br />Gestalt<br />IronPython<br />IronRuby<br />C#<br />F#<br />Dynamic Language Runtime<br />
  20. 20. Is there a future for Silverlight?<br />How about IronRuby?<br />I hope so.. x2<br />
  21. 21. Browser plugins<br />a brief detour…<br />
  22. 22. Setting: Live demo to Jim Clark (CEO of Netscape)<br />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!<br />Clark: wow, who provided the support on our side?<br />Adobe: we reverse-engineered it… <br />Inception<br />
  23. 23. <ul><li>Implemented in Netscape 2
  24. 24. Implemented / in-use by most browsers to this day
  25. 25. Plugin registers a content-type, ex: music/mp3
  26. 26. Browser encounters the file, delegates to plugin
  27. 27. Ex: Flash, Silverlight, Quicktime, Acrobat, etc..</li></ul>NPAPI is born<br />Netscape Plugin API<br />
  28. 28. JavaScript<br />CSS<br />DOM<br />NPAPI<br />Flash<br />Silverlight<br />…<br />External binaries<br />
  29. 29. NPAPI<br /><ul><li>Standalone process
  30. 30. Full access to your OS
  31. 31. Full access to your filesystem
  32. 32.
  33. 33. Full access to wreck havoc</li></ul>Security nightmare<br />or we why we love to hate plugins<br />Flash<br />Silverlight<br />…<br />External binaries<br />
  34. 34. Google Chrome<br />WebKit, V8, NaCl, speed…<br />* soon to be #2<br />
  35. 35. Process<br />#1<br />Process<br />#2<br />Process<br />#3<br />Tabs are:<br /><ul><li>Isolated processes
  36. 36. Own security sandbox per tab</li></ul>Flash Movie<br />Security ???<br />Security & Isolation<br />are a big focus in Chrome<br />
  37. 37. JavaScript<br />CSS<br />DOM<br />NPAPI<br />Flash<br />Silverlight<br />…<br />External binaries<br />
  38. 38. JavaScript<br />CSS<br />DOM<br />Pepper (PPAPI)<br />Pepper bridge<br />Sandboxed plugin<br />NaCl<br />NaCl<br />Plugin<br />Plugin<br />NaCl<br />Native Client<br /><ul><li>Sandboxing technology for safe execution of native code
  39. 39. Native machine code runs on the client CPU
  40. 40. Not an interpreter</li></li></ul><li><ul><li>Compile code using specialized toolchain
  41. 41. Modified GCC compiler, etc
  42. 42. Build for different CPU architectures
  43. 43. NaCl runtime verifies untrusted code (static analysis)
  44. 44. NaCl executes verified code
  45. 45. No fork, process control, file system access, etc.</li></ul>http://code.google.com/chrome/nativeclient/<br />
  46. 46. receive message<br />functionmoduleDidLoad() {<br />HelloTutorialModule=document.getElementById('hello_tutorial');<br />HelloTutorialModule.addEventListener('message', handleMessage, false);<br />// Send a message to the NaCl module<br />HelloTutorialModule.postMessage('hello');<br />}<br />send message<br />Talking to NaCl<br />via Pepper API<br />
  47. 47. virtualvoidHandleMessage(constpp::Var& var_message) {<br />if (!var_message.is_string())<br />return;<br />std::string message = var_message.AsString();<br />pp::Varvar_reply;<br />var_reply = pp::Var(kReplyString);<br />PostMessage(var_reply);<br />}<br />dispatch response<br />Talking to the Browser<br />via Pepper API<br />
  48. 48. <embedname="nacl_module"<br />id="hello_tutorial"<br />width=0 height=0<br />src="hello_tutorial.nmf"<br />type="application/x-nacl" /><br />Connecting the Pipes: NaCl, Pepper<br />executing native code in the browser<br />
  49. 49. http://code.google.com/chrome/nativeclient/docs/reference/peppercpp/<br /><ul><li>Audio
  50. 50. FileIO
  51. 51. Graphics2D
  52. 52. ImageData
  53. 53. InputEvent
  54. 54. MouseInputEvent
  55. 55. PaintAggregator
  56. 56. Resource
  57. 57. URLLoader
  58. 58. URLResponseInfo
  59. 59. …</li></ul>Same privileges as JS runtime!<br />NaCl SDK / API<br />what can we do in NaCl?<br />
  60. 60. <ul><li>Full C/C++ library
  61. 61. Pthreads!
  62. 62. Dozens of ported libraries
  63. 63.
  64. 64. pthreads!
  65. 65. boost
  66. 66. gsl
  67. 67. Gnuchess
  68. 68. Lame
  69. 69. libogg
  70. 70. Libtheora
  71. 71. … and many others</li></ul>NaCl SDK / API<br />what can we do in NaCl?<br />
  72. 72. Ruby on NaCl?<br />we did say it runs C/C++ code right?<br />
  73. 73. https://s3.amazonaws.com/ivan.krasin/ruby.html<br />You’ll need ~ Chrome 9, with NaCl enabled<br /><embedid="client"type="application/x-nacl-srpc"<br />width="0"height="0"src="ruby.nexe" /><br />Ruby + NaCl<br />demo time!<br />
  74. 74. http://nacl-quake.appspot.com/<br />You’ll need latest Chrome…<br />Quake via NaCl<br />Sounds, Graphics, etc<br />
  75. 75. Future of NaCl?<br />
  76. 76. <ul><li>NaCl is a built-in plugin in Chrome
  77. 77. PNaCl will replace NaCl in 2012
  78. 78. Enable NaCl in about:plugins
  79. 79. NaCl enabled in Chrome Webstore!</li></ul>(P)NaCl in the wild<br />you may be using it already!<br />
  80. 80. +<br />Exacycle<br />(1B CPU hours for research)<br />Netflix, AppEngine, Exacycle<br />NaCl in the wild<br />
  81. 81. http://nativeclient.googlecode.com/svn/data/site/pnacl.pdf<br /><ul><li>Toolchainfor compiling Native Client applications to LLVM bitcode
  82. 82. No more nmf manifests or *.nexe’s
  83. 83. Compile to .pexe (portable executable)
  84. 84. Support for: x86-32, x86-64, ARM
  85. 85. $> pnacl-gcchello.c -o hello.pexe</li></ul>Portable NaCl (PNaCl) <br />LLVM under the hood<br />
  86. 86. Mmm… LLVM in the browser<br />imagine the possibilities…<br />
  87. 87. MacRuby<br />C<br />…<br />C++<br />Rubinius<br />…<br />PyPy<br />…<br />Objective-C<br />Fortran!<br />Dozens of languages<br />all within the browser<br />
  88. 88. EMScripten<br />An LLVM-to-JavaScript Compiler<br />
  89. 89. Compiles LLVM bitcode to Javascript<br />Example: <br /><ul><li>Compile C/C++/Objective C / etc to LLVM bitcode
  90. 90. Run natively
  91. 91. Compile LLVM bitcode to JS
  92. 92. Run in the browser</li></ul>Python, Lua, C, C++, Objective C, …<br />EMScripten<br />LLVM-to-Javascript<br />
  93. 93. Ruby 1.8 to LLVM<br />https://github.com/replit/emscripted-ruby<br />
  94. 94. Try it: http://repl.it/<br />LLVM in the browser<br />it works!<br />
  95. 95. This is not an exhaustive list…<br />but where does that leave us?<br />
  96. 96. 1<br />2<br />3<br />LLVM bitcode<br />EMScripten<br />JavaScript<br />JavaScript<br />JavaScript<br />CSS<br />CSS<br />CSS<br />DOM<br />DOM<br />DOM<br />Silverlight<br />(P)NaCl<br />DLR<br />C/C++, LLVM<br />Complimentary<br />
  97. 97. LLVM bitcode<br />EMScripten<br />EMScripten<br />JavaScript<br />CSS<br />DOM<br />(P)NaCl<br />PNacl<br />“LLVM sandwich”<br />in theory, it could work..<br />C/C++, LLVM<br />
  98. 98. In summary:<br /><ul><li>innovation is good
  99. 99. we need more of it in the browser
  100. 100. I hopeJavascript is not the end all
  101. 101. play, experiment, push the (existing) boundaries...</li></ul>Resources:<br /><ul><li>Google: NaCl / PNaCl
  102. 102. Google IO 2011: Beyond Javascript</li></ul>Phew, time for questions?<br />hope this convinced you to explore the area further…<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×