Ruby in the Browser - RubyConf 2011

  • 14,411 views
Uploaded 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?

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
14,411
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
54
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
    why, how, and how do we get there?
    Ilya Grigorik
    @igrigorik
  • 2. How many languages are you proficient in?
    take a few seconds…
  • 3.



  • 4. JavaScript
    CSS
    DOM
    ActionScript
    Java Applets
    ActiveX

  • 5. 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…
  • 6. JavaScript as a monopoly?
    they (ECMA) are colluding against us!
  • 7.


    Diversity is good!
    experimentation leads to innovation

  • 8. 50+ Ruby implementations
    credit to Konstantin Haase - @rkh
  • 9. Case in point…
  • 10. Disclaimer: I work for Google. I have no affiliation to NaCl, Chrome, … teams. All opinions are my own, etc… :-)
  • 11. Ruby in the browser?
    that would be nice…
  • 12. Ruby/Python/X/Y/Z in the browser
    would be even better!
  • 13. http://tryruby.org/
  • 14. 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…
  • 15. 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…
  • 16. In the browser, for real..
    anyone crazy enough to try?
  • 17. http://visitmix.com/work/gestalt/
  • 18. <script type="text/ruby">
    defonclick(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?
    IronRuby, IronPython, …
    Micorosoft’s Silverlight + DLR
    sweet!
  • 19. JavaScript
    CSS
    DOM
    Gestalt
    IronPython
    IronRuby
    C#
    F#
    Dynamic Language Runtime
  • 20. Is there a future for Silverlight?
    How about IronRuby?
    I hope so.. x2
  • 21. Browser plugins
    a brief detour…
  • 22. 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
  • 23.
    • 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..
    NPAPI is born
    Netscape Plugin API
  • 28. JavaScript
    CSS
    DOM
    NPAPI
    Flash
    Silverlight

    External binaries
  • 29. NPAPI
    • Standalone process
    • 30. Full access to your OS
    • 31. Full access to your filesystem
    • 32.
    • 33. Full access to wreck havoc
    Security nightmare
    or we why we love to hate plugins
    Flash
    Silverlight

    External binaries
  • 34. Google Chrome
    WebKit, V8, NaCl, speed…
    * soon to be #2
  • 35. Process
    #1
    Process
    #2
    Process
    #3
    Tabs are:
    • Isolated processes
    • 36. Own security sandbox per tab
    Flash Movie
    Security ???
    Security & Isolation
    are a big focus in Chrome
  • 37. JavaScript
    CSS
    DOM
    NPAPI
    Flash
    Silverlight

    External binaries
  • 38. JavaScript
    CSS
    DOM
    Pepper (PPAPI)
    Pepper bridge
    Sandboxed plugin
    NaCl
    NaCl
    Plugin
    Plugin
    NaCl
    Native Client
    • Sandboxing technology for safe execution of native code
    • 39. Native machine code runs on the client CPU
    • 40. Not an interpreter
    • 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.
    http://code.google.com/chrome/nativeclient/
  • 46. 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
  • 47. 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
  • 48. <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
  • 49. http://code.google.com/chrome/nativeclient/docs/reference/peppercpp/
    Same privileges as JS runtime!
    NaCl SDK / API
    what can we do in NaCl?
  • 60. NaCl SDK / API
    what can we do in NaCl?
  • 72. Ruby on NaCl?
    we did say it runs C/C++ code right?
  • 73. 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!
  • 74. http://nacl-quake.appspot.com/
    You’ll need latest Chrome…
    Quake via NaCl
    Sounds, Graphics, etc
  • 75. Future of NaCl?
  • 76.
    • 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!
    (P)NaCl in the wild
    you may be using it already!
  • 80. +
    Exacycle
    (1B CPU hours for research)
    Netflix, AppEngine, Exacycle
    NaCl in the wild
  • 81. http://nativeclient.googlecode.com/svn/data/site/pnacl.pdf
    • 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
    Portable NaCl (PNaCl)
    LLVM under the hood
  • 86. Mmm… LLVM in the browser
    imagine the possibilities…
  • 87. MacRuby
    C

    C++
    Rubinius

    PyPy

    Objective-C
    Fortran!
    Dozens of languages
    all within the browser
  • 88. EMScripten
    An LLVM-to-JavaScript Compiler
  • 89. Compiles LLVM bitcode to Javascript
    Example:
    • Compile C/C++/Objective C / etc to LLVM bitcode
    • 90. Run natively
    • 91. Compile LLVM bitcode to JS
    • 92. Run in the browser
    Python, Lua, C, C++, Objective C, …
    EMScripten
    LLVM-to-Javascript
  • 93. Ruby 1.8 to LLVM
    https://github.com/replit/emscripted-ruby
  • 94. Try it: http://repl.it/
    LLVM in the browser
    it works!
  • 95. This is not an exhaustive list…
    but where does that leave us?
  • 96. 1
    2
    3
    LLVM bitcode
    EMScripten
    JavaScript
    JavaScript
    JavaScript
    CSS
    CSS
    CSS
    DOM
    DOM
    DOM
    Silverlight
    (P)NaCl
    DLR
    C/C++, LLVM
    Complimentary
  • 97. LLVM bitcode
    EMScripten
    EMScripten
    JavaScript
    CSS
    DOM
    (P)NaCl
    PNacl
    “LLVM sandwich”
    in theory, it could work..
    C/C++, LLVM
  • 98. In summary:
    • 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...
    Resources:
    • Google: NaCl / PNaCl
    • 102. Google IO 2011: Beyond Javascript
    Phew, time for questions?
    hope this convinced you to explore the area further…