List Kung Fu uses Ajax a lot and so far it works out pretty well. Over the past two weeks I’ve looked into improving the performance of the UI and there are a couple of things that helped a lot and which I want to share here.

Returning the correct HTTP status code and optimize browser caching

There are two status codes I mean specifically:

• 200 – “Ok“. Tells the browser that the server was able to respond successfully to the request. The response contains the data from the server in the HTTP payload.
• 304 – “Not modified“. Tells the browser that the data for the sent request did not change and that data should be loaded from the cache. In this case the response does not contain any payload.

Since a “Not Modified”-message contains much less data (no content, only header) that’s what you preferably want to return to the browser. Of cause you only want to that if you are sure that the browser already has the data.

For my application I found that the server was returning far more often 200-responses than 304-responses which caused

• More data than necessary had to be transmitted.
• More data had to be processed by the UI.

Both things were slowing down the application. Just a little, but enough to be noticed in the UI. Luckily there are only a few things you need to change in your Rails application to get the right behaviour.

1) Use stale? in your GET methods

  def show
    @list_item = @list.list_items.find( params[ :id ] )
    if stale?( :etag => @list_item, :last_modified => @list_item.updated_at.utc, :public => true )
      respond_with( @list_item )
    end
  end

Stale? sends back an etag and a last_modified date in the response. With the next request to the same URL the browser will send this etag and last_modified date to the server. The stale? method then analyses both parameters and returns 304 in case they are the same or 200 plus the new content if the newly calculated values are different.

More information on stale? you get in Rails’ API documentation and on Rails Guides.

2) Make sure the browser asks for new data on each request

After above modifications something interesting was happening. If the same Ajax action was triggered multiple times within a short period of time, the browser wouldn’t send a request at all to the server, but instead take the data from the cache. While obviously this made the UI really fast, it wasn’t exactly what I wanted. My goal was maximum performance while guaranteeing correct and up to date data on the screen.
The browser’s caching behaviour is influenced by three HTTP header flags: cache-controll, pragma and expires.

To “disable” caching in the browser all together you could send the following:

  def set_cache_buster
    response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
    response.headers["Pragma"] = "no-cache"
    response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"
  end

What I wanted however is this:

  def set_must_revalidate
    response.headers["Cache-Control"] = "must-revalidate"
  end

This advices the browser to check for new / updated data with each request. I added this method to my application_controller.rb and I’m calling it in a before_filter of controllers for which I want to have this flag set.

3) Using stale? for GET methods which return collections (e.g. index)

Above stale? example is taken from a controller’s show method. This is what you find in most examples on the web. To make this work in a method which returns a collection, like typically a controller’s index method you need to find some way to figure out whether the current collection is the same as it was for the last request.
List Kung Fu has a model List which has_many ListItems. Each ListItem belongs_to a List. To be able to determine in list_items_controller whether a collection of ListItems changed, I added code which updates the list.updated_at timestamp for each write operation on a list_item.

In ListItem.rb:

class ListItem < ActiveRecord::Base
  belongs_to :list
  after_save :update_list
  after_destroy :update_list
 
  # [...]
 
  def update_list
    self.list.updated_at = Time.now
    self.list.save
  end
end

Thus, in the list_items_controller the index method could look like this:

  def index
    @list_items = @list.list_items
 
    if stale?( :last_modified => @list.updated_at )
      respond_with( @list_items )
    end
  end

Instead of using the updated_at field I could have added a version field to the List model, but that seemed unnecessary. If the model doesn’t have a model it belongs_to, you need to find another strategy for checking whether the collection has been modified. Maybe it’s possible to calculate a checksum over all objects in the collection…

So much for this post. I also switched from using jQuery’s getJSON to Wycats jquery-offline. More about that in my next post.

If you need to run some SQL manually on Heroku, the Heroku SQL Console is exactly what you’re searching for.

It’s installed in 5 seconds:

heroku plugins:install git://github.com/ddollar/heroku-sql-console.git

I guess much more specific a title for a post couldn’t be. Anyways… I’m using jQuery in my Rails projects using the jQuery UJS adapter. Moreover some of the forms are added dynamically to the page.
This should not really be a problem because jQuery UJS relies on jQuery’s live method. In fact, it really isn’t a problem in all browsers… except.. Internet Explorer.

In Internet Explorer for some reason (and maybe just on my specific page), the live method didn’t work with the submit event of the form. The form would just post straight to the Rails application, which is not quite what I wanted. I know there were problems with .live() and a couple of Javascript events in previous versions of jQuery, but according to the doc, that should be all good now.

What I did in the end is this. In jQuery UJS I changed

$('form[data-remote]').live('submit', function (e) {
  $(this).callRemote();
  e.preventDefault();
});

to

