A Chain Is No Stronger Than
Its Weakest Turbolink
Bruno Cunha, Bruiserfit
Slide 2
Slide 2 text
Talking Points
• Turbolinks™
• Navigating with Turbolinks
• Building your Turbolinks Application
Slide 3
Slide 3 text
Turbolinks™
Slide 4
Slide 4 text
Turbolinks makes navigating your web
application faster. Get the performance
benefits of a single-page application without the
added complexity of a client-side JavaScript
framework.
Slide 5
Slide 5 text
Optimizes navigation automatically. No need
to annotate links or specify which parts of the
page should change.
Slide 6
Slide 6 text
No server-side cooperation necessary.
Respond with full HTML pages, not partial page
fragments or JSON.
Slide 7
Slide 7 text
Respects the web. The Back and Reload
buttons work just as you’d expect. Search
engine-friendly by design.
Slide 8
Slide 8 text
Supports mobile apps. Adapters for iOS and
Android let you build hybrid applications using
native navigation controls.
Render your views on server-side and link to
pages as usual. When you follow a link,
Turbolinks fetches the page, swaps in its
, and merges its , all without
incurring the cost of a full page load.
Slide 13
Slide 13 text
The JavaScript window and document objects,
and the HTML element, persist between
renders.
Slide 14
Slide 14 text
Visits are initiated by clicking Turbolinks-
enabled links, or by calling
Turbolinks.visit(location).
Slide 15
Slide 15 text
The default visit action is advance, which
pushes a new entry onto the browser’s history
stack using history.pushState.
Slide 16
Slide 16 text
Visit a location without pushing a new history
entry onto the stack using the replace visit
action. It uses history.replaceState to discard
the topmost history entry and replace it with the
new location.
Slide 17
Slide 17 text
Specify a replace visit action using either data-
turbolinks-action="replace" or
Turbolinks.visit("/edit", { action:
"replace" }).
Slide 18
Slide 18 text
Disable Turbolinks per-link by using data-
turbolinks="false".
Slide 19
Slide 19 text
Building your Turbolinks
Application
Slide 20
Slide 20 text
Your application becomes a persistent, long-
running process in the browser.
Slide 21
Slide 21 text
You can no longer depend on a full page load
to reset your environment every time you
navigate.
Slide 22
Slide 22 text
You may be used to installing JavaScript
behavior in response to the window.onload,
DOMContentLoaded, or jQuery ready events.
Adjust your code to listen for the
turbolinks:load event, which fires once on the
initial page load and again after every
Turbolinks visit.
Slide 23
Slide 23 text
Use event delegation to register event listeners
once on document or window.
Slide 24
Slide 24 text
When you navigate to a new page, Turbolinks
appends any new elements to the
current <head> where they’re loaded and
evaluated by the browser. Take advantage of
this to install page-specific javascript.
Slide 25
Slide 25 text
Turbolinks maintains a cache of recently visited
pages. This cache serves two purposes: to
display pages without accessing the network
during restoration visits, and to improve
perceived performance by showing temporary
previews during application visits.
Slide 26
Slide 26 text
Allow elements to persist between page loads
by designating them as permanent - simply
give them an HTML id and annotate them with
data-turbolinks-permanent.