rails and ajax

Rails and AjaxMarch 16, 2006

Rails and Ajax

• Quick history of Ajax• Why Ajax? Why not?• Rails Ajax helpers• RJS templates• Graceful degradation• Ajax scaffolding

Ye Olde Web: HTTP RequestGET /default.asp?query=fun+blinking+animated+gif+horizontal+rule

Ye Olde Web: HTTP Response

HTTP/1.0 200 OKDate: Fri, 31 Dec 1993 12:34:56 GMTContent-Type: text/htmlContent-Length: 954

<html><body><h1>Your search results!</h1>...

</body></html>

Full Page Refresh

• “Clunky” compared to desktop apps.• Unnecessary bandwidth.

Solution?

Innovation: Thank… Microsoft?• 1997 – Remote Scripting via Java applet.• 1999 – XMLHttpRequest object in IE5.• 2000 – Mozilla supports XHR.• 2004 – Safari supports XHR.• 2004 – Opera supports XHR.• 2005 – Jesse James Garret coins “Ajax.”

Reference: http://aspadvice.com/blogs/jeffc/archive/2005/10/26/13440.aspxCoining the Term: http://www.adaptivepath.com/publications/essays/archives/000385.php

Why “Ajax?”

• http://www.adaptivepath.com/publications/essays/archives/000385.php

• Asynchronous JavaScript and X(HT)ML

http://www.adaptivepath.com/images/publications/essays/ajax-fig1.png

© 2006 Adaptive Path, LLC

Rails and Ajax


Reasons for Ajax

• Quicker response.• Less bandwidth• Additional interactivity.

– Autocomplete fields.– Live search.– Upload progress bar.

• Most importantly…

Buzzword compliance!

http://headrush.typepad.com/photos/uncategorized/techbuzzwords_21.jpg

Reasons against Ajax

• Requires JavaScript.– Accessibility.

• Bookmarking problem.

Reasons against Ajax

• Both of these can be addressed.– Degrade gracefully.– Take care when choosing when to use Ajax.

Rails and Ajax


Rails Ajax Helpers

• link_to_remote• form_tag_remote• sortable_element

Ajax Helpers Example!

More Rails Ajax Helpers!

• observe_field• periodically_call_remote• auto_complete_field• remote_function

File Upload Progress

• http://sean.treadway.info/demo/upload/

Rails and Ajax


HTML Template

• RHTML– Embedding Ruby in HTML for views

XML Template

• RXML– Building XML with Ruby

xml.instruct! :xml, :version=>"1.0" xml.instruct! :rss, :version=>"2.0" xml.channel{

for hat in @hatsxml.hat do

xml.title(hat.name)xml.description(hat.description)

endend

}

JS Template

• RJS– Slated for Rails 1.1.– Currently available in Edge Rails.

• rake freeze_edge• rake update_javascripts

How does RJS work?

• Template is passed a page object.• Method calls are translated to JS.

RJS Example!

Inline RJSclass AdminController < ApplicationController

def update_usersrender :update do |page|

page.replace_html 'user_list',:partial => 'user',:collection => @users

page.visual_effect :highlight, 'user_list'end

endend

More RJS Examplespage.alert('Hello, world!')page.redirect_to(:action=>'user_signup')

page.assign('myVar', 42)page.call('doJavascriptMagic', 'paramXYZ', 23)

page.show('extra_help')page.hide('extraneous_information')page.toggle('user_detail')

Rails and Ajax


Graceful Degradation

• Accesibility / Usability.• RESTful APIs.


<% if request.xhr? %>You arrived here via an XHR!Go nuts with it.

<% else %>You got here through astandard request.

<% end>


def new# Creation code here

if request.xhr?render :partial => “item”

elseredirect_to :action => “list”

endend

Rails and Ajax


Ajax Scaffolding

• http://ajaxscaffold.height1percent.com/– gem install ajax_scaffold_generator– ruby script/generate ajax_scaffold Widget

Ajax Scaffolding Example!

Question and Answer!

rails and ajax

Documents