$('form[data-remote]').find("input[type=submit]").live('click', function (e) {
  $(this).parentsUntil('form[data-remote]').last().parent().callRemote();
  e.preventDefault();
});

So instead of binding to the submit event, I’m binding a function to the click event of the submit button. That’s not as flexible as the original code, because you need to have a submit button and it wouldn’t work if the submit is triggered from Javascript directly. For my purpose however, the trick does it.

This two line change took me a while to figure out, so I’m really wondering if my current approach of writing Javascript applications with a Rails backend is the best approach. The approach is a mixture of retrieving JSON on the one hand vs. Rails returning Javascript code which gets executed once the Ajax call is completed on the other hand.
Alternatives would be to use Javascript MVC, Sproutcore, Pure MVC or Cappuccino. All have their advantages and disadvantages and I haven’t decided yet which one I like the best…

Rails provides a very convenient way of transporting short messages from the server to the user: The Flash.

So you can do for example stuff like this:

class LoginsController < ApplicationController 
  def destroy 
    session[:current_user_id] = nil 
    flash[:notice] = "You have successfully logged out"  
    redirect_to root_url 
  end 
end

If you use Ajax however the user will never see this message. You could do another Ajax request in order to update the area in your layout which displays the flash messages, but that’s pretty heavy. Better would be if the Flash messages were returned directly with the Ajax request.

After thinking about that for a while, I thought the cleanest solution for transporting flash messages is, to add them to the response header. So I added this method to my application controller:

class ApplicationController < ActionController::Base
  after_filter :add_flash_to_header
 
  def add_flash_to_header
    # only run this in case it's an Ajax request.
    return unless request.xhr?
 
    # add different flashes to header
    response.headers['X-Flash-Error'] = flash[:error] unless flash[:error].blank?
    response.headers['X-Flash-Warning'] = flash[:warning] unless flash[:warning].blank?
    response.headers['X-Flash-Notice'] = flash[:notice] unless flash[:notice].blank?
    response.headers['X-Flash-Message'] = flash[:message] unless flash[:message].blank?
 
    # make sure flash does not appear on the next page
    flash.discard
  end
end

Now, when doing an Ajax call like this:

var test = $.ajax({
	url: "http://localhost:3000/lists/5/edit",
	dataType: "json",
	type: "GET",
	processData: false,
	contentType: "application/json"
});

you can get the JSON data by calling

var json = $.parseJSON( test.responseText );

And you get get your flash message (assuming you created one in the edit action) by calling:

var notice = test.getResponseHeader("X-Flash-Notice");

Rails 3 makes it really easy to return JSON data in the HTTP response. Consider this fragment:

class ListsController < ApplicationController
 
  respond_to :json
 
  def index
    @lists = List.all
    respond_with(@lists)
  end
 
  # ...
end

index might return e.g.

If you look at jQuery-ujs when sending an Ajax request, the content type is set to ‘application/x-www-form-urlencoded’ by default: The data is serialized as form data and send through the wire.

While this is absolutely fine, I was wondering how to use ‘application/json’ as content type when sending an Ajax request with jQuery. IMHO that’s cleaner because you then send JSON in the request and get back JSON in the response. Content types like ‘application/json’ and ‘text/xml’ are also much better if 3rd party applications will consume your service.

Rails by default creates seven different routes for a single (not nested) resource:

          GET    /lists(.:format)               {:action=>"index", :controller=>"lists"}
    lists POST   /lists(.:format)               {:action=>"create", :controller=>"lists"}
 new_list GET    /lists/new(.:format)           {:action=>"new", :controller=>"lists"}
          GET    /lists/:id(.:format)           {:action=>"show", :controller=>"lists"}
          PUT    /lists/:id(.:format)           {:action=>"update", :controller=>"lists"}
     list DELETE /lists/:id(.:format)           {:action=>"destroy", :controller=>"lists"}
edit_list GET    /lists/:id/edit(.:format)      {:action=>"edit", :controller=>"lists"}

Below the jQuery Ajax code for each of these routes:

GET /lists(.:format) {:action=>"index", :controller=>"lists"}

$.ajax({
	url: "http://localhost:3000/lists",
	dataType: "json",
	type: "GET",
	processData: false,
	contentType: "application/json"
});

POST /lists(.:format) {:action=>"create", :controller=>"lists"}

$.ajax({
	url: "http://localhost:3000/lists",
	dataType: "json",
	type: "POST",
	processData: false,
	contentType: "application/json",
	data: "{\"list\":{\"title\":\"test\"}}"
});

GET /lists/new(.:format) {:action=>"new", :controller=>"lists"}

// .new
$.ajax({
	url: "http://localhost:3000/lists/new",
	dataType: "json",
	type: "GET",
	processData: false,
	contentType: "application/json"
});

GET /lists/:id(.:format) {:action=>"show", :controller=>"lists"}

