Page Caching Resurrected:
Ben Sco eld – Viget Labs
Sunday, March 22, 2009

Page Caching Resurrected:
A Fairy Tale
Ben Sco eld – Viget Labs
Sunday, March 22, 2009

I’m a Rails guy
Sunday, March 22, 2009

and this is a Rails talk
Sunday, March 22, 2009

but this isn’t just for Rails
Sunday, March 22, 2009

the story
Sunday, March 22, 2009

Sunday, March 22, 2009

page caching
Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

class PigsController
caches_page :show
def show
@pig = Pig.find(params[:id])
end
def update
@pig = Pig.find(params[:id])
@pig.update_attributes(params[:pig])
expire_page :action => :show
end
end
Sunday, March 22, 2009

Standard 1
Page 3000
requests per second
Sunday, March 22, 2009

public
dynamic
content
Sunday, March 22, 2009

action caching
Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

class PigsController
require_login :show
caches_action :show
def show
@pig = Pig.find(params[:id])
end
def update
@pig = Pig.find(params[:id])
@pig.update_attributes(params[:pig])
expire_action :action => :show
end
end
Sunday, March 22, 2009

Standard 1
Action 500
Page 3000
requests per second
Sunday, March 22, 2009

dynamic
content
Sunday, March 22, 2009

fragment caching
Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

<% cache(:key => 'index:piglist') do %>
<ul id=\"pig-list\">
<% @pigs.each do |pig| %>
<li>
<%= image_tag pig.house.photo %>
<%= h pig.name %>
</li>
<% end %>
</ul>
<% end %>
Sunday, March 22, 2009

class PigsController
# ...
def update
@pig = Pig.find(params[:id])
@pig.update_attributes(params[:pig])
expire_fragment :key => 'index:piglist'
end
end
Sunday, March 22, 2009

Standard 1
Fragment 20
Action 500
Page 3000
requests per second
Sunday, March 22, 2009

efficiency
Sunday, March 22, 2009

the idea
Sunday, March 22, 2009

Rails 2.3
Sunday, March 22, 2009

hello, metal
Sunday, March 22, 2009

