Page Caching Resurrected
Ben Sco eld – Viget Labs

Page Caching Resurrected:
A Fairy Tale
Ben Sco eld – Viget Labs

three little pigs

three little pigs

page caching

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

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

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

standard 1
page 3000
requests per second

public
dynamic
content

action caching

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

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

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

standard 1
action 500
page 3000
requests per second

dynamic
content

fragment caching

<% 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 %>

<% 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 %>

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

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

standard 1
fragment 20
action 500
page 3000
requests per second

eficiency

the idea

Rails 2.3

hello, metal

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

high-performance endpoints

AJAX

so...

javascript

<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>

<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>

<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>

<noscript>
<ul class=\"nojs usernav\">
<li>
Please <a href=\"/support/\">enable javascript</a> to log in.
</li>
</ul>
</noscript>

<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>

<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-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>

hulu is insane
don’t do it like they do

<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>

<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>

the* right way
*a

the standard approach

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

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

<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>

the hybrid approach

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

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

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

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

standard

hybrid

standard 0.617
hybrid 0.039 0.096
content load time

hybrid approach - version 2

class SessionsController < ApplicationController
def new; end
def create
# ...
session[:pulls] = @user.pulls.map {|i| i.item_id}
redirect_to items_path
end
end

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\"},
[env['rack.session'][:pulls].to_json]
]
else
[404, {\"Content-Type\" => \"text/html\"}, [\"Not Found\"]]
end
end
end

hybrid v2

standard 0.617
hybrid 0.039 0.096
hybrid v2 0.043 0.023
content load time

when to use it

when not to use it

accessibility

accessibility

<noscript>
<ul class=\"nojs usernav\">
<li>
Please <a href=\"/support/\">enable javascript</a> to log in.
</li>
</ul>
</noscript>

Thank You
ben sco eld - @bsco eld - http://www.viget.com/extend - http://www.speakerrate.com/bsco eld