$.ajax({
	url: "http://localhost:3000/lists/3",
	dataType: "json",
	type: "GET",
	processData: false,
	contentType: "application/json"
});

PUT /lists/:id(.:format) {:action=>"update", :controller=>"lists"}

$.ajax({
	url: "http://localhost:3000/lists/3",
	dataType: "json",
	type: "POST",
	processData: false,
	contentType: "application/json",
	data: "{\"list\":{\"title\":\"hallo welt\"}}",
	beforeSend: function(xhr)   
	{
		xhr.setRequestHeader("X-Http-Method-Override", "PUT");
	}
});

DELETE /lists/:id(.:format) {:action=>"destroy", :controller=>"lists"}

$.ajax({
	url: "http://localhost:3000/lists/3",
	dataType: "json",
	type: "POST",
	processData: false,
	contentType: "application/json",
	beforeSend: function(xhr)   
	{
		xhr.setRequestHeader("X-Http-Method-Override", "DELETE");
	}
});

GET /lists/:id/edit(.:format) {:action=>"edit", :controller=>"lists"}

// .edit
$.ajax({
	url: "http://localhost:3000/lists/3/edit",
	dataType: "json",
	type: "GET",
	processData: false,
	contentType: "application/json"
});

Note that you need to override the HTTP method for update and destroy. You could use also type: “PUT” and type: “DELETE”, but not all browsers understand these verbs. Therefore it’s probably better to use the ‘X-Http-Method-Override’ header instead.

For those routes which require to send data, the data is send as JSON. The format of the JSON string needs to match what Rails would return in the response. If you used a different JSON string, you would have to parse it server side by yourself.

processData is set to false. If it is ‘true’ (the default), jQuery will try to serialize it into a form post. In this case that’s not desirable, that’s why it needs to be turned off.

On Amazon S3 you can access your files through different URL’s, depending on which suites best your requirements:

• Your bucket as “folder”: http://s3.amazonaws.com/your-bucket/your-file.txt
• As subdomain: http://your-bucket.s3.amazonaws.com/your-file.txt
• With a CNAME on your own domain: http://images.my-domain.com/your-file.jpg

How to setup a CNAME with Amazon S3 is explained pretty well here.

I had however some trouble setting up the correct URL to this CNAME in Paperclip, the popular Rails gem for handling file uploads.

This is the final configuration which is working for me is:

has_attached_file :image,
      :storage => 's3',
      :s3_credentials => { :access_key_id => ENV['S3_KEY'], :secret_access_key => ENV['S3_SECRET'] },
      :s3_headers => { 'Expires' => 1.year.from_now.httpdate },
      :s3_host_alias => 'subdomain.my-domain.com',
      :bucket => 'subdomain.my-domain.com',
      :url => ":s3_alias_url",
      :path => "/images/:class/:id_:basename.:style.:extension",
      :styles => { :thumb  => '70x70#',
      							:medium => '350x350',
      							:original => '1000x1000>' },
      :default_style => :original,
      :convert_options => { :all => '-strip -trim' }

I’m using Heroku as hosting service, therefore I save the S3 key and secret in an environment variable.
:s3_host_alias is the CNAME which you need to configure for your domain. The exact same string needs to be as well the name of the bucket.
Finally just assign “:s3_alias_url” to :url. Without that the URL won’t be generated correctly. You would end up with something like “http://s3.amazonaws.com/your-file.txt” which is missing entirely the bucket name and would not load the file.
Note that for this configuration it’s not necessary to define :bucket.

Using ActiveRecord’s serialize method you can save Ruby objects in a single field of your model. The serialization is done through YAML.

Today I tried to save a nested object structure with this method. These are the classes:

class PhotoStyle
  attr_accessor :image
 
  def initialize
    @image = StyleElement.new
  end
end
 
class StyleElement
  attr_accessor :selector, :style
 
  def initialize
    @selector = '*'
    @style = {}
  end
end

The model which saves a PhotoStyle object:

class Photo < ActiveRecord::Base
  serialize :style, PhotoStyle
end

This first approach didn’t quite work out. Saving the model worked fine, but when I loaded it only PhotoStyle got deserialized to the original type. The nested StyleElement didn’t:

p = Photo.last
p.style
=> #<PhotoStyle:0xb70a906c @image=#<YAML::Object:0xb72079a4 @ivars={"selector"=>"#theimage", "style"=>{"border"=>"0", "box-shadow"=>"1px 3px 15px #555"}}, @class="StyleElement">}, @class="PhotoStyle">>

Note the YAML object assigned to the @image instance variable.

I’m not sure if that’s a bug in Rails3 or if that is by design. You can however “fix” it by running this code snippet when your application starts up:

