Turbolinks example

Next, it defines a gulp watch task that watches specific files in the project for changes, and then runs the gulp webpack command when a change is detected. This actually took a little tweaking, because my source and output directories were both app/assets/javascripts . The first go-around I ended up with an infinite loop as compiling the bundle would cause the watch task to fire again and again and again. I eventually managed to find the "!app/assets/javascripts/" which allowed me to exclude a path from the watched files. That restored sanity.

The whole fun starts, when the user visits a previously cached page. In that case, Turbolinks will emit turbolinks:before-render immediately after caching up the previous page. Then it will replace the body and header tags with the cached version of the page which is being loaded from the server. This operation is concluded with single turbolinks:render event, without firing the load event. When the AJAX call is finished, another turbolinks:before-render event is emmited (for the cached version), and the flow continues as in the uncached version. The load event is called only after rendering the server version of the page.

Turbolinks 3 is currently in development but should be released within the next few months. One interesting aspect of Turbolinks 3 is that rather than strictly doing the full <body> replacement that Turbolinks 1 and 2 do, Turbolinks 3 has support for partial dom replacement . While this seems nice and is a bit closer to PJAX , the spiritual ancestor of Turbolinks introduced by Github, it nonetheless adds a good bit more complexity to the whole Turbolinks dance. With partial replacement, there is the possibility of involving the server and Rails controllers in deciding what content to replace, and overall things seem a bit more complex than with earlier Turbolinks versions.

Turbolinks example

turbolinks example

Media:

turbolinks exampleturbolinks exampleturbolinks exampleturbolinks exampleturbolinks example