Turbolinks is a gem that comes bundled with Ruby on Rails applications by default. It was introduced in Rails 4 and has since gone through a few iterations, with the latest version being Turbolinks 5. The purpose of Turbolinks is to speed up page loading in web applications by making navigation faster.
In this post, we'll be discussing what Turbolinks is, how it works, and how to use it effectively in your Ruby on Rails applications. We'll start by explaining the problem that Turbolinks solves, then dive into the mechanics behind it, and finally look at some code examples to demonstrate how you can implement Turbolinks in your Rails apps.
Why do we need Turbolinks?
All of these steps can add up, resulting in slow page loads and a poor user experience. This is where Turbolinks comes in. Turbolinks aims to speed up page navigation by changing the way browsers load and display new pages.
How does Turbolinks work?
<title> elements of the current page with those from the new page. This entire process happens without the browser having to fully reload the page, which results in faster navigation and a smoother user experience.
Here's a step-by-step breakdown of how Turbolinks does this:
- When a user clicks on a link or submits a form, Turbolinks intercepts the event and prevents the browser from making a full page reload.
- Turbolinks then makes an AJAX request to the server for the new page's HTML.
- Once the server responds with the new HTML, Turbolinks extracts the
<title>elements from the new page.
- Turbolinks swaps out the current page's
<title>elements with those from the new page.
- Finally, Turbolinks updates the browser's URL and history to reflect the new page.
Using Turbolinks in a Rails application
As mentioned earlier, Turbolinks comes bundled with Rails by default. This means that you don't have to do anything special to start using it in your application. However, there are a few things you should be aware of to ensure that your application works smoothly with Turbolinks.
In some cases, you might want to perform a specific action when navigating to a certain page, such as scrolling to the top of the page. To do this, you can use the
data-turbolinks-action attribute on your links. For example:
<a href="/some-page" data-turbolinks-action="scroll_to_top">Go to some page</a>
When a user clicks on this link, Turbolinks will navigate to the specified page and then scroll to the top of the page. You can also use this attribute on form elements:
<form action="/submit" method="post" data-turbolinks-action="scroll_to_top"> <!-- Your form fields go here --> <input type="submit" value="Submit"> </form>
$(document).ready() in jQuery) won't be triggered on every page navigation.
Instead, you should listen for Turbolinks-specific events. Here's a list of the main events that Turbolinks triggers:
turbolinks:click: Triggered when a link is clicked, before Turbolinks makes the AJAX request.
turbolinks:request-start: Triggered when the AJAX request is about to be made.
turbolinks:request-end: Triggered when the AJAX request completes.
turbolinks:before-cache: Triggered before Turbolinks stores the current page in its cache.
turbolinks:render: Triggered after Turbolinks has replaced the
turbolinks:load: Triggered after Turbolinks has finished updating the page.
Here's an example of how you might use these events in your application:
In these cases, you have a few options:
- Modify the library or component to work with Turbolinks. This might involve changing event listeners or modifying initialization code.
- Disable Turbolinks for specific links or forms by adding the
data-turbolinks="false"attribute. For example:
<a href="/some-page" data-turbolinks="false">Go to some page without Turbolinks</a>
- Disable Turbolinks entirely for your application. To do this, remove the
turbolinksgem from your
Gemfile, and remove the
//= require turbolinksline from your
Turbolinks is a powerful tool that can help you speed up page navigation in your Ruby on Rails applications. By understanding how it works and how to use it effectively, you can provide a smoother and more enjoyable user experience for your users.