Turbolinks


"Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head. Think CGI vs persistent process"

This is part of the description that you can find on Turbolinks github project Turbolinks it is being included by default in Rails 4 and it is easy to see why, it would greatly increase the speed of your app, especially in big project with tonnes of js and css. Here is a small guide of stuff to consider when we use it.

Events


On turbolinks the ready event of the document only triggers ones, on the initial page load, so every code that listens for that event will only triggered ones.

Instead, turbolinks gives you a range of events to deal with the lifecycle of the page:

    page:fetch starting to fetch the target page.
    page:load fetched page is being retrieved fresh from the server.
    page:restore fetched page is being retrieved from the 10-slot client-side cache.
    page:change page has changed to the newly fetched version.


Instead of only bind your events on document ready you will must to set it to page:load event too:

  
    ready = ->
      $('#link').click ->
        $(this).parent('form').submit()

    $(document).ready(ready)
    $(document).on('page:load', ready)
  

Or you can use jQuery Turbolinks a gem that automates this behaviour.

Another approach is change the way of listen the events, instead of selecting elements and listening the event we can listen to the document's event and check if the element that caused the event it is the one that we want to listen.


  $(document).on 'click', '#link', ->
    $(this).parent('form').submit()


Either way, I think is a small price to pay for the speed you would get in exchange.


Excluding links


All internal links within a page automatically Turbolinks enabled. If you would like certain containers and links to not be enabled, add data-no-turbolink to the element.


<div data-no-turbolink>
  ...
</div>



Compatibility


Turbolinks is designed to work with any browser that fully supports pushState and all the related APIs.

  • Safari 6.0+
  • IE10
  • Chrome 5.0+
  • Firefox 4.0+


References


By Pablo Monfort



How to contact us

Our Location

DireccionArismendi 1420 Of. 102 Telefono(+598) 2409 15 66 Mailinfo@vairix.com

Follow us


Want to contact us?