Watch the video or read the summary below.
Alexandre Barret
With Turbolinks 5 you get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Alex recommends watching Nate Berkopec’s YouTube video which is where he gained a lot of his knowledge. Check out links in the Resources below.
Optimises navigation automatically
No server-side co-operation necessary
Respects the web
Supports mobile apps
Shopify, GitHub and Basecamp all use Turbolinks libraries and are really quick — under 100ms rendering.
Turbolinks helps with improving the time for HTML Rendering: Parse HTML, Create, Render tree, Evaluate JavaScript, Paint.
Turbolinks intercepts full page URL requests or visits, (e.g. clicking on a link for a new page), and replaces it with an asynchronous request for the view over XMLHTTPRequest. It then replaces the <body> of the current page’s HTML with the requested page’s selective contents.
Changing browser history
Issuing a network request (ajax)
Restoring a copy of the page from cache
Rendering final response
Throw away an entire JavaScript runtime
Throw away the entire DOM
Reset the JS global scope
Parse CSS or evaluate JS from HEAD
One JavaScript runtime
data-turbolinks-permanent
Implementation — good luck with legacy app
Write your JavaScript differently — Event delegation, Make transformation idempotent, Global scope, no $(document).ready()
Extra care with third party libraries — Google Analytics, Facebook SDK, Google Maps
Information shared from Nate Berkopec’s YouTube resource
Alex’s slides are available at Slides.com
Turbolinks documentation
Examples: Turbolinks OFF, Turbolinks ON, Bravo Welly
Alex demonstrated Turbolinks for us and showed what it adds, he also gave responses to questions at the end of his Tech Talk.
Read more from Alex about Implementing Facebook SDK with Turbolinks 5.
Catch another Abletech Tech Talk — this one’s on trialling Elixir.
read previous