Last edited Feb 11, 2020.

Turbolinks and Laravel

Turbolinks ⚡

Turbolinks intercepts all clicks on <a href> links to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using XMLHttpRequest , and then renders the HTML response. Skipping the draw stage, thus giving the perception of a Single Page Application. (Those white screens don't appear between page changes.)

During rendering, Turbolinks replaces the current <body> element outright and merges the contents of the <head> element.

If you're curious about how Turbolinks "feels" to use (from a user perspective), try clicking around various pages on this site. The front-end is built in fairly basic HTML/JS/CSS, using Twig as a templating engine. But Turbolinks is what makes the experience butter-smooth. 😃

Using Turbolinks with Laravel 🍰

1: Require turbolinks in project:

This might vary based on your setup. If you use npm or yarn for example, you'll want to require turbolinks using:

npm install turbolinks --save

or

yarn add turbolinks

2: Update main JavaScript file in your app:

In a standard Laravel application structure, open up resources/js/app.js and underneath the require('./bootstrap'); line add the following:

require('./bootstrap'); let Turbolinks = require("turbolinks"); Turbolinks.start(); // Other JavaScript ...

3: Update master layout file for your app:

Again, as standard you'll find the file at resources/views/layouts/app . You need to add the data-turbolinks-track="true" attribute to any scripts that load on a per-page basis. (In the example below, this is a posts.js which would only be present on a posts page.

<head> ... <script defer src="{{ mix('js/app.js') }}"></script> <script defer src="{{ mix('js/posts.js') }}" data-turbolinks-track="true"></script> <link href="{{mix('css/app.css')}}" rel="stylesheet" data-turbolinks-track="true"> ... </head>

4: Fix jQuery "Document Ready" methods:

Because we're no longer "loading" any new pages, jQuery's document ready event won't fire when moving between pages. This is problematic when you rely on jQuery to handle DOM changes.

Fear not, however, as there is a simple way to fix this issue. (Simpler if you prefer the longer form $(document).on('ready', function () { ... }); instead of $(function () { ... }); ).

The event we can replace ready with is turbolinks:load . Everything should start simply working once we've made the change...

$(document).on('turbolinks:load',function() { doMyJavaScriptStuff(); });

If you're not using jQuery but still relying on the document ready event, you can swap your calls to a more vanilla JS approach like so:

document.addEventListener('turbolinks:load', function() { ... });

Conclusion

Turbolinks boosts the render speed of each screen to the point where your application actually feels like an SPA to use, despite being a PHP application. It allows you the perceived speed of an SPA without re-writing your entire code-base. If you're yet to start delving into the world of Single-Page Applications or aren't quite confident enough to use Vue in your projects (or if Vue just doesn't work for you/your project), Turbolinks is the next best thing, for me, anyways. 😎