FragmentFu - Fun with Fragments

First, please read the Advanced Rails Caching.. On the Edge for a primer on ESI, caching, and fragments.
To get started developing with ESI, I'm going to walk through a simple tutorial building an ESI enabled Rails application.
Get Mongrel-ESI
Find the latest mongrel ESI here: http://code.google.com/p/mongrel-esi/downloads/list

   wget http://mongrel-esi.googlecode.com/files/mongrel-esi-0.0.5.gem
   

(Does anyone have a better solution of ruby projects hosted on Google Code? )

Install Mongrel ESI

     sudo gem install mongrel-esi-0.0.5.gem
   

Create a new rails application (Currently using rails 1.2.3)

   rails fragment_fu_demo

     create  
     create  app/controllers
     create  app/helpers
     create  app/models
     .....

   cd fragment_fu_demo
   

Create a home page for your application

Delete the public/index.html page

     rm public/index.html
   

Edit the config/routes.rb and uncomment the following line:

     map.connect '', :controller => "welcome"
   

Create a welcome controller

     ./script/generate controller welcome index
   

Install the FragmentFu plugin

   
  ./script/plugin install http://mongrel-esi.googlecode.com/svn/trunk/plugin/fragment_fu
   

Start your application

 
  ./script/server
   

visit http://localhost:3000 in your browser. You should see a "Welcome#index" page.

Start MongrelEsi
From the command line, run:

 mongrel_esi start
    ** Starting Mongrel listening at 0.0.0.0:2000

visit http://localhost:2000 in your browser. You should see a "Welcome#index" page.

Create a fragment to cache
Edit the app/controllers/welcome_controller.rb
Add an action called now

 
     def now
        render :text => "#{Time.now} is #{Time.now.usec} nano-seconds"
     end

Edit the app/views/welcome/index.html.erb and replace with the following:

     <h1>Welcome</h1>
     <p><%= render :esi => "/welcome/now" %></p>
       

Page without ESI parsing
visit http://localhost:3000 and you should see: "Time:" in the browser. If you view the source, you'll see

    <h1>Welcome</h1>
    <p><esi:include src="/welcome/now" max-age="0"/></p>
   

This is the simplest of esi tags, and the default max-age is 0, which means do not cache.

Page with ESI Parsing

visit http://localhost:2000 and you'll see:

Welcome
Date: Mon Aug 06 00:00:00 -0400 2007 which is 62972ns


Caching modules
Edit the index.html.erb and replace with the following:

   <h1>Welcome</h1>
   <p><%= render :esi => "/welcome/now" %></p>
   <h2>What time is it again?</h2>
   <p><%= render :esi => "/welcome/now"%></p>
   

If you refresh http://localhost:2000, you'll notice they nanoseconds are different

Lets add a ttl to first call

  <h1>Welcome</h1>
  <p><%= render :esi => "/welcome/now", :ttl => 45.seconds %></p>
  <h2>What time is it again?</h2>
  <p><%= render :esi => "/welcome/now"%></p>

If you refresh http://localhost:2000, you'll notice they are now the same. Refresh again in the next 45 seconds, and it will not change.


The next tutorial will cover a small TODO application, with inline invalidation and exception handling. Coming Soon!