YAML::Syck::Resolver.class_eval do
  def transfer_with_autoload(type, val)
    match = type.match(/object:(\w+(?:::\w+)*)/)
    match && match[1].constantize
    transfer_without_autoload(type, val)
  end
  alias_method_chain :transfer, :autoload
end

Save it e.g. in yaml_autoloader.rb in the config/initializers folder of your app.

Now all types will autoload:

#<PhotoStyle:0xb73dcb08 @image=#<StyleElement:0xb73dd058 @selector="#theimage", @style={"border"=>"0", "box-shadow"=>"1px 3px 15px #555"}>>

I found above code snippet here. Thanks!

Read more about ActiveRecord’s serialize method here: Simple user preferences for your Rails app.

Update:
Still not sure if that’s a bug, but I submitted a lighthouse ticket.

Update 2:
Apparently this is not a bug in Rails, but a problem in my code :-) Please see Aaron’s comment in above ticket.

Today I tried to use Heroku on Ubuntu / RVM for a Rails 3 test app. I ran into a similar problem like I had yesterday with OpenSSL.

After installing the Heroku gem:

gem install heroku

and running the command for create a new app

heroku create

I got this error

/home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require': no such file to load -- readline (LoadError)
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/lib/heroku/commands/app.rb:1
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/lib/heroku/command.rb:5
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/lib/heroku/command.rb:5:in `each'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/lib/heroku/command.rb:5
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/bin/heroku:7
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/bin/heroku:19:in `load'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/bin/heroku:19

Now, the first line looks darn familiar and so does the solution:

First install libreadline-dev:

sudo apt-get install libreadline-dev

Then cd into

~/.rvm/src/ruby-1.8.7-p249/ext/readline

and build the extension:

ruby extconf.rb
make
make install

That’s it… heroku should run after that without problems.

I’m using RVM on my Ubuntu box. This way I can nicely install several Ruby and Rails versions next to each other. With Rails 3 however I had a little bit of trouble. When starting the server using

rails server

the server started fine, but as soon as I clicked “About your application’s environment”, I got this error on the console:

LoadError: no such file to load -- openssl

If you’re getting this too the first thing to check is whether these packages are installed:

• openssl
• libssl-dev
• libssl0.9.8

If they are and it anyway doesn’t work you want to go to the source code of your Ruby installation. In my case the source is in this path:

~/.rvm/src/ruby-1.8.7-p249

Now you cd to ext/openssl and run the following commands:

ruby extconf.rb
make
make install

After restarting WEBrick, everything was good:

For a more complete description on how to install Rails 3 on Ubuntu using RVM, checkout this blog post by Rohit Arondekar: Installing Rails 3.0 Beta 3 on Ubuntu using RVM

Today I noticed that List Kung Fu displays the mobile version of the list page when I browse there with regular desktop Internet Explorer. Surfing to the same page with Firefox or Opera on the same machine worked fine and just returned the regular HTML page.

So what’s up?

Simple… Internet Explorer sends a really funny accepts header, none of the formats actually is text/html. Thus HTML is covered with an implicit */*. That’s not awesome (in good IE manner), but not really a problem. A problem it just becomes with something like this in your controller action:

      respond_to do |format|
        format.mobile
        format.html
      end

Since Internet Explorer doesn’t send an explicit accept for text/html, Rails would just default to the first format, in above case format.mobile and then correctly return the mobile version of the view. The fix is easy. Just move format.html to the first position:

      respond_to do |format|
        format.html
        format.mobile
      end

Now */* would default to format.html.

In almost every project you need to save settings for the users of your application. One way to do that is simply adding more and more columns to your user table. If you did that for 10 or more settings you soon will realize that this doesn’t scale very well and the user model gets quickly a lot of attributes.
Another possibility would be to create another model, let’s call it UserPreferences, and create a User has many UserPreferences association. This is a fine solution, but I don’t like it much either because it’s not very flexible. In case you want to add another setting you need to create a migration and so on.

ActiveRecord has many cool features and one them is the ability to serialize a Ruby classes and save it away in an attribute of a model. Actually the example usage the documentation suggests is exactly about user preferences. Now, in the example they’re storing simply a hash, which is fine, but I decided I go ahead and create a class for user preferences:

class UserPreference
 
  attr_accessor :option1, :option2
 
  def initialize
    @option1 = nil
    @option2 = nil
  end
end

In order to save these user preferences in my user model, I added a column prefs:

class User < ActiveRecord::Base
  serialize :prefs, UserPreference
 
  def prefs
    # make sure we always return a UserPreference instance
    if read_attribute(:prefs).nil?
      write_attribute :prefs, UserPreference.new
      read_attribute :prefs
    else
      read_attribute :prefs
    end
  end
 
  def prefs=(val)
    write_attribute :prefs, val
  end
end

