Your SlideShare is downloading. ×
0
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Ruby in the Browser - RubyConf 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ruby in the Browser - RubyConf 2011

14,660

Published on

JavaScript is great, but let's face it, being stuck with just JavaScript in the browser is no fun. …

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,660
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
57
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. …
  • 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. Google Chrome<br />WebKit, V8, NaCl, speed…<br />* soon to be #2<br />
  • 35. Process<br />#1<br />Process<br />#2<br />Process<br />#3<br />Tabs are:<br /><ul><li>Isolated processes
  • 36. Own security sandbox per tab</li></ul>Flash Movie<br />Security ???<br />Security & Isolation<br />are a big focus in Chrome<br />
  • 37. JavaScript<br />CSS<br />DOM<br />NPAPI<br />Flash<br />Silverlight<br />…<br />External binaries<br />
  • 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. Native machine code runs on the client CPU
  • 40. Not an interpreter</li></li></ul><li><ul><li>Compile code using specialized toolchain
  • 41. Modified GCC compiler, etc
  • 42. Build for different CPU architectures
  • 43. NaCl runtime verifies untrusted code (static analysis)
  • 44. NaCl executes verified code
  • 45. No fork, process control, file system access, etc.</li></ul>http://code.google.com/chrome/nativeclient/<br />
  • 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. 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. <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. http://code.google.com/chrome/nativeclient/docs/reference/peppercpp/<br /><ul><li>Audio
  • 50. FileIO
  • 51. Graphics2D
  • 52. ImageData
  • 53. InputEvent
  • 54. MouseInputEvent
  • 55. PaintAggregator
  • 56. Resource
  • 57. URLLoader
  • 58. URLResponseInfo
  • 59. …</li></ul>Same privileges as JS runtime!<br />NaCl SDK / API<br />what can we do in NaCl?<br />
  • 60. <ul><li>Full C/C++ library
  • 61. Pthreads!
  • 62. Dozens of ported libraries
  • 63. …
  • 64. pthreads!
  • 65. boost
  • 66. gsl
  • 67. Gnuchess
  • 68. Lame
  • 69. libogg
  • 70. Libtheora
  • 71. … and many others</li></ul>NaCl SDK / API<br />what can we do in NaCl?<br />
  • 72. Ruby on NaCl?<br />we did say it runs C/C++ code right?<br />
  • 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. http://nacl-quake.appspot.com/<br />You’ll need latest Chrome…<br />Quake via NaCl<br />Sounds, Graphics, etc<br />
  • 75. Future of NaCl?<br />
  • 76. <ul><li>NaCl is a built-in plugin in Chrome
  • 77. PNaCl will replace NaCl in 2012
  • 78. Enable NaCl in about:plugins
  • 79. NaCl enabled in Chrome Webstore!</li></ul>(P)NaCl in the wild<br />you may be using it already!<br />
  • 80. +<br />Exacycle<br />(1B CPU hours for research)<br />Netflix, AppEngine, Exacycle<br />NaCl in the wild<br />
  • 81. http://nativeclient.googlecode.com/svn/data/site/pnacl.pdf<br /><ul><li>Toolchainfor compiling Native Client applications to LLVM bitcode
  • 82. No more nmf manifests or *.nexe’s
  • 83. Compile to .pexe (portable executable)
  • 84. Support for: x86-32, x86-64, ARM
  • 85. $> pnacl-gcchello.c -o hello.pexe</li></ul>Portable NaCl (PNaCl) <br />LLVM under the hood<br />
  • 86. Mmm… LLVM in the browser<br />imagine the possibilities…<br />
  • 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. EMScripten<br />An LLVM-to-JavaScript Compiler<br />
  • 89. Compiles LLVM bitcode to Javascript<br />Example: <br /><ul><li>Compile C/C++/Objective C / etc to LLVM bitcode
  • 90. Run natively
  • 91. Compile LLVM bitcode to JS
  • 92. Run in the browser</li></ul>Python, Lua, C, C++, Objective C, …<br />EMScripten<br />LLVM-to-Javascript<br />
  • 93. Ruby 1.8 to LLVM<br />https://github.com/replit/emscripted-ruby<br />
  • 94. Try it: http://repl.it/<br />LLVM in the browser<br />it works!<br />
  • 95. This is not an exhaustive list…<br />but where does that leave us?<br />
  • 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. 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. In summary:<br /><ul><li>innovation is good
  • 99. we need more of it in the browser
  • 100. I hopeJavascript is not the end all
  • 101. play, experiment, push the (existing) boundaries...</li></ul>Resources:<br /><ul><li>Google: NaCl / PNaCl
  • 102. Google IO 2011: Beyond Javascript</li></ul>Phew, time for questions?<br />hope this convinced you to explore the area further…<br />

×