As Phil Karlton said, “there are only two hard things in Computer Science: cache invalidation and naming things.” Despite enormous advances in the field of web development over the last five years, it remains difficult to use caching to allow sites to scale for expanding user bases. Fortunately, the last few years have also seen the rise of JavaScript libraries that take a lot of the pain out of client-side programming. In this talk, we’ll explore techniques for making your sites feel faster, without resorting to complicated caching schemes, while maintaining strict separation of content, style, and behavior. Associated code is available at http://github.com/dce/dbdb

1. Optimizing
Perceived Performance
Monday, March 23, 2009

2. About Me
Monday, March 23, 2009

3. My Startup
Monday, March 23, 2009

4. DBDB
Monday, March 23, 2009

5. http://github.com/
dce/dbdb
Monday, March 23, 2009

6. http://github.com/
dce/dbdb
public/javascripts/application.js
Monday, March 23, 2009

7. def bagfactor
sleep(2)
rand(50) / 10.0
end
Monday, March 23, 2009

8. It could happen
to you
Monday, March 23, 2009

9. First Impressions
Monday, March 23, 2009

10. Up to...
0.1 second instantaneous
1 second responsive
10 seconds slow
> 10 seconds gone
– About Face 3
Monday, March 23, 2009

11. Bring in the AJAX
Monday, March 23, 2009

12. Some
Definitions
Monday, March 23, 2009

13. Progressive
Enhancement
Monday, March 23, 2009

14. Unobtrusive
Javascript
Monday, March 23, 2009

15. HIJAX
Monday, March 23, 2009

16. jQuery
Monday, March 23, 2009

17. class DbsController < ApplicationController
def show
@db = Db.find(params[:id])
respond_to do |format|
format.html
format.js do
render :partial => quot;profilequot;, :locals => { :db => @db }
end
end
end
end
Monday, March 23, 2009

18. $(quot;.db-list aquot;).click(function() {
link = $(this);
$.ajax({url: $(this).attr(quot;hrefquot;),
success: function(src) {
link.parents(quot;dtquot;).after(src);
link.unbind('click').click(function() {
$(this).parents(quot;dtquot;).next(quot;ddquot;).toggle();
return false;
})
}
});
return false;
});
Monday, March 23, 2009

19. Make It Snappy
Monday, March 23, 2009

20. $(quot;.db-list aquot;).click(function() {
link = $(this);
link.parents(quot;dtquot;).after('<dd class=quot;spinnerquot;></dd>');
link.unbind(quot;clickquot;).click(function() {
link.parents(quot;dtquot;).next(quot;ddquot;).slideToggle();
return false;
});
$.ajax({url: link.attr(quot;hrefquot;),
success: function(src) {
link.parents(quot;dtquot;).next(quot;ddquot;).replaceWith(src);
}
});
return false;
});
Monday, March 23, 2009

21. Take Advantage
of Downtime
Monday, March 23, 2009

22. Monday, March 23, 2009

23. $(quot;.db-list aquot;).each(function() {
$(this).parents(quot;dtquot;).after(quot;<dd class=quot;spinnerquot;></dd>quot;)
.next(quot;ddquot;).hide();
});
$(quot;.db-list aquot;).click(function() {
$(this).parents(quot;dtquot;).next(quot;ddquot;).slideToggle();
return false;
});
$(quot;.db-list a:firstquot;).each(function() {
$(this).loadContentInOrder();
});
Monday, March 23, 2009

24. jQuery.fn.loadContentInOrder = function() {
link = this;
$.ajax({url: this.attr(quot;hrefquot;),
success: function(src) {
link.parents(quot;dtquot;).next(quot;ddquot;).replaceWith(src).next(quot;dtquot;)
.find(quot;aquot;).loadContentInOrder();
}
});
};
Monday, March 23, 2009

25. Isolate Bottlenecks
Monday, March 23, 2009

26. Monday, March 23, 2009

27. JSON
Monday, March 23, 2009

28. { quot;dbquot;: {
quot;idquot;: 13,
quot;namequot;: quot;Tyler Hansbroughquot;,
quot;occupationquot;: quot;UNC Basketball Playerquot;,
quot;bagfactorquot;: 1.3,
quot;avatar_idquot;: 61
}
}
Monday, March 23, 2009

29. class DbsController < ApplicationController
def show
@db = Db.find(params[:id])
respond_to do |format|
format.html
format.js { ... }
format.json do
render :json => { :bagfactor => @db.bagfactor }
end
end
end
end
Monday, March 23, 2009

30. $(quot;img.spinner:firstquot;).each(function() {
$(this).loadBagfactor();
});
jQuery.fn.loadBagfactor = function() {
img = this;
$.ajax({url: this.parents(quot;ddquot;).prev(quot;dtquot;)
.find(quot;aquot;).attr(quot;hrefquot;),
data: { format: quot;jsonquot; }, dataType: quot;jsonquot;,
success: function(db) {
img.replaceWith(db.bagfactor);
$(quot;img.spinner:firstquot;).loadBagfactor();
}
});
};
Monday, March 23, 2009

31. The best solution?
Monday, March 23, 2009

32. The worst solution?
Monday, March 23, 2009

33. New Problem
Monday, March 23, 2009

34. PYTHONISTAS
It's my way or f--k you.
Monday, March 23, 2009

35. Remove Blocking
Operations
Monday, March 23, 2009

36. The Usual Way
•Hidden iFrame
•Second form w/ iFrame as
target
•Server sends back JS to
update page
Monday, March 23, 2009

37. Something
Sorta Nuts
Monday, March 23, 2009

38. $(quot;a#ajax-uploadsquot;).click(function() {
$(quot;input[type=file]quot;).replaceWith(
'<iframe src=quot;/avatars/newquot;></iframe>');
return false;
});
Monday, March 23, 2009

39. <% form_for @avatar, :html => { :multipart => true } do |f| %>
<%= f.file_field :image %>
<% end %>
<% javascript_tag do %>
$(quot;inputquot;).change(function() {
$(this).hide().after('<%= image_tag quot;spinner.gifquot; %>')
.parents('form').submit();
});
<% end %>
Monday, March 23, 2009

40. <%= image_tag @avatar.image.url(:thumb) %>
<% javascript_tag do %>
$(quot;formquot;, top.document).append(
'<%= hidden_field_tag quot;db[avatar_id]quot;, @avatar.id %>');
<% end %>
Monday, March 23, 2009

41. Cool? Lame?
Monday, March 23, 2009

42. Conclusion
Monday, March 23, 2009

43. Consider perceived
performance
Monday, March 23, 2009

44. Write your own JS
Monday, March 23, 2009

45. Thank You
http://speakerrate.com/events/64
Monday, March 23, 2009

46. Questions?
Monday, March 23, 2009