class BigBadWolf
def self.call(env)
if env[\"PATH_INFO\"] =~ /^\\/threaten/
[
200,
{\"Content-Type\" => \"text/html\"},
\"Little pig, little pig, let me in!\"
]
else
[
404,
{\"Content-Type\" => \"text/html\"},
\"Not Found\"
]
end
end
end
Sunday, March 22, 2009

high-performance endpoints
Sunday, March 22, 2009

AJAX
Sunday, March 22, 2009

so...
Sunday, March 22, 2009

javascript
Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

<script type=\"text/javascript\" charset=\"utf-8\">/*<![CDATA[*/
Event.observe(window, \"load\", function() {
Behaviors.onLoad();
Behaviors.setLoggedIn();
Login.setup();
if ($(\"login\") && $(\"login-form\")) {
Event.observe('login', 'keydown', function(ev) {
if (ev.keyCode == 13) { Login.submit(); }
});
}
});
Login.auth = function(login, password) {
document.cookie = 'login=' + login + '; path=/account/authenticate; secure; ...
document.cookie = 'password=' + password + '; path=/account/authenticate; ...
el = $$('body').first();
if (el) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = \"https://secure.hulu.com/account/authenticate\" + '?' + ...
el.appendChild(script);
}
}
/*]]>*/</script>
Sunday, March 22, 2009

<ul id=\"logged-in-nav\" class=\"usernav\" style=\"display:none\">
<li id=\"welcome-username\" class=\"first\">
Welcome
</li>
<li>
<a href=\"/profile\" class=\"utility-link\">Profile</a>
</li>
<li>
<a href=\"/profile/queue\" class=\"utility-link\" id=\"your-queue-link\">Queue</a>
</li>
<li class=\"sign-out-link\">
<a href=\"#\" id=\"top-nav-sign-out\" onclick=\"new Ajax.Request(...)\">Sign Out</a>
</li>
</ul>
<ul id=\"logged-out-nav\" class=\"usernav\" style=\"display:none\">
<li class=\"first sign-out-link\">
<a class=\"utility-link\" href=\"#\" id=\"login-link\"
onclick=\"Login.show($('top-login-form')); return false;\">Login</a>
</li>
<li class=\"signin-border-left\">
<a href=\"/users/forgot_password\" class=\"utility-link\">Forgot Password?</a>
</li>
<li class=\"signin-border-left\">
<a href=\"/signup\" class=\"utility-link\">Sign Up</a>
</li>
</ul>
Sunday, March 22, 2009

<noscript>
<ul class=\"nojs usernav\">
<li>
Please <a href=\"/support/\">enable javascript</a> to log in.
</li>
</ul>
</noscript>
<div id=\"top-login-form\" class=\"usernav login-form\" style=\"display:none\">
<form action=\"https://secure.hulu.com/account/authenticate\"
method=\"get\" name=\"login-form\" onsubmit=\"Login.submit(this); return false;\">
<span class=\"login-status\"></span>
<input id=\"login\" class=\"active login\" type=\"text\"
style=\"display: none;\" name=\"username\"/>
<input id=\"password\" class=\"active password\" type=\"password\"
style=\"display: none;\" name=\"password\"/>
<input class=\"inactive dummy login\" type=\"text\" value=\"username\"
name=\"dummy_login\" />
<input class=\"inactive dummy\" type=\"text\" value=\"password\" name=\"dummy_password\" />
<input alt=\"Login\" class=\"login-submit\"
src=\"http://static.hulu.com/images/btn-signin-small.gif?1237361096\"
style=\"width: 39px; height: 20;\" type=\"image\" />
<a href=\"#\"><img alt=\"Cancel\" border=\"0\" class=\"hover-me\" height=\"20\"
id=\"btn-x.gif123741536309506\" onclick=\"Login.cancel();return false\"
src=\"http://static.hulu.com/images/btn-x.gif?1237361096\" width=\"18\" /></a>
</form>
<a href=\"/signup\" class=\"utility-link\">Sign Up</a>
</div>
Sunday, March 22, 2009

<ul id=\"logged-in-nav\" class=\"usernav\" style=\"display:none\">
<li id=\"welcome-username\" class=\"first\">
Welcome
</li>
<li>
<a href=\"/profile\" class=\"utility-link\">Profile</a>
</li>
<li>
<a href=\"/profile/queue\" class=\"utility-link\" id=\"your-queue-link\">Queue</a>
</li>
<li class=\"sign-out-link\">
<a href=\"#\" id=\"top-nav-sign-out\" onclick=\"new Ajax.Request(...)\">Sign Out</a>
</li>
</ul>
<ul id=\"logged-out-nav\" class=\"usernav\" style=\"display:none\">
<li class=\"first sign-out-link\">
<a class=\"utility-link\" href=\"#\" id=\"login-link\"
onclick=\"Login.show($('top-login-form')); return false;\">Login</a>
</li>
<li class=\"signin-border-left\">
<a href=\"/users/forgot_password\" class=\"utility-link\">Forgot Password?</a>
</li>
<li class=\"signin-border-left\">
<a href=\"/signup\" class=\"utility-link\">Sign Up</a>
</li>
</ul>
Sunday, March 22, 2009

Sunday, March 22, 2009

hulu is insane
don’t do it like they do
Sunday, March 22, 2009

<script type=\"text/javascript\" charset=\"utf-8\">/*<![CDATA[*/
Event.observe(window, \"load\", function() {
Behaviors.onLoad();
Behaviors.setLoggedIn();
Login.setup();
if ($(\"login\") && $(\"login-form\")) {
Event.observe('login', 'keydown', function(ev) {
if (ev.keyCode == 13) { Login.submit(); }
});
}
});
Login.auth = function(login, password) {
document.cookie = 'login=' + login + '; path=/account/authenticate; secure; ...
document.cookie = 'password=' + password + '; path=/account/authenticate; ...
el = $$('body').first();
if (el) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = \"https://secure.hulu.com/account/authenticate\" + '?' + ...
el.appendChild(script);
}
}
/*]]>*/</script>
Sunday, March 22, 2009

<script type=\"text/javascript\" charset=\"utf-8\">/*<![CDATA[*/
Event.observe(window, \"load\", function() {
Behaviors.onLoad();
Behaviors.setLoggedIn();
Login.setup();
if ($(\"login\") && $(\"login-form\")) {
Event.observe('login', 'keydown', function(ev) {
if (ev.keyCode == 13) { Login.submit(); }
});
}
});
Login.auth = function(login, password) {
document.cookie = 'login=' + login + '; path=/account/authenticate; secure; ...
document.cookie = 'password=' + password + '; path=/account/authenticate; ...
el = $$('body').first();
if (el) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = \"https://secure.hulu.com/account/authenticate\" + '?' + ...
el.appendChild(script);
}
}
/*]]>*/</script>
Sunday, March 22, 2009

