Ruby in the Browser - RubyConf 2011

17,814 views
17,185 views

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
17,814
On SlideShare
0
From Embeds
0
Number of Embeds
529
Actions
Shares
0
Downloads
59
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Ruby in the Browser - RubyConf 2011

  1. Ruby in the Browser<br />why, how, and how do we get there?<br />Ilya Grigorik<br />@igrigorik<br />
  2. How many languages are you proficient in?<br />take a few seconds…<br />
  3. …<br />…<br />…<br />…<br />
  4. JavaScript<br />CSS<br />DOM<br />ActionScript<br />Java Applets<br />ActiveX<br />…<br />
  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. JavaScript as a monopoly?<br />they (ECMA) are colluding against us!<br />
  7. …<br />…<br />…<br />Diversity is good!<br />experimentation leads to innovation<br />…<br />
  8. 50+ Ruby implementations<br />credit to Konstantin Haase - @rkh<br />
  9. Case in point…<br />
  10. Disclaimer: I work for Google. I have no affiliation to NaCl, Chrome, … teams. All opinions are my own, etc… :-) <br />
  11. Ruby in the browser?<br />that would be nice…<br />
  12. Ruby/Python/X/Y/Z in the browser<br />would be even better!<br />
  13. http://tryruby.org/<br />
  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. 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. In the browser, for real..<br />anyone crazy enough to try?<br />
  17. http://visitmix.com/work/gestalt/<br />
  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. JavaScript<br />CSS<br />DOM<br />Gestalt<br />IronPython<br />IronRuby<br />C#<br />F#<br />Dynamic Language Runtime<br />
  20. Is there a future for Silverlight?<br />How about IronRuby?<br />I hope so.. x2<br />
  21. Browser plugins<br />a brief detour…<br />
  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. <ul><li>Implemented in Netscape 2
  24. Implemented / in-use by most browsers to this day
  25. Plugin registers a content-type, ex: music/mp3
  26. Browser encounters the file, delegates to plugin
  27. Ex: Flash, Silverlight, Quicktime, Acrobat, etc..</li></ul>NPAPI is born<br />Netscape Plugin API<br />
  28. JavaScript<br />CSS<br />DOM<br />NPAPI<br />Flash<br />Silverlight<br />…<br />External binaries<br />
  29. NPAPI<br /><ul><li>Standalone process
  30. Full access to your OS
  31. Full access to your filesystem
  32. 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 />
  33. Google Chrome<br />WebKit, V8, NaCl, speed…<br />* soon to be #2<br />
  34. Process<br />#1<br />Process<br />#2<br />Process<br />#3<br />Tabs are:<br /><ul><li>Isolated processes
  35. Own security sandbox per tab</li></ul>Flash Movie<br />Security ???<br />Security & Isolation<br />are a big focus in Chrome<br />
  36. JavaScript<br />CSS<br />DOM<br />NPAPI<br />Flash<br />Silverlight<br />…<br />External binaries<br />
  37. 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
  38. Native machine code runs on the client CPU
  39. Not an interpreter</li></li></ul><li><ul><li>Compile code using specialized toolchain
  40. Modified GCC compiler, etc
  41. Build for different CPU architectures
  42. NaCl runtime verifies untrusted code (static analysis)
  43. NaCl executes verified code
  44. No fork, process control, file system access, etc.</li></ul>http://code.google.com/chrome/nativeclient/<br />
  45. 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 />
  46. 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 />
  47. <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 />
  48. http://code.google.com/chrome/nativeclient/docs/reference/peppercpp/<br /><ul><li>Audio
  49. FileIO
  50. Graphics2D
  51. ImageData
  52. InputEvent
  53. MouseInputEvent
  54. PaintAggregator
  55. Resource
  56. URLLoader
  57. URLResponseInfo
  58. …</li></ul>Same privileges as JS runtime!<br />NaCl SDK / API<br />what can we do in NaCl?<br />
  59. <ul><li>Full C/C++ library
  60. Pthreads!
  61. Dozens of ported libraries
  62. pthreads!
  63. boost
  64. gsl
  65. Gnuchess
  66. Lame
  67. libogg
  68. Libtheora
  69. … and many others</li></ul>NaCl SDK / API<br />what can we do in NaCl?<br />
  70. Ruby on NaCl?<br />we did say it runs C/C++ code right?<br />
  71. 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 />
  72. http://nacl-quake.appspot.com/<br />You’ll need latest Chrome…<br />Quake via NaCl<br />Sounds, Graphics, etc<br />
  73. Future of NaCl?<br />
  74. <ul><li>NaCl is a built-in plugin in Chrome
  75. PNaCl will replace NaCl in 2012
  76. Enable NaCl in about:plugins
  77. NaCl enabled in Chrome Webstore!</li></ul>(P)NaCl in the wild<br />you may be using it already!<br />
  78. +<br />Exacycle<br />(1B CPU hours for research)<br />Netflix, AppEngine, Exacycle<br />NaCl in the wild<br />
  79. http://nativeclient.googlecode.com/svn/data/site/pnacl.pdf<br /><ul><li>Toolchainfor compiling Native Client applications to LLVM bitcode
  80. No more nmf manifests or *.nexe’s
  81. Compile to .pexe (portable executable)
  82. Support for: x86-32, x86-64, ARM
  83. $> pnacl-gcchello.c -o hello.pexe</li></ul>Portable NaCl (PNaCl) <br />LLVM under the hood<br />
  84. Mmm… LLVM in the browser<br />imagine the possibilities…<br />
  85. 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 />
  86. EMScripten<br />An LLVM-to-JavaScript Compiler<br />
  87. Compiles LLVM bitcode to Javascript<br />Example: <br /><ul><li>Compile C/C++/Objective C / etc to LLVM bitcode
  88. Run natively
  89. Compile LLVM bitcode to JS
  90. Run in the browser</li></ul>Python, Lua, C, C++, Objective C, …<br />EMScripten<br />LLVM-to-Javascript<br />
  91. Ruby 1.8 to LLVM<br />https://github.com/replit/emscripted-ruby<br />
  92. Try it: http://repl.it/<br />LLVM in the browser<br />it works!<br />
  93. This is not an exhaustive list…<br />but where does that leave us?<br />
  94. 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 />
  95. 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 />
  96. In summary:<br /><ul><li>innovation is good
  97. we need more of it in the browser
  98. I hopeJavascript is not the end all
  99. play, experiment, push the (existing) boundaries...</li></ul>Resources:<br /><ul><li>Google: NaCl / PNaCl
  100. Google IO 2011: Beyond Javascript</li></ul>Phew, time for questions?<br />hope this convinced you to explore the area further…<br />

×