As you can see I overrode the getter and setter for the prefs attribute to be able to return always an instance of the UserPreference class. So far so good, by now you can do things like

user = User.find(1)
user.prefs.option1 = "hello world"
user.save!

If you need another setting, you simply can add an attribute to the UserPreference class and use it right away, without the need to create a migration for it.

After finishing that, I thought it would be handy to have these settings available in the user session. I’m using Authlogic, so I just added a method to the create method of the user_sessions controller:

  def create
    @user_session = UserSession.new(params[:user_session])
    @user_session.save do |result|
        [...]
        # load User Preferences into session
        load_user_preferences
        [...]
    end
  end

load_user_preferences looks like this:

  def load_user_preferences
    current_user.prefs.instance_variable_names.each do |v|
      session[v[1..-1].to_sym] = current_user.prefs.instance_variable_get v
    end
  end

Now you have super simple access to the current users settings through the session:

value = session[:option1]

In case some of the code which gets executed for a certain request changes e.g. session[:option1], I added an after_filter which looks like this:

  def save_user_prefs_if_changed
    changed_something = false
    current_user.prefs.instance_variable_names.each do |v|
      key = v[1..-1].to_sym
      unless current_user.prefs.instance_variable_get(v) == session[key]
        current_user.prefs.instance_variable_set v, session[key]
        changed_something = true
      end
    end unless current_user.nil?
 
    current_user.save! if changed_something && current_user
  end

This ensures that changed values in the session do get saved to the users preferences and are available when the user signs in again.

I like this approach because of its flexibility and usage of the session. It’s not ideal when a preference contains a lot of data that you don’t need often. You then wouldn’t like to store that in the session. In that case I was thinking about introducing a naming convention to prevent the preference from being stored in the session. For ListKungFu.com however I didn’t run into this situation yet.

Today I ran into a nasty bug which is only reproducible in Google Chrome. In Firefox the very same code worked perfectly fine.

The code was supposed to work like this: After the user clicked the delete icon, jQuery would send an ajax request to the server, which then would delete the list. In the call back the UI gets updated by removing the list entry element. It’s as simple as that. The HTTP method was set to DELETE to be clean. In Firefox that worked great, in Google Chrome not at all. However you didn’t get a client side error, at least not at first, but a Rails error which would look like this:

Error occurred while parsing request parameters.
Contents:
 
