Abletecher Alexandre Barret has been using Turbolinks. Sit in on this Abletech Tech Talk to find out more.
Watch the video or read the summary below.
Alexandre Barret
Turbolinks 5
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.
Turbolinks Features
-
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.
View Over the Wire
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.
What is a visit?
-
Changing browser history
-
Issuing a network request (ajax)
-
Restoring a copy of the page from cache
-
Rendering final response
What it doesn’t do
-
Throw away an entire JavaScript runtime
-
Throw away the entire DOM
-
Reset the JS global scope
-
Parse CSS or evaluate JS from HEAD
Cool Features
-
One JavaScript runtime
-
data-turbolinks-permanent
Gotchas
-
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
Resources
-
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.
