What Turbolinks does is load one initial HTML page when a site is first visited afterwards when a user clicks a link Turbolinks uses AJAX to
The chief advantages of doing things this way is that full HTML pages are no longer being loaded with every new page request. This means that JavaScript and CSS files are not constantly being reloaded/reparsed saving time and resources.
There are a few gotchas introduced with Turbolinks. Because new, full, HTML pages are not being loaded the document.ready
event is not fired when Turbolinks replaces content.
To work around this a function which was previously bound anonymously to the document.ready
event should be defined explicitly and then bound to both the document.ready
and page:change
events.
The function will then work both with Turbolinks and on browsers which may not support it, i.e. those with js turned off and older browsers.
Turbolinks makes use of the pushState
method defined in the HTML5 History API. As such it is only available on those browsers which support the HTML5 specification.
Safari 6.0+, Chrome 5.0+, Firefox 4.0+, and IE 10+ all have support for pushState
and its associated methods.
Naturally Turbolinks is designed to degrade gracefully on browsers which do not support it. In such cases the normal HTTP request/full HTML page load action will take place.
Turbolinks is designed to have as small a footprint as possible. It does not rely on any other libraries such as jQuery. Many JavaScript libraries are not (fully) compatible with the pushState
method and as such Turbolinks may conflict with them.
As mentioned above jQuery can have issues is you bind to the document.ready
event. In the case of jQuery there is a jQuery-Turbolinks plugin designed specifically to solve this issue. The same solution may not be available for other libraries.
Another possible gotcha is that Turbolinks is added as the last click listener on links. As such any library or js code which invokes preventDefault()
on a link will cause Turbolinks not to run on that link.
To remove Turbolinks from an application entirely all that is necessary is to remove gem turbolinks
from the Gemfile
and remove the //= require turbolinks
entry in the javascript manifest in app/asssets/javascript/application.js
By default all links within a page are automatically Turbolinks enabled. In order to disable the functionality for a link mark it with the data-no-turbolinks
attribute. To disable the functionality on a collection of links enclose them within a div
marked with the same data attribute.
By default any file with a file extentions other than .html
will automatically be opted out of Turbolinks.
For adding additional file types to the Turbolink white list Turbolinks provides the function Turbolinks.allowLinkExtensions('file_type_1',...)
There is a JavaScript library called PJAX (pushState + AJAX) which performs essentially the operation as Turbolinks but takes an opt in rather than opt out approach to it's implementation.
If Turbolinks is too heavy handed, introduces compatibility issues, or would only be advantageous in on particular view of an application PJAX may be a better options.
Much of the material for these slides was taken from the Turbolinks GitHub README
Additional material was taken from Remarkable Labs entry on Turbolinks in their Rails 4 countdown series.
We now return you to your slideshow already in progress...