[object Object]
/!\ FAILSAFE /!\  Sat Feb 20 18:56:39 +0100 2010
  Status: 500 Internal Server Error
  undefined method `name' for nil:NilClass
    /home/siebel/.gem/ruby/1.8/gems/activesupport-2.3.5/lib/active_support/whiny_nil.rb:52:in `method_missing'
    /home/siebel/.gem/ruby/1.8/gems/activesupport-2.3.5/lib/active_support/xml_mini/rexml.rb:29:in `merge_element!'
    /home/siebel/.gem/ruby/1.8/gems/activesupport-2.3.5/lib/active_support/xml_mini/rexml.rb:18:in `parse'
    /home/siebel/.gem/ruby/1.8/gems/activesupport-2.3.5/lib/active_support/xml_mini.rb:12:in `__send__'
    /home/siebel/.gem/ruby/1.8/gems/activesupport-2.3.5/lib/active_support/xml_mini.rb:12:in `parse'
    /home/siebel/.gem/ruby/1.8/gems/activesupport-2.3.5/lib/active_support/core_ext/hash/conversions.rb:164:in `from_xml'
    /home/siebel/.gem/ruby/1.8/gems/actionpack-2.3.5/lib/action_controller/params_parser.rb:34:in `parse_formatted_parameters'
    /home/siebel/.gem/ruby/1.8/gems/actionpack-2.3.5/lib/action_controller/params_parser.rb:11:in `call'
    /home/siebel/.gem/ruby/1.8/gems/actionpack-2.3.5/lib/action_controller/session/cookie_store.rb:93:in `call'
    /home/siebel/.gem/ruby/1.8/gems/actionpack-2.3.5/lib/action_controller/failsafe.rb:26:in `call'
    /home/siebel/.gem/ruby/1.8/gems/rack-1.0.1/lib/rack/lock.rb:11:in `call'
    /home/siebel/.gem/ruby/1.8/gems/rack-1.0.1/lib/rack/lock.rb:11:in `synchronize'
    /home/siebel/.gem/ruby/1.8/gems/rack-1.0.1/lib/rack/lock.rb:11:in `call'
    /home/siebel/.gem/ruby/1.8/gems/actionpack-2.3.5/lib/action_controller/dispatcher.rb:114:in `call'
    /home/siebel/.gem/ruby/1.8/gems/actionpack-2.3.5/lib/action_controller/reloader.rb:34:in `run'
    /home/siebel/.gem/ruby/1.8/gems/actionpack-2.3.5/lib/action_controller/dispatcher.rb:108:in `call'
    /home/siebel/.gem/ruby/1.8/gems/rails-2.3.5/lib/rails/rack/static.rb:31:in `call'
    /home/siebel/.gem/ruby/1.8/gems/rack-1.0.1/lib/rack/urlmap.rb:46:in `call'
    /home/siebel/.gem/ruby/1.8/gems/rack-1.0.1/lib/rack/urlmap.rb:40:in `each'
    /home/siebel/.gem/ruby/1.8/gems/rack-1.0.1/lib/rack/urlmap.rb:40:in `call'
    /home/siebel/.gem/ruby/1.8/gems/rails-2.3.5/lib/rails/rack/log_tailer.rb:17:in `call'
    /home/siebel/.gem/ruby/1.8/gems/rack-1.0.1/lib/rack/content_length.rb:13:in `call'
    /home/siebel/.gem/ruby/1.8/gems/rack-1.0.1/lib/rack/handler/webrick.rb:50:in `service'
    /usr/lib/ruby/1.8/webrick/httpserver.rb:104:in `service'
    /usr/lib/ruby/1.8/webrick/httpserver.rb:65:in `run'
    /usr/lib/ruby/1.8/webrick/server.rb:173:in `start_thread'
    /usr/lib/ruby/1.8/webrick/server.rb:162:in `start'
    /usr/lib/ruby/1.8/webrick/server.rb:162:in `start_thread'
    /usr/lib/ruby/1.8/webrick/server.rb:95:in `start'
    /usr/lib/ruby/1.8/webrick/server.rb:92:in `each'
    /usr/lib/ruby/1.8/webrick/server.rb:92:in `start'
    /usr/lib/ruby/1.8/webrick/server.rb:23:in `start'
    /usr/lib/ruby/1.8/webrick/server.rb:82:in `start'
    /home/siebel/.gem/ruby/1.8/gems/rack-1.0.1/lib/rack/handler/webrick.rb:14:in `run'
    /home/siebel/.gem/ruby/1.8/gems/rails-2.3.5/lib/commands/server.rb:111
    /usr/lib/ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
    /usr/lib/ruby/1.8/rubygems/custom_require.rb:31:in `require'
    /home/siebel/projects/Memento/script/server:3
    -e:1:in `load'
    -e:1

Since the server returned a HTTP 500 error, the client side displayed a message to the user that an error occurred. That certainly was ok, but why the hack did Rails throuw an error?

I had to google a while till I found this ticket: Bug in Chromium with GET parameters when doing a POST request

So it looked like something is going wrong when you send URL parameters alongside during a POST, PUT or DELETE. Since I’m using a URL parameter to specify the locale, I first thought that’s the issue: http://localhost:3000/lists/14?locale=en. Sadly removing it didn’t help.
While searching through the code I realized that for non-GET requests I was adding data to the PUT, DELETE, POST URL by this code:

$(document).ajaxSend(function(event, request, settings) {
        settings.data = { SomeParameter: "value" };
});

Once I commented out this one line things started working. I could finally delete the list using Chrome. The question now: How do I send this additional data. Fun thing: I didn’t have to … it was already added by other parts of the code. So the real issue here was that I had two parameters with the same name in my request. This was gracefully handled but Firefox but not by Google Chrome.

I just ran into an interesting warning and since it took me a few minutes to figure it out I thought I share it here.

I’m rendering a partial template like this:

render :partial => 'list_items/list_item', :locals => { :list => @list, :list_items => @list_item}

Now, when running this code I got this deprecation warning:

DEPRECATION WARNING: @list_item will no longer be implicitly assigned to list_item. 
(called from _run_erb_app47views47list_items47_list_item46html46erb_locals_list_list_item_list_items_object 
at /home/stefan/projects/Memento/app/views/list_items/_list_item.html.erb:1)

The problem here was that in the partial I’m using the local variables are named list and list_item, in the render call however I’m passing in list and list_items. Everything still works because rails implicitly assigns @list_item to the local variable list_item. This is what the warning says…

So the fix is simply removing the additional “s”.

render :partial => 'list_items/list_item', :locals => { :list => @list, :list_item => @list_item}

Not specifically hard but yet another prove that taking “a close look” at your own code is always difficult ;-) I bet a peer what have see the problem in a sec …

Learning Rails on a real project (ListKungFu.com) is great fun and you’ll find out everyday something else which makes Rails the awesome framework it is. In the beginning of cause, that are rather small but unbelievable convenient things, in this case that is: The content_for helper command.

In an application as simple as List Kung Fu most views are structured like that:

So we have the ListKungFu logo, a profile and a logout link in the header and some notes in the footer. All this you typically would find in a layout file (application.html.erb) because it’s likely you wanna display these elements on each page of your application. The more page specific data is rendered using a template, in this case show.html.erb.

List Kung Fu uses a fair amount of Javascript. My first approach was putting everything in a single .js file and loading it in application.html.erb. That’s ok for the beginning but becomes pretty soon pretty ugly. First, you end up with one big Javascript file which is not really nice for maintaining, second and that’s much worse: The user’s browser is loading the Javascript code for the complete application even though just a fraction of it is used per page.

Obviously the first thing you wanna do is splitting up the big Javascript file. My splitting strategy goes like this:

• Code which is used all over the application and which might be useful even in different applications I put into application.js. This file in included in the layout file.
• Second, I created a file called listkungfu.js containing Javascript which is also used over the whole application but is more specific and therefore unlikely to be reused in another application.
• All Javascript code which is specific to just a small part of a application, e.g. a single view, I put into a separate file. Following above example there is for instance a file called lists_show.js for the show.html.erb view.

All we have to do now is including application.js and listkungfu.js in the layout file and lists_show.js in the view template.

<%=javascript_include_tag 'lists_show' %>

Done.

Hm… after loading the view in the browser and looking at the generated HTML you might not be satisfied a 100%. The Javascript files included in application.html.erb nicely line up at the bottom of the page, but lists_show.js is loaded somewhere in the middle of the HTML.

So, how do we move it down? You might have guessed it: content_for to the rescue!

Let’s replace above code with:

<% content_for :addtional_scripts do %>
    <%=javascript_include_tag 'lists_show' %>
<% end %>

And yield the content at the end of the layout file:

    <%= javascript_include_tag 'application', 'listkungfu' %>
    <%= yield(:addtional_scripts) %>
  </body>
</html>

After reloading the view in the browser you’ll find the view specific Javascript file loaded after the two general files.

Very cool!

content_for can be used for a dozen other things, too. Think about having a side bar defined in the layout displaying view specific information, etc…

When you start using Rails you pretty soon start using partials for saving forms in an extra template in order to re-use them in the different views of a CRUD interface.

If you go just a little bit further you’ll find out that partials are also very useful when building Ajax applications with Rails. Often when you do an Ajax call the one thing you want to do in the callback is updating the DOM of the page.

When the user clicks on the plus-button in above user interface, a form will popup which allows him to add another list. Once the form is filled in it will be send to the server using an Ajax call. Finally in the callback the new list will be added to the DOM.
So there are two situations when you want to render a list:

1. When the page with all available lists is rendered.
2. When the user adds a new list.

This sounds like the perfect use-case for a partial, so let’s create one. For above user interface the ERB template could look like this:

1
2
3
4
5
6
7
8
9
10

<li id="list_<%=list.id%>" class="list">
    <div>
        <h1><%= list.title == '' ? '<em>enter a title</em>' : list.title  %></h1>
        <div class="summary">
          <%= pluralize list.list_items.length, 'item' %>
          , <%= pluralize list.list_items_done, 'item' %> done.<br/>
          Last updated <%= distance_of_time_in_words list.updated_at, Time.now %> ago
        </div>
    </div>
</li>

We save this code in a file named _list.html.erb.

In the view which generates the complete list of lists, we call the partial from within an each loop (index.html.erb):

1
2
3

<%- @lists.each do |list| -%>
  <%= render :partial => 'lists/list', :object => list %>
<%- end -%>

If you look back to the partial code in _list.html.erb, you’ll notice a local variable being used called list. By adding the parameter :object => list to the render call in index.html.erb we make this variable available in the partial.

Let’s finally have a look at the view for the Ajax callback. It’s saved in create.js.erb and can be as easy as this:

1
2

    var new_list = "<%=escape_javascript(render :partial => 'lists/list', :object => @list)%>";
    $("#all_lists").prepend(new_list);

All we do is assigning the list-HTML to a Javascript variable. For this we need to wrap the render call into an escape_javascript. Next we prepend this list to the ul-element using jQuery. That’s it.

Even though this is not a complete code example I hope it’ll point into the right direction. Please post questions as comments to this post.

Already around the end of October Infoether, a Rails Consulting company, released a white paper about the Ruby and Rails ecosystem.
The target audience are non technical executives or business men who want to know more about Ruby and Rails in order to be able to make informed decisions in near future. Although programmers are not exactly the target audience the paper can serve as a great summary about ecosystem which has emerged around Ruby and Rails. From the table of contents:

• Ruby Runtimes
• Ruby Frameworks
• Community: Conferences, Training, Publishing
• Consulting
• Implementation tools: databases, Application Management, Deployment, Hosting (Code & Applications)
• Developer & Analysis Tools

Here and there I got the feeling the information is not 100% complete, specially when it comes to hosting companies outside the US (e.g. UK based Brightbox is missing). Anyway it’s a nice, high level, summary about what going on in Ruby and Rails.

Here some good advises how to install Rails on Ubuntu 9.04: Installing Ruby on Rails on Debian/Ubuntu

After I finished the installation I created a new app and tried to start up the development server. That failed with below message:

/usr/lib/ruby/gems/1.8/gems/rails-2.0.2/lib/initializer.rb:159:in
`require_frameworks': no such file to load -- openssl (RuntimeError)

