Recommended
More Related Content
What's hot
What's hot (20)
Similar to Effortless In-Place AJAX Reloading with Ruby on Rails
Similar to Effortless In-Place AJAX Reloading with Ruby on Rails (20)
Recently uploaded
Recently uploaded (20)
Effortless In-Place AJAX Reloading with Ruby on Rails
- 2. Rico Sta. Cruz Cofounder, Sinefunc, Inc.
- 6. We &heart; making people's lives easier through good web apps.
- 8. Things that web apps do that seem really difficult to do but really is dirt easy.
- 11. Challenge:
- 13. “You know, like Twitter, or Gmail.”
- 18. You may think it's difficult.
- 19. FUCK NO
- 21. Like this:
- 23. $('a').live('click', function () { var href = $(this).attr('href');
- 24. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show();
- 25. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) {
- 26. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { $('body').html(html);
- 27. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { $('body').html(html); $('#loading').hide(); }); });
- 28. Voila!
- 29. ! “But it just loads everything. That's cheating!”
- 30. Optimization
- 31. <head> <script src="/js/script.js"></script> <link rel="stylesheet" href="/css/style.css" /> </head> <body> <div id="top">Your site name and nav here</div> <%= yield %> </body>
- 32. <% unless request.xhr? %> <head> <script src="/js/script.js"></script> <link rel="stylesheet" href="/css/style.css" /> </head> <% end %> <body> <% unless request.xhr? %> <div id="top">Your site name and nav here</div> <% end %> <%= yield %> </body>
- 33. <% unless request.xhr? %> <head> <script src="/js/script.js"></script> <link rel="stylesheet" href="/css/style.css" /> </head> <% end %> <body> <% unless request.xhr? %> <div id="top">Your site name and nav here</div> <% end %> <%= yield %> “Hey, don't render this cruft when the </body> page is loaded via AJAX.”
- 35. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { $('body').html(html); $('#loading').hide(); }); });
- 36. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { var $new = $('<div>').html(html); $('#content').html($new.find('#content')); $('#sidebar').html($new.find('#sidebar')); $('#loading').hide(); }); });
- 37. Awesome.
- 38. ! “What about the back button?”
- 39. Hash
- 40. jQuery.hashlisten github.com/sinefunc/jquery.hashlisten 2kb of simplicity
- 41. $('a').live('click', function () { var href = $(this).attr('href'); window.location.hash = '#!' + href; return false; });
- 42. $('a').live('click', function () { var href = $(this).attr('href'); window.location.hash = '#!' + href; return false; }); $.hashListen('!(.*)', function (href) {
- 43. $('a').live('click', function () { var href = $(this).attr('href'); window.location.hash = '#!' + href; return false; }); $.hashListen('!(.*)', function (href) { Every time the hash changes to this, do this.
- 44. $('a').live('click', function () { var href = $(this).attr('href'); window.location.hash = '#!' + href; return false; }); $.hashListen('!(.*)', function (href) { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { var $new = $('<div>').html(html); $('#content').html($new.find('#content')); $('#sidebar').html($new.find('#sidebar')); $('#loading').hide(); }); });
- 45. Sweet!
- 46. Next challenge:
- 48. “Oh. √£÷¡*.”
- 49. Attempt 1: The Paul Irish method
- 50. ? “Can that even be done in HAML?”
- 51. Kinda—
- 52. ! Not in a straight-forward way. ...unless you make a helper!
- 53. %html %head %title= 'My site' %body ...stuff
- 54. != cc_html do %head %title= 'My site' %body ...stuff
- 55. def cc_html(options={}, &blk) attrs = options.map { |(k, v)| " #{h k}='#{h v}'" }.join('') [ "<!--[if lt IE 7 ]> <html#{attrs} class='ie6'> <![endif]-->", "<!--[if IE 7 ]> <html#{attrs} class='ie7'> <![endif]-->", "<!--[if IE 8 ]> <html#{attrs} class='ie8'> <![endif]-->", "<!--[if IE 9 ]> <html#{attrs} class='ie9'> <![endif]-->", "<!--[if (gt IE 9)|!(IE)]><!--> <html#{attrs}> <!--<![endif]-->", capture_haml(&blk).strip, "</html>" ].join("n") end
- 56. Good!
- 57. Better way
- 59. browser.ie6? #=> false browser.webkit? #=> true browser.android? #=> true # Helper def browser UserAgent.new(env['HTTP_USER_AGENT']) end
- 60. class UserAgent def initialize(ua_string) @ua = ua_string end def webkit?() product?('AppleWebKit'); end def chrome?() product?('Chrome'); end def ie6?() detail?(/^MSIE 6/, 'Mozilla'); end # ... def product?(spec); !! @ua.match(spec); end # ... End
- 61. browser.body_class #=> 'webkit safari mac' #=> 'ie ie6 windows' #=> 'webkit android'
- 62. class UserAgent # ... def body_class (%w(webkit chrome ios gecko opera ie linux) + %w(ipad windows mac ie6 ie7 ie8 ie9)).map do |aspect| aspect if self.send :"#{aspect}?" end.compact.join(' ') end end
- 63. %html %head %title= 'My site' %body ...stuff
- 64. %html{class: browser.body_class} %head %title= 'My site' %body ...stuff
- 65. %html{class: browser.body_class} %head %title= 'My site' %body - if browser.ie6? %p Please upgrade your prehistoric browser! ...stuff
- 66. Effect:
- 67. <html class='mac webkit chrome'> /* CSS: Fix chrome's button padding bug */ button { padding: 3px; } .chrome button { padding: 1px 2px; }
- 68. <html class='windows ie ie6'> /* CSS: Fix the double margin bug */ #posts { margin-left: 10px; } .ie6 #posts { margin-left: 5px; }
- 70. <html class='windows ie ie6'> /* CSS: Fix the double margin bug */ #posts { margin-left: 10px; .ie6 & { margin-left: 5px; } }
- 71. twitter.com/rstacruz github.com/rstacruz sinefunc.com