A Chain Is No Stronger Than Its Weakest Turbolink

A Chain Is No Stronger Than Its Weakest Turbolink Bruno
Cunha, Bruiserﬁt

Talking Points • Turbolinks™ • Navigating with Turbolinks • Building
your Turbolinks Application

Turbolinks™

Turbolinks makes navigating your web application faster. Get the performance
beneﬁts 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.

Navigating With 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, changes the browser’s URL using the History API, requests the new page using XMLHttpRequest, and then renders the HTML response.

Render your views on server-side and link to pages as
usual. When you follow a link, Turbolinks fetches the page, swaps in its <body>, and merges its <head>, all without incurring the cost of a full page load.

The JavaScript window and document objects, and the HTML <html>
element, persist between renders.

Visits are initiated by clicking Turbolinks- enabled links, or by
calling Turbolinks.visit(location).

The default visit action is advance, which pushes a new
entry onto the browser’s history stack using history.pushState.

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.

Specify a replace visit action using either data- turbolinks-action="replace" or
Turbolinks.visit("/edit", { action: "replace" }).

Disable Turbolinks per-link by using data- turbolinks="false".

Building your Turbolinks Application

Your application becomes a persistent, long- running process in the
browser.

You can no longer depend on a full page load
to reset your environment every time you navigate.

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 ﬁres once on the initial page load and again after every Turbolinks visit.

Use event delegation to register event listeners once on document
or window.

When you navigate to a new page, Turbolinks appends any
new <script> elements to the current <head> where they’re loaded and evaluated by the browser. Take advantage of this to install page-speciﬁc javascript.

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.

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.

https://github.com/turbolinks/turbolinks

A Chain Is No Stronger Than Its Weakest Turbolink

A Chain Is No Stronger Than Its Weakest Turbolink

Bruno Cunha

More Decks by Bruno Cunha

Other Decks in Technology

Featured

Transcript