The thing is, with the right techniques, you can get really close to the same kind of snappiness as a client-side UI, without all the extra work required to build it.
One of those techniques is PJAX. If you don’t know what PJAX is, it stands for pushState (as in HTML5 pushState) plus AJAX.
So how do you do this? The jquery-pjax plugin actually makes this pretty easy.
Once you include jquery-pjax, there’s a few things that need to happen to hook it up.
First, you’ll need to enable the plugin on some or all of the links on the page. Here’s an example that will enable it for all links.
Now, clicking any link will load HTML from the server and put it into the
There’s one more step to this though. We need to tell the server to handle PJAX requests a little differently than normal requests. In a normal request, we would want the server to return a full HTML document. In a PJAX request, we want the server to return only the part of the page unique to this particular link’s URL.
So, in Rails, for example, we’d add this bit to the
class ApplicationController < ActionController::Base layout :determine_layout private def determine_layout request.headers['X-PJAX'] ? false : :application end end
Now, when a PJAX request is made, the server will render the view without a layout.
You’ll notice that this technique requires a server to conditionally assemble the output for a particular URL, so this isn’t really going to work for static websites.
So that introduces PJAX. Next time, I’ll write about another approach we’ve been using when we need a little more control than the jquery-pjax plugin offers using a combination of jQuery and the Backbone.js router.
UPDATE: Here’s a link to the follow up post, Hybrid Routing With Backbone.js.