Turbolinks 5

Turbolinks 5

Features

• Optimizes navigation automatically
• No server-side cooperation necessary
• Respects the web
• Supports mobile apps

Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework.

Who uses it

• SHOPIFY: 100ms
• GITHUB: 65ms
• BASECAMP: 27ms

HTML Rendering

View Over the Wire

What is a visit

• Changing browser history
• Issuing a network request (ajax)
• Restoring a copy of the page from cache
• Render final response

Responds with a full HTML response (no JSON)

document.body = xhr.querSelector('body');

View Over the Wire

What it does not do:

• Throw away an entire javascript runtime
• Throw away the entire DOM
• Reset the JS global scope
• Parse CSS or evaluate JS from HEAD

Cool Features

One javascript runtime

var audio = new Audio('<%= config[:http_prefix] %>audio/audio_file.mp3');

audio.oncanplaythrough = function(){
  $('#player #play').prop("disabled", false);
  $('#player #pause').prop("disabled", false);
}

var playMusic = function () {
  audio.play();
};

var stopMusic = function () {
  audio.pause();
};

$(document).on('click', '#player #play', playMusic);
$(document).on('click', '#player #pause', stopMusic);

<div id="player" data-turbolinks-permanent >
  <p>Listen to my awesome music</p>
  <button id="play" disabled>Play</button>
  <button id="pause" disabled>Pause</button>
</div>

Cool Features

data-turbolinks-permanent

var number = 0;

setInterval(function() {
  $('#counter p span').text(number);
  number = number + 1
}, 1000);

<div id="counter" data-turbolinks-permanent>
  <p>Number of downloads: <span>0</span>!</p>
</div>

Gotchas

• Implementation
  • Good luck with legacy app
• Write your javascript differently
  • Event delegation
  • Make transformation idempotent
  • Global scope
  • $(document).ready()
• Extra care with third party libraries
  • Google Analytics
  • Facebook SDK
  • Google Maps