Good Enough ⁽™⁾ Performance

Andreas Maierhofer

Turbolinks makes page navigation faster. It turns your server rendered HTML page into a Single Page App without the added complexity of a client-side Javascript Framework. Turbolinks comes with adapters for iOS and Android. It provides a pragmatic way for building fast, multi platform web apps.

A lot of time is spent by the browser processing CSS and Javascript files. In traditional web applications this is done on every request. This is where Turbolinks comes into play.

On a high level Turbolinks intercepts link clicks and turns them in to ajax requests. After receiving the response from the server it replaces the body and merges changes into the header.

This turns a traditional Web App into a Single Page App without any server side changes. The browser avoids parsing of assets and together with the Turbolinks inherent page cache this results in a noticable performance boost.

 

„If you transition from a click to the next screen within 300ms, the user will percieve this as instantanious. Anything below is nearly imperceptible“ — Sam Stephenson (Turbolinks Maintainer)

Turbolinks combined with response times in the 100ms range will help you build snappy websites without the need to implement a dedicated API and Javascript Frontend. You can still do this where it makes sense. But you can make this a concious decision. For a more in depth discussion watch Sam Stephenson’s 2016 Rails Conf Talk.

Not just for the web

The new Version 5 of Turbolinks comes with native bindings for iOS and Android. It allows using server rendered HTML to be embedded directly in your app but it may also be combined with native UI Elements (Navigation is a common case) or extended with native screens where appropriate.

Not just for rails

While Rails popularized and leverages Turbolinks for quite some time, Turbolinks is not bound to Rails at all. It can be used with any Backend Technology. The Changelog has recently blogged about how they rebuilt their Website and how they run Turbolinks on top of a Phoenix Framework stack.

Not without caveats

Turbolinks is mostly a drop-in solution. It is easy to get started and without custom Javascript code you will hardly run into any issues. If you do run custom Javascript you will however notice significant frustration unless you appreciate the implications of moving away from traditional Full Page Reload Cycle.

In particular with Turbolinks the window object persists across all request so any transformations applied by Javascript should be idempotent (e.g. safe to apply multiple times). Depending on the level of custom Javascript, a thorough understand of the rather complex Lifecycle Events emitted by Turbolinks might be required.

TL;DR

Turbolinks is (almost) free performance for HTML driven websites. It works with every backend technology and has adapters for iOS and Android platforms. It enables you to build Web Applications that run in your browser and on your mobile phone. With a sufficient fast backend they can be almost indistinguishable from native apps.

Kommentare sind geschlossen.