Turbolinks and beyond

@h6165

Abhishek Yadav

ரூபீ ப்ரோக்ராமர்

Co-organizer: Chennai.js and Chennai.rb

The idea

Turbolinks

  • Short-circuit all the links on the page
  • Load them using Ajax
  • Extract <body> from the response and replace in current page 

 

The goal

Turbolinks

  • Make link loads feel faster
  • Avoid having to use front-end frameworks

Demo

Turbolinks

  • Turbolinks demo
  • Pjax demo

Demo

Turbolinks Demo

Pjax Demo

Turbolinks

http://pjax.herokuapp.com

The history

Turbolinks

  • pjax (https://github.com/defunkt/jquery-pjax)
  • Turbolinks-classic
  • Turbolinks-5

The idea

Turbolinks

  • Short-circuit all the links on the page - only the application links
  • Load them using Ajax - XmlHttpRequest
  • Extract <body> from the response and replace in current page 
    • ​Change the page Url
    • Hack the back button too
  • ​Cache visited pages
    • ​Use cached pages for back navigation
    • Use cache for temp-preview in forward navigation
  • ​Show a CSS based loader

Problems

Turbolinks

  • Loss of events
    • No page load -> no DOMContentLoaded -> no window.onload -> $(document).ready won't work
  • Over-caching
    • Back button doesn't reload the previous page - can show stale data
  • Over-scripting
    • <script> tags in header and body are evaluated on every page load
    • If the script makes a non-idempotent change on the page, it will be repeatedly applied.

Problems

Turbolinks

  • Application may need to be rewritten (in parts at least)
  • Many plugins can stop working

Problems

Turbolinks

Problems - Solutions

Turbolinks

Loss of events

  • No page load -> no DOMContentLoaded -> no window.onload -> $(document).ready won't work

    • Listen on the turbolinks:load event

    • Use event delegation

    • Use MutationObserver

Problems - Loss of events

Turbolinks

Use turbolinks:load

After loading a new page, Turbolinks fires the turbolinks:load event. All/most $(document).ready can be replaced with that -


$(document).ready(function(){
  // page load stuff
})

// becomes

$(document).on("turbolinks:load", function(){
  // page load stuff
})

// or

document.addEventListener("turbolinks:load", function() {
  // page load stuff
})

Problems - Loss of events

Turbolinks

Listening on turbolinks:load is not the best approach.

  • Makes the app dependant on library specific event
  • Plugins can't use this approach

Problems - Loss of events

Turbolinks

Event delegation

  • Is a popular technique (not specific to Turbolinks)
  • Attach event to future-elements (elements that may get added via Ajax) by binding to a top level element
  • eg - React event handling uses delegation only
  • Depends on event bubbling - comes with its own challenges - but is in general more reliable

Problems - Loss of events

Turbolinks

Event delegation

// Instead of -

$('.dance-button').on('click', function(){
  // start dancing
})

// This -
// Will work if .dance-button is loaded later by an Ajax call
// Will work with Turbolinks without change

$('body').on('click', '.dance-button' function(){
  // start dancing
})

Problems - Loss of events

Turbolinks

Mutation Observers

  • Is a somewhat novel technique
  • We can observe changes to the DOM and respond to them
  • The idea is, DOM content can be changed by entities other than Turbolinks. Like Websockets.
  • This could be one place where all the content changes are captured and managed

Problems - Loss of events

Turbolinks


var el = document.getElementById('#my-widget');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  console.log("It changed");
});

observer.observe(el, { childList: true })

Mutation Observers

Problems - Over caching

Turbolinks

Opt out

Cache will not be used in restoration (back button)

or for previews (for visited links)


<meta name="turbolinks-cache-control" content="no-cache">

Problems - Over caching

Turbolinks

Persist elements

  • Elements marked as permanent will be left out during page loads
  • Suitable for things like cart-counter - whose change logic is independent of page loads 

<div id="cart-counter" data-turbolinks-permanent>1 item</div>

Problems - Over scripting

Turbolinks

Idempotent scripts

Scripts that can be run one or many times with the same result

// Overscripting example -
// This is an inline script 

<script>

  function foo(){
    $("#welcome").append("<b> Welcome to our site </b>");
  }

  function bar(){
    $("#welcome").html("<b> Welcome to our site </b>");
  }

  
  foo();
  bar();

</script>

// foo is not-idempotent
// bar is idempotent

Similar projects

Turbolinks

  • Turbolinks classic
  • Jquery-turbolinks
  • Turbograft

Conclusion 

Turbolinks

Why resist client-side Js frameworks - cons

  • Your Ain't Gonna Need It Yet (YAGNI) - chances are -  you are over-engineering.
  • Cost of addition
    • Learning curve
    • Api
  • Poor UX
  • The Just use Jquery philosophy - Its still alive

Conclusion 

Turbolinks

Why resist client-side Js frameworks - pros

  • Are client-side frameworks the new Jquery ?
  • Your app will become complex enough eventually ? Plan for UI complexity
  • Resume driven development - if we don't know React, someone else gets the job

Open scenario

Turbolinks

  • Form with dropdown
  • Subsequent elements change on differing value

Turbolinks and beyond

By Abhishek Yadav

Made with Slides.com

Turbolinks and beyond

  • 1,346

More from Abhishek Yadav