Turbolinks in middleman

September 14, 2013

Rails 4 now comes with Turbolinks enabled by default, I think this is great and would love to see more sites make use of this technology if it’s feasable.

Turbolinks might not be so easy to setup or might not even make sense at all for sites that rely on a large amount of JavaScript interaction, especially if they are not making use of event delegation. However, this site has been running off static content for a long time now, first jekyll and now middleman, it’s a perfect candidate for turbolinks as there is no complex JavaScript running. This will save the browser fetching and parsing both the CSS and the web fonts for each internal link the user clicks, leaving everything nice and snappy.

Setup

Hooking this up if your using middleman couldn’t be any easier, as middleman has sprokets built in.

Require the turbolinks gem

Add the following line to your Gemfile and then run bundle to install it

gem "turbolinks", require: false

Create and load your JavaScript file

If you already have a JavaScript file created and pulled in with javascript_include_tag you can skip this step.

Create an source/javascripts/application.js file and then add the following into the <head> section of your layouts/layout.erb

<%= javascript_include_tag "application" %>

Pull in the turbolinks JS

Now that you have your JS file being successfully loaded you can require turbolinks, add the following line to the top of your application.js file:

//= require turbolinks

That’s it!

You’re now running a static site with turbolinks. I’ve found this improves the perceived speed of my site a lot, hopefully it can do the same for you. If you have any questions please leave them below.


Pete Hawkins

Hey 👋 I’m Pete a web developer, who loves to ship products and build cool things with React and React Native.
You can follow me on Twitter or Subscribe for updates.