the* right way
*a
Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

the standard approach
Sunday, March 22, 2009

class ItemsController < ApplicationController
def index
@user = User.find_by_login(params[:user])
@items = Item.released_on(params[:date])
end
end
Sunday, March 22, 2009

class Item < ActiveRecord::Base
has_many :pulls, :dependent => :destroy
named_scope :released_on, lambda { |date|
date ||= Item.maximum(:released_on)
{:conditions => {:released_on => date}, :order => 'name ASC'}
}
def pulled_by?(user)
x = user.nil? ? false : !self.pulls.by_user(user.id).empty?
end
end
Sunday, March 22, 2009

<h1>Releases</h1>
<ul>
<% @items.each do |item| %>
<% content_tag_for :li, item do %>
<%= image_tag 'cover.png', :alt => h(item.name), :class => 'cover' %>
<%= image_tag('badge.png', :alt => 'pulling',:class => 'badge')
if item.pulled_by?(@user) %>
<p><%= h item.name %></p>
<% end %>
<% end %>
</ul>
Sunday, March 22, 2009

the hybrid approach
Sunday, March 22, 2009

class ItemsController < ApplicationController
caches_page :index
def index
@items = Item.released_on(params[:date]).all
end
end
Sunday, March 22, 2009

require(File.dirname(__FILE__) + \"/../../config/environment\") unless
defined?(Rails)
class PullList
def self.call(env)
if env[\"PATH_INFO\"] =~ /^\\/pulls/
date = '2008-11-05'
user = '1'
[
200,
{\"Content-Type\" => \"application/javascript\"},
[Pull.by_user(user).for_date(date).map {|i| i.item_id}.to_json]]
else
[404, {\"Content-Type\" => \"text/html\"}, [\"Not Found\"]]
end
end
end
Sunday, March 22, 2009

class Pull < ActiveRecord::Base
belongs_to :user
belongs_to :item
named_scope :by_user, lambda { |user_id|
{:conditions => {:user_id => user_id}}
}
named_scope :for_date, lambda { |date|
{:include => :item, :conditions => {:items => {:released_on => date}}}
}
end
Sunday, March 22, 2009

$(document).ready(function() {
$.getJSON('/pulls', function(data) {
$.each(data, function() {
$('#item_'+this).addClass('pulled');
});
});
});
Sunday, March 22, 2009

the payoff
Sunday, March 22, 2009

Sunday, March 22, 2009

standard
Sunday, March 22, 2009

hybrid
Sunday, March 22, 2009

Standard 0.617
Hybrid 0.039 0.096
content load time
Sunday, March 22, 2009

when to use it
Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

Sunday, March 22, 2009

no shirt, no javascript, no service
Sunday, March 22, 2009

Thank You
ben sco eld - @bsco eld - http://www.viget.com/extend - http://www.speakerrate.com/speakers/44
Sunday, March 22, 2009