Rails 4: A Look at Turbolinks

rails4turbolinks

What Is It?

Turbolinks is a brand new piece of JavaScript that is going to be integrated as part of Rails 4. It is similar to pjax. When enabled on a site, Turbolinks will fetch a part of a page and replace the contents of the current page with a new page. Here’s what the Turbolinks documentation says:

Turbolinks makes following links in your web application faster. Instead of letting the browser reload the JavaScript and CSS between each page change, and spend extra HTTP requests checking if the assets are up-to-date, we keep the current instance alive and replace only the body and the title in the head.

The big difference between pjax and Turbolinks is that with pjax it is necessary to specify which part of the page to be replaced. With Turbolinks, the entire body of the page is replaced.

How Does It Work?

Turbolinks works by fetching the clicked link asynchronously and then replacing the entire contents of the document body with the new page. The benefit of this is that you save client side time by not having to re-check for existing css, javascript, and possibly even images.

The layout of assets on your server would have to support this. More than likely, your application probably doesn’t need many changes to support this. In cases where it doesn’t, the asset pipeline makes it very easy to concatenate your different assets. While you’re at it, add in some CSS spriting for fun and profit.

Behind the scenes, Turbolinks uses something called pushState to change the browser address. The address is replaced immediately with new information. In the case of Turbolinks, it will make the browser address mimic what it would normally be if you had clicked the link and had the normal page load process complete. Turbolinks can be taken advantage of anywhere internally, but for security reasons it will not fetch and replace with external sites.

Why Would I Use This in my App?

It’s no secret that users are more responsive and engaged on faster web pages. People are impatient and every millisecond counts. A big benefit of Turbolinks is that it doesn’t have a large amount of overhead to set up in your application. Since it replaces the entire body of a page, little really needs to be done to your markup to take advantage of it.

What if I don’t want to use it?

You can opt out by using the data-no-turbolink attribute on an existing link tag. Looking at the source, it doesn’t check for any particular value in the data-no-turbolink attribute, only that it exists. The code to make a page load normally would look something like this:

<a href="/blog">My link</a>

To this:

<a data-no-turbolink="true" href="/blog">My link</a>

Another reason that you may not want to use Turbolinks is if you’re stuck supporting older browsers. In this case, though, you can leave it in your application and fallback will be graceful.

There’s a lot to be excited about with this project. With virtually no effort, your apps will receive a speed bump in response time. Are you pumped about trying out Turbolinks? Let us know in the comments.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Jason Seifer

Jason Seifer is a web developer, podcaster, world traveler, astronaut, and more. He also teaches at Treehouse. You can find him on Twitter @jseifer.

Comments

Comments are closed.