Turbolinks is a JavaScript library that intercepts all clicks on <a> links and makes that request via AJAX.
It then merges the <head> and replaces the current page <body> with the new body from the AJAX HTML response.
The promise:
- Get the performance of a single-page application without the added complexity of a client-side JavaScript framework
- Optimizes navigation automatically. No need to annotate links or specify which parts of the page should change.
- No server-side cooperation necessary. Respond with full HTML pages, not partial page fragments or JSON.
- Respects the web. The Back and Reload buttons work just as you’d expect. Search engine-friendly by design.
- Supports mobile apps. Adapters for iOS and Android let you build hybrid applications using native navigation controls.
Really simple 👌: yarn add turbolinks
then add this in your application.js:
const Turbolinks = require("turbolinks")
Turbolinks.start()Turbolinks is fast because it doesn’t reload the page when you follow a link. Instead, your application becomes a persistent, long-running process in the browser.
Consequence is that Document.ready() event is performed only once at the first page load.
This causes problems with jquery plugins event handling.
You should use the turbolink event 'turbolinks:load':
document.addEventListener('turbolinks:load', () => {
// Do your stuff!
})The main javascript pack tag should be loaded in the <head> for performance:
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
The defer: true attribute causes the pack to download along side the html, but defer evaluation until the html is parsed.
Please check this for more details 👉: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
The reload option reloads the page if you publish new assets.
Note that it should also track your stylesheet:
<link rel="stylesheet" href="/application-258e88d.css" data-turbolinks-track="reload">
Turbolinks can be disabled on a per-link basis:
<a href="/" data-turbolinks="false">Disabled</a>
You can also ensure a full reload of your page by adding:
<meta name="turbolinks-visit-control" content="reload">
You can persist elements accross page loads:
<div id="cart-counter" data-turbolinks-permanent>1 item</div>
Stimulus and Turbolinks are made to work together 👍
Stimulus connects and disconnects his controllers and associated event handlers whenever the document changes using the MutationObserver API like Turbolinks
Your toolbelt:
- Stimulus for client side event handling
- Turbolinks to keep your navigation under 300ms and global performance
- You can still use the classic
remote: truewhen you want to update a part of the page
There is another advantage we could use later. You can wrap you application for iOS and Android, all using a shared set of web views. The vision is to empower small teams and let us ship/maintain modern webapplication accross many clients 🚀
You can check this to go further:
- https://github.com/turbolinks/turbolinks
- https://chase.pursu.es/how-to-be-good-at-turbolinks-5.html
- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
- http://aspiringwebdev.com/consider-turbolinks-5-for-your-next-rails-project/
- https://dev.tube/video/SWEts0rlezA
- https://github.com/stimulusjs/stimulus