1. Computing

Turbolinks Default in Rails 4

By

Turbolinks Default in Rails 4

Turbolinks will be the default in Rails 4.0. The first thing that you have to know is that HTTP requests for a new page can be twice or even three times as fast. That's simply incredible, but what's really happening here? What are Turbolinks? How does this affect you? Let's look at what a modern web browser really does first.

When you make an HTTP request for a web page, your browser forms the HTTP request, sends it off to the web server and as soon as it receives any HTML response, it starts parsing it. This is before it's received the entire response, and before it's ready to even begin displaying the page. It'll start resolving hostnames for any host it sees in an image tag, or a script or CSS link tag. The objective there is to resolve the hostnames as soon as possible. Having to wait yet again for another connection to start will just make the page load slower. This type of early network activity is relatively new, web browsers didn't used to do this.

Once it's finished parsing the head tag, it'll do things like request the CSS stylesheet and the Javascript from the link tags in the header. Now, most of the time, these are exactly the same as the last page from that domain. Most of those types of things don't change between requests, but they could, so the browser checks with the server. If the server says they didn't change, then the browser will pull the CSS stylesheets and javascript out of cache, but it (ultimately) wasted time doing those requests.

It'll then (or was, in the background while those HTTP requests were going off) parse the body, get images it needs, etc, and display the web page. But this part doesn't change at all with turbolinks, so we won't worry about it.

Back to the wasted time asking the server if the CSS and javascript files changed. We, the web developers, the web server and the web application know that it didn't. We know that the web browser is just wasting its time, but there is (or was) no way to tell it that. And here's where turbolinks comes in. A turbolink isn't a normal HTTP link, it's a AJAX-type link. The results of the HTTP request are gotten with javascript and a javascript on the page decides what to do with them. And, in this case, the entire body tag is replaced.

I'll let you think about that for a moment, because it's likely something you've never done. A javascript running on the page made a request to the web server and, with its results, replaced the entire body tag with completely new HTML. From a DOM perspective, it deleted the entire body tree, then added a new one. So what does this do? Among other things, it doesn't replace the head tag. The title can be updated, of course, but the rest of the head tag is likely to stay the same. No more requests to javascript or CSS URLs, no more unnecessary parsing and starting the whole process over again.

But, if you've been paying attention, there's one detail that's left dangling. A lot of sites already do something similar. Go to Steam, scroll down and go to the next 10 games. Click on a game, then go back, and bam, you're back at the first 10 games. What's wrong here? The web application didn't remember where you were, obviously. It didn't update the URL in any way, the browser really just stores a URL and grabs it come cache when you go back. There's no way to update that URL, or is there? HTML5 to the rescue here, with something called pushState. The pushState API can push a new URL onto the history, tricking the web browser into thinking it went to a new page (at least from the perspective of going back), so when you click the back button the new URL holds the URL of the page you really want to go to and it all just works.

OK, so this sounds dodgy, and it can be. But it's being used all over the place right now. Even Github uses things like this, this type of thing is the norm with HTML5. It might sound really, really strange to replace all of your links with something like this (and remember, this'll be the default, so you're getting it unless you say you don't want it), but it's really not all that strange. And, it does work. And it does make things faster. And you can turn it off for debugging, if you want. And Rails will fall back to normal links on non-HTML5 browsers. So there's really not much downside here, just free speed for everyone.

  1. About.com
  2. Computing
  3. Ruby
  4. Ruby on Rails
  5. Turbolinks Default in Rails 4

©2014 About.com. All rights reserved.