bolt githublinkedinservices-title-icon spots swoosh target triangle-icon twilio twitterweave

Turbolinks: Why not?

IlyaDecember 14, 2017

What is this?

Turbolinks is a Rails feature, which is available as a gem and starting from rails 4 is automatically enabled in each new rails app.

It is intended to speed up navigation between the pages of your application.

It works by intercepting all link clicks that would navigate to a page within the app, and instead of loading the whole page via HTML it makes the request via AJAX, replacing the body with the received content.

The primary speed increase comes from not having to download or parse the CSS & JS files again, since most rails applications use manifest files for both css and javascript.

What do we need to install it?

Add the turbolinks gem to your Gemfile.
Run bundle install.
Add //= require turbolinks to your JavaScript manifest file, and - that's all!

One of my favourite benefits - no server side changes need to be made to make it work!

Routing

Okay, what about routing? Since the browser doesn't make HTML requests to the server, but is rather just an AJAX, how should the routes work? The answer is simple - as expected. Back and forward buttons work as usual, and there is nothing additional that you need to define.

Progress displaying

One of the things missing from the first versions of Turbolinks was a progress cursor, which meant there was no feedback as to whether anything was happening while the page was loading. This was sorted in the later versions by adding a progress bar at the top of the page, similar to github, which is enabled by default, meaning that the issue was solved.

What if JavaScript is disabled?

if your app is running in a browser that doesn't support the required features, like pushstate, or javascript is simply disabled, Turbolinks will fall back to traditional full HTML requests and full page loads. So, nothing to worry about.

Issues or edge cases

Of course Turbolinks is not always ideal. Personally, I saw 2 main edge cases which you should know about before adding this feature:

document.ready: The first step is to trigger the document.ready javascript event. Most developers bind their base initial JS actions to document.ready, however, this doesn’t work with Turbolinks. The workaround is to always use page:load near the document.ready.

JavaScript in <head>: Turbolinks requires the js on the page to be put in the HEAD tag. While it's good practice to put it on the bottom, in order to allow the page to load before the javascript files start to download. The solution is to put async: true in your JavaScript file calls in the header to help both Turbolinks and your page.

Summary

For me, Turbolinks is very much underestimated and can be used on numerous and varied projects. We are currently using it on one of our larger projects and I find that it works really well.

This library had a bad reputation in the beginning of rails 4 because it was added as default in all new rails apps, and half of the developers had no clue what is was. They thus started to get angry every time their document.ready wasn't working.

But aside from this abrupt introduction, I believe that Turbolinks really helps grow a project - and makes it look great!

THINK

out loud

We think out loud on our blog. We share our views on coding, remote work and post regular insights into the freshest tech industry news.

Want more? Join our mailing list.

    DVELP

    WORK WITH US.

    Client Engagement

    +44 (0) 20 31 37 63 39

    [email protected]

    So, how can we help you?

    Live chat

    By using this website you agree to our cookie policy

    x