Friday, January 18, 2008

Announcing YUIRails

Update 2/24/08 - I have uploaded new versions of yuirails.js and yuirails-min.js.
The new version adds file upload capability (YUI + YuiRails + attachment_fu) and fixes a few misc bugs. The file upload capability works with single as well as multiple file uploads (ajax). I will be posting on this in coming weeks. Let me know if there is interest and I will try to put it up sooner. The demo with the new js files is here and is otherwise unchanged.

I am using YUI with Rails at work to develop a complex web application using the treeview, panel, connection, and various other widgets. I used to miss being able to use link_to_remote and remote_form_for without having to include prototype.js (which at the latest version is about 124KB.
So over the Christmas break, I sat down and coded up YUIRails. The intent of this library is to provide a thin layer of logic that glues RJS - PrototypeHelper with YUI connection manager. In its present form, it provides partial support for RJS Prototypehelper, limited to Element methods and Ajax.Request and Ajax.Updater. No support is provided for Scriptaculous effects.

To use this library, simply drop it in public/javascripts. In its uncompressed form it is at 18K, but a minimized version is only 6K. If there is enough interest, I will look into making the code tighter.

Following are a few restrictions in the usage:
a) I have stayed away from extending Dom elements with Element.methods. As a result you can't call $('foo').hide(); Rather you will have to use Element.hide('foo');
b) Following Element methods are supported:
- visible
- toggle
- hide
- show
- remove
- update
- replace

As a demo, a simple rails application is included in the distribution. You will need to create a MYSQL database test_yuirails_development owned by yuirails/testing

create database test_yuirails_development;
GRANT SELECT,INSERT,UPDATE,DELETE,CREATE,DROP,ALTER,INDEX ON test_yuirails_development.* TO 'yuirails'@'localhost' IDENTIFIED BY 'testing';

and then

rake db:migrate


demo.tgz
yuirails.js - 18K
yuirails-min.js - 6.5K

I just setup the demo on a server. Check it out.

Enjoy.

11 comments:

Anonymous said...

Did you see this project that was just created over at RubyForge?
https://rubyforge.org/forum/forum.php?forum_id=20649

- Chetan Patil said...

Thanks for the pointer Matt. These folks are going the plugin route. Didnt see any files that were released yet.

Anonymous said...

Chetan,

Great blog. I like YUI a lot too.

Not sure if I agree with you regarding the size comparison to prototype+scriptaculuos. Size is about the same. Don't you have to load those libraries as well?

container-min.js = 61.7KB
connection-min.js = 11.5KB
yahoo-dom-event.js = 29.9K

I tried installing the example, and it works fine on Firefox, but have errors on IE 6. (oh yeah I had to flush privilege for mysql user is another remark).

IE debugger shows that the code fails on this line after I got your debug version of javascript:

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

Oleg

- Chetan Patil said...

Hi Oleg,
Thanks for the comments. Yup, the YUI team has done an awesome job.

Reg the size comparison - If your project is only YUI based and you want to use remote_form_for and other prototype-helper goodies from rails, you have to load the entire prototype.js along with your YUI dependencies.

YuiRails.js provides you a low-size alternative to the entire prototype.js by providing a thin interface between Rails generated Javascript code and YUI libraries. You can use remote_form_for, rjs updates, callbacks for HTTP status codes etc just as if you are using the prototype.js on the client side.

I just uploaded a new version of yuirails.js and the demo (http://loop6.com:3000) and fixed a bug for IE, but it doesn't seem to be the one you mention. Perhaps you can try again - http://loop6.com:3000?

- c

Anonymous said...

Now, I see what you meant regarding sizing. It is definitely better to load yuirails.js, then the whole prototype library.

The new version works fine on IE :)

You mentioned we cannot use $. Can I do something like that in my javaScript code:
var $ = YAHOO.util.Dom.get;

Also, it would be nice to see your example running with Rails 2.0 :) Simply unfreezing Rails and starting the server would not do it :(


Oleg.

- Chetan Patil said...

You can use $ and Element (lift-offs from prototype).
Eventually I want to add Array and Hash prototype.js functions to yuirails as well. I find them very useful as I code in Javascript.
I will get the demo going on Rails 2.0 soon. I don't want to break my existing apps by upgrading to rails 2.0 right now :).
Following is a list of files that need to be copied into a new rails 2.0 tree...
app/controllers/application.rb
app/controllers/blogs_controller.rb
app/models/blog.rb
app/view/blogs
db/migrate/001_create_blogs.rb
config/database.yml
config/routes.rb
public/javascripts/yuirails*.js

Mike said...

Will yuirails work with Rails 2.0?

- Chetan Patil said...

Hi Maddesa: I haven't tried using YUIRails with a Rails 2.0 app, but I don't see any reason why it would not work with Rails 2.0. YUIRails is a client side solution and provides the same api as prototype.js. As long as Rails + prototype.js interface remains the same, YUIRails.js should continue to work fine.

Mike said...

Just wanted to follow up, simple drop-in to rails 2.0. I had done the whole thing with prototype by using the default js files, I just slipped YUIRails in and it works seamlessly. NIce work!

Anonymous said...

Looks like an interesting project. However, neither the links to download the demo nor the demo server work, so I can't really test it :(

- Chetan Patil said...

@anon: Try it now. I just restarted the demo. I had to shut it down for a while - running low on memory on my VM.