To fix this you need to install OpenSSL:

sudo apt-get install openssl
 
sudo apt-get install libopenssl-ruby

After that WEBrick started up without issues and served the standard welcome page.

The past few weeks I’ve been playing around with the Google Web Toolkit and I’m pretty persuaded that it’s the best choice for implementing Rich Internet Applications. Google itself used it for the Google Waves front-end and for a complete re-write of the Google Adsense admin application. There are other companies out there using GWT in an enterprise environment ,e.g. Lombardi Blueprint.

How to communicate with the server?

GWT supports two ways to communicate with the server. The first is GWT-RPC which requires a Java server side because you need to implement a Servlet. Now this sounds more painful than it is. In fact it’s pretty straight forward. The really nice thing about it is, that you don’t have to think about serialization / deserialization of your objects. The Google Web Toolkit will take care of that.
The second approach is rather classical and that is to send and receive JSON or XML. Clearly this enables you to use whatever server side framework and that is great. The downside of this flexibility is that you have to take care of serialization by yourself. Luckily Ryan Dewsbury provided a code generator in his GWT Applications Book which automatically generates the serialization code for you. Check out the code on his webpage.

Ok cool, so that means I should take which framework?

There are so many web frameworks out there that it’s not hard to loose completely overview. For my personal preference I can narrow down the number of frameworks to consider to these two: Ruby on Rails and Grails, the Java web application framework based on the Groovy programming language.

Ruby on Rails is currently by far the most popular web application framework. What I really love about the framework is that you get all in one. A descend MVC architecture, Templates, easy REST, testability, database migrations, a very healthy and active community (which is really really important), Ruby, hundreds of plugins, you name it. The framework has gone through two major iterations and can be considered business ready. Companies like Thoughtworks generate a big part of their annual revenue with Ruby and Rails projects. There are great hosting companies (Engine Yard, BrightBox, Heroku to mention just a few), the deployment became much easier than in the early days and when it comes to performance you have a whole bunch of great choices to improve it (check out this series of screencasts).

Grails uses Groovy as language. Both Grails and Groovy look very similar to Rails and Ruby. Grails is still pretty young but I believe in the coming years we will see a lot more Grails applications. One reason for this is the very tight integration with Java. So are for example most valid Java programs also valid Groovy programs. This makes it really easy for Java developers to try it out. Also Grails builds up on proven Java technologies like Hibernate, SiteMesh and Spring. So though Grails might still have some quirks, the technologies underneath are out there for quite a while and used in thousands of applications. This also makes it easier to re-use existing code and infrastructure and sort of gradually move towards a more agile environment. It’s really made simple to use technologies like JMQ, JMX or libraries like Lucene.
Despite Grails is build upon things you know from JEE you don’t have to go through configuration hell. Grails puts Convention over Configuration and sets useful defaults just like Rails does.

Conclusion

Ruby on Rails is the original, it’s proven and you finally don’t have to worry any more about the Java technology stack. The only downside in terms of using GWT on the front-end is that you can’t use GWT-RPC.

Grails is great if you need to integrate with Java. Because of the big Java community we will see more talk about Grails in future. It’s also a good choice in combination with GWT. There’s a plugin for GWT and also AppEngine.

All in all I believe you don’t do anything from with either framework. It’s about personal preference. I’d like to see some performance comparison between GWT-RPC and the JSON/XML approach with generated serializer though. Your choice might be influenced by existing systems or libraries you have to use. This is true in both directions. With JRuby becoming a more and more mature Ruby implementation, Java integration is not anymore just a dream, although it’s not as tight as in Groovy / Grails.

Update:
Mastering Grails – Grails in the Enterprise
Proof of Concept : Learning Groovy, Grails, JRuby, and Rails

Textmate seems to be the first choice as editor / IDE for Rails application development. Unfortunately Textmate is just available on Mac OS X.

Luckily there’s hope, at least if you’re using Linux. With just a few commands you can pimp up your Gedit, so that it has much of the functionality of Textmate (and that completely for free).

First you want to install some of the standard plugins, which don’t get installed by default:

sudo apt-get install gedit-plugins

Now, download Gmate, unpack it and execute:

sh ./install.sh

That’s it. Checkout Gmate’s webpage for more details.

Google Web Toolkit @ Google I/O
14 Videos from LA Ruby 2009: Some Great Weekend Watching