Post on 19-Jan-2015
description
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
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
• Quick history of Ajax• Why Ajax? Why not?• Rails Ajax helpers• RJS templates• Graceful degradation• Ajax scaffolding
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
• Quick history of Ajax• Why Ajax? Why not?• Rails Ajax helpers• RJS templates• Graceful degradation• Ajax scaffolding
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
• Quick history of Ajax• Why Ajax? Why not?• Rails Ajax helpers• RJS templates• Graceful degradation• Ajax scaffolding
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
• Quick history of Ajax• Why Ajax? Why not?• Rails Ajax helpers• RJS templates• Graceful degradation• Ajax scaffolding
Graceful Degradation
• Accesibility / Usability.• RESTful APIs.
Graceful Degradation
<% if request.xhr? %>You arrived here via an XHR!Go nuts with it.
<% else %>You got here through astandard request.
<% end>
Graceful Degradation
def new# Creation code here
if request.xhr?render :partial => “item”
elseredirect_to :action => “list”
endend
Rails and Ajax
• Quick history of Ajax• Why Ajax? Why not?• Rails Ajax helpers• RJS templates• Graceful degradation• Ajax scaffolding
Ajax Scaffolding
• http://ajaxscaffold.height1percent.com/– gem install ajax_scaffold_generator– ruby script/generate ajax_scaffold Widget
Ajax Scaffolding Example!
Question and Answer!