One Laptop Per Child – One Python Programmer rjs command line to generate JavaScript from Ruby
Apr 16

Running Ruby in the browser via script type=”text/ruby”

Ajax, Java, JavaScript, Open Source, Ruby, Tech Add comments

I played around with getting Ruby to work in the browser while watching some cheesy TV this weekend.

I was able to get things slightly working, and put this work in progress up on Google Code here.

That link sends you to a page that will evaluate Ruby for you, both from a script tag, and from your own input.

If you take a look at the top of the file, you will see:

<script type="text/ruby">
#class Foo; def initialize; @foo = 'whee'; end; end; f = Foo.new; f
Time.now
</script>

This script is found by the Ruby in the browser system, and is run through JRuby via a little applet. The page takes the output at the end and throws it into the container HTML on the right.

You can also edit the text area at the bottom left and run your own Ruby code, and the output will be placed on the right too.

Now, this is just the first baby step to get to something feature full like:

<script type="text/ruby">
document.ready do |dom|
dom["table tr"] <<"<td>test</td>"
end
</script>

Just being able to run some Ruby doesn’t mean much. We need to give it rich support for the browser to be able to interact with the DOM and Ajax libraries to do cool things, using the power of Ruby.

So, there are a lot of TODOs here:

  • The applet is a download of JRuby complete, which is huge, and isn’t all needed. I need to work with the JRuby folk to produce a slimmed down applet version.
  • Come up with a solution that allows you to puts data out (maybe put that data in a div somewhere), and more importantly, talk to the DOM directly from Ruby. Since the applet can contain Ruby files themselves, we can create a Ruby module that lets you do DOM stuff, that becomes JavaScript which will be eval’d to run in the browser. Or, we just give direct access. I am still playing with what makes sense there
  • Only tested in Firefox. There are some known issues in Safari.
  • I am lazily using an applet tag instead of the magic object/embed stuff that would make this work in other places

Any direction make sense to you?

36 Responses to “Running Ruby in the browser via script type=”text/ruby””

  1. Paul Barry Says:

    I would say that puts should just to the same thing that System.out.println does in an applet, which is print to the java console. The better way to handle having the Ruby code update on the page is just use the innerHTML of the dom, using the “<<” operator, as you have shown in the example.

  2. Josh Charles Says:

    Wow, this is nice. I wonder if one thing that might work is some sort of port of RJS to this system.

    I know absolutely nothing about Java, though, so I’m just thinking outloud.

  3. Rapha Says:

    Hi Dion,

    this is awesome!! I’m one of the few guys believing sandboxed applets should be the way to the RIA for things you can’t do in simple DHTML (embedded database, powerful graphics with Swing or java2D…) and you don’t want to do in flash.

    Ok, a good piece of advise: loading in the background is good. Loading with pack200 is even better! Do you know you can compress your jar (arround 5 times) so that it gets smaller than common javascript libraries?
    Also, to increase the user experience, using javascript which is faster to load to handle the first user interactions untill the jvm starts might be a good solution.

    I blogged a bit about that a few months ago:
    about the pack200 trick: http://rvalyi.blogspot.com/2006/09/applet-revival-jgraphpad-ce-blackjax.html
    also in defense of applets for RIA: http://rvalyi.blogspot.com/2006/08/degraded-ajax-app-pre-loaded-hidden.html
    finally I tried to coin: BLACKJAX” for “Background Liveconnect Applet Code Kicking Javascript and XML.”: http://rvalyi.blogspot.com/2006/09/ajax-applet-blackjax.html
    Let’s spread the buzz!

    The diagram editor I’m talking about (JGraphpad Community Edition) isn’t anymore on my demo site because my domain expired and I have been too much busy recently. Still, you can download the app with such an applet demo here: http://www.sourceforge.net/projects/jgraph/

    This is working a bit like your applet: javascript helper to build the applet tag and javascript call backs, background download and even jvm loading…
    And there is the pack200 trick, may be some ideas to catch (even if I should admit I was beginning with javascript last time I made the js helper).

    Now, I’m very impatient about JRuby in the browser. As soon as I get time again, I’ll build a generic diagram driven simulator (for every sort of languages) based on JGraphadCE. I already made it partially using pure Java and the Fractal Aid math (http://www.fraid.org) language for “emergy simulator” (again sorry for the site trouble). But I couldn’t do much, Ruby is actually much better to build DSL.
    So I’m waiting for JRuby in the browser to put it as an additional layer on the top of JGraphadCE.

    Also, there are things where some JRuby/Prototype communication could be a big win: overcome applets securties restrictions to save on the disk (by poping a file to download with the browser), consume cross domain json with padding web services, use the browser threading to do the AJAX (seems to freeze applets in some way)… On the contrary, the browser will get sockets, Java2D, ruby language…

    By by the Microsoft, distributing crappy jvms and blocking SVG won’t be enough…

  4. Tor Norbye Says:

    From my previous searches I thought “text/x-ruby” was the best mimetype to use for ruby, not text/ruby. Did you just pick text/ruby as a reasonable guess or do you know what the authority is on this?

  5. Dion Almaer Says:

    Hi Tor,

    text/x-ruby probably is better, or application/x-ruby? or ….

    I am more than willing to choose something else that makes sense. I just ran with text/ruby to be simple.

    Cheers,

    Dion

  6. Dion Almaer Says:

    Rapha

  7. Tor Norbye Says:

    I think text/x-ruby is nicely symmetric with for exampe text/x-java, and it expresses that Ruby source is text.

  8. Dion Almaer Says:

    Tor,

    I just added support for text/x-ruby and changed the page to use it.

    Thanks for contacting me.

    Cheers,

    Dion

  9. David Corbin Says:

    Congrats. I took a look at doing this in Februrary and had some applet challenges with the JRuby code. There is a documented way for Java to communicate with the JavaScript engine. It’s even referred to in the JRuby example applet code, I think.

  10. Andres Almiray Says:

    Really nice Dion! I did something similar with Groovy, but I’m a step behind as my version does not uses a script tag, but the direct applet declaration. Ruby/Groovy whichever the case, I think having other choices besides JavaScript on the browser is a Good Thing, at least on well controlled environments as ‘intranet’ enterprise applications.

  11. Asbjørn Ulsberg Says:

    The problem with ‘text/*’ mime types is that they default to US-ASCII encoding if the ‘charset’ parameter is missing (and it usually is). Thus, the ‘application/*’ sub type is probably more suitable if you want your Ruby code to contain non-ASCII characters. To use ‘application/ruby’, though, you have to register the type with IANA through an RFC. It would do Ruby well to have a MIME type in any case, so pushing the Ruby community to write the RFC would be a good thing.

  12. James Strachan Says:

    Interesting stuff! :)

    I guess you could plug into the applet jar-caching stuff; so the jars for things like jruby are only downloaded once on startup right?

    I wonder if all the applet/object/embed muck could be hidden with JavaScript/CSS to keep the HTML nice and simple, like the way folks tend to bind JavaScript to HTML markup using CSS styles?

    Incidentally, this clearly isn’t a ruby specific solution; folks could use ruby, groovy, beanshell, scala, python or whatever else floats their boat.

    Also folks could actually rely on things like E4X
    http://www.ecma-international.org/publications/standards/Ecma-357.htm

  13. Michael Slattery Says:

    Very nice. Will this work with IE?

    Perhaps you could extract classes out of the jars that aren’t *always* needed. That way, they would be downloaded as needed.

    A completely different solution is to translate Ruby to JavaScript similar to how GWT converts Java to JavaScript. Work has been done on this:
    http://po-ru.com/diary/convert-ruby-to-javascript

  14. Takashi Okamoto Says:

    This is great. I saw that it didn’t work with Safari, but the fix was easy. Seems to work if you construct the applet tag as a string instead of using setAttribute(), like:

    applet: function() {
    var t = ‘<applet name=”RubyApplet” archive=”jruby.jar,asm.jar,backport-util-concurrent.jar” codebase=”classes” code=”RubyApplet”></applet>’;

    var applet = document.createElement(’div’);
    applet.setAttribute(’id’, ‘applet-wrapper’);
    applet.innerHTML = t;
    document.body.appendChild(applet);
    }

  15. Andres Almiray Says:

    Dion, I’ve updated my Groovy version “borrowing” your trick for tag handling. You’ll find more info at http://jroller.com/page/aalmiray/?entry=more_on_groovy_applets
    Cheers!

  16. Roger Says:

    I wish there were a Ruby/Tk for the browser — like…run a Tk window there (or rather some type of GUI) so you could run a Rubyplet :) That would be sweet.

  17. Inez Says:

    download doom2 [url=http://freesexvidslists2.za.pl]download doom2[/url]
    dvdxcopy [url=http://freesexvidslists2.za.pl]dvdxcopy[/url]
    hotmovies.com card [url=http://freesexvidslists1.za.pl]hotmovies.com card[/url]
    free advertizing sites [url=http://freesexvidslists2.za.pl]free advertizing sites[/url]
    free pinkworld porn [url=http://freesexvidslists1.za.pl]free pinkworld porn[/url]
    5.9 aim download [url=http://freesexvidslists1.za.pl]5.9 aim download[/url]
    movietickets.com [url=http://freesexvidslists1.za.pl]movietickets.com[/url]
    free backround pictures [url=http://freesexvidslists1.za.pl]free backround pictures[/url]
    genital massages [url=http://freesexvidslists1.za.pl]genital massages[/url]
    burner cd download rar win [url=http://freesexvidslists2.za.pl]burner cd download rar win[/url]
    nikki sixx site myspace.com [url=http://freesexvidslists2.za.pl]nikki sixx site myspace.com[/url]
    leprecon movies [url=http://freesexvidslists2.za.pl]leprecon movies[/url]
    the free project vouyer [url=http://freesexvidslists2.za.pl]the free project vouyer[/url]
    yahoo booter download [url=http://freesexvidslists1.za.pl]yahoo booter download[/url]
    alzheimers association eldercarehelpresources.com [url=http://freesexvidslists1.za.pl]alzheimers association eldercarehelpresources.com[/url]
    zango free games [url=http://freesexvidslists2.za.pl]zango free games[/url]
    downloadspeed [url=http://freesexvidslists2.za.pl]downloadspeed[/url]
    crochet slipper pattern free [url=http://freesexvidslists1.za.pl]crochet slipper pattern free[/url]
    download phim nguoi lon mien phi [url=http://freesexvidslists2.za.pl]download phim nguoi lon mien phi[/url]
    downloadgames [url=http://freesexvidslists2.za.pl]downloadgames[/url]
    free desktop dancers [url=http://freesexvidslists2.za.pl]free desktop dancers[/url]
    winks for msn download [url=http://freesexvidslists1.za.pl]winks for msn download[/url]
    download music pual sean [url=http://freesexvidslists1.za.pl]download music pual sean[/url]
    dope wars download [url=http://freesexvidslists1.za.pl]dope wars download[/url]
    download free nero startsmart [url=http://freesexvidslists1.za.pl]download free nero startsmart[/url]
    brooke hogan download [url=http://freesexvidslists1.za.pl]brooke hogan download[/url]
    moviepass.com [url=http://freesexvidslists2.za.pl]moviepass.com[/url]
    free ecards funny animated [url=http://freesexvidslists2.za.pl]free ecards funny animated[/url]
    masturebation movies [url=http://freesexvidslists2.za.pl]masturebation movies[/url]
    glassjaw lyric [url=http://freesexvidslists1.za.pl]glassjaw lyric[/url]

  18. oahmrbnscz Says:

    zdPwUm qpfmfcfvgmfl, [url=http://skvfbexjejxm.com/]skvfbexjejxm[/url], [link=http://nscosvafmakh.com/]nscosvafmakh[/link], http://ktxqqurlpnse.com/

  19. Cesar Chavezz Says:

    He learned about justice or rather injustice early in his life. Cesar grew up in Arizona; the small adobe home, where Cesar was born was swindled from them by dishonest Anglos. Cesar’s father agreed to clear eighty acres of land and in exchange he would receive the deed to forty acres of land that adjoined the home. The agreement was broken and the land sold to a man named Justus Jackson. Cesar’s dad went to a lawyer who advised him to borrow money and buy the land. Later when Cesar’s father could not pay the interest on the loan the lawyer bought back the land and sold it to the original owner. Cesar learned a lesson about injustice that he would never forget. Later, he would say, The love for justice that is in us is not only the best part of our being but it is also the most true to our nature.

  20. Boris Cantrell Says:

    Need to sell used car?
    Need to sell car?
    many deals on http://sell-used-car.info/sell+my+car7skey/

  21. replicahandbags Says:

    thanks for sharing!

  22. miranda Says:

    very good
    buy xanax

  23. wholesale replica bags Says:

    good.Thank you!

  24. Tickets for tomorrow Says:

    Find really cheap airline tickets, Dirt cheap airline tickets at tickets for tomorrow. We have a list of really cheap international airline tickets, and dirt cheap airline tickets, cheap airline tickets. Book your very cheap airline tickets at http://www.ticketsfortomorrow.com

  25. Keith Says:

    That is awsome dude! Nice work, and thanks for sharing this experiment!

  26. Leo Horie Says:

    What version of Java is required to run this applet?

    There was a bit of press lately about the move away from client-side Java by the folks from sharendipity, because it was apparently difficult to get Java working correctly for some users.

    Ignoring the Java installation hurdles, this is actually a pretty neat experiment. Now I wonder if anyone will do a Rhino version, just for the kicks – or perhaps for js 1.9 support in IE :)

  27. Nancy Says:

    Hi,
    Yes you really have a good content.

  28. Michal Hantl Says:

    This is awesome! I want to run Ruby in the browser so i will look at your code as soon as i get back home. I was wondering how to get something ruby-ish working in browser and it took me 5 days to realize there is JRuby!

    Thank man!

  29. Chris Says:

    What would it take to get this talking to the DOM and able to run browser-side Javascript? I would be very interested in getting something like this working as soon as possible for a project of mine.

  30. Replica handbags Says:

    Cesar learned a lesson about injustice that he would never forget. Later, he would say, The love for justice that is in us is not only the best part of our being but it is also the most true to our nature

  31. Nathan Says:

    Hi there,

    I actually started work on something similar – I ran into a little problem, and I’m thinking you may as well: I’m guess that the Applet you have loads the ruby scripts after it (the applet) has loaded, perhaps using the DOM or JSObject to locate the tags. This works fine under FireFox, but I found under IE the entire contents of tag are completed dropped – nothing is returned.

  32. Nathan Says:

    Sorry, forget my last post :P I got it working – just needed to re-implement the DOM access (which also now gives full DOM access).

  33. allen Says:

    There was a bit of press lately about the move away from client-side Java by the folks from sharendipity, because it was apparently difficult to get Java working correctly for some users.

  34. roger Says:

    Now my question is…is there a way to manipulate what the browser displays (like emit javascript) using this…kind of like what gestalt does (can manipulate the dom)…

  35. roger Says:

    maybe use rails’ RJS stuff to be able to manipulate the DOM easily
    http://wiki.rubyonrails.org/howtos/rjs-templates

  36. GreatGhoul Says:

    nice work
    dose anyone do this thing in python?
    and
    dose this thing work in HTA?

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: Type in the word 'cricket'