Rails4, Faster loading with turbolinks

The Ruby on Rails version 4.0.0 has been just released. The team took one and half years for development. Rails 4 comes with some interesting new features such as Turbolinks, improved caching and thread-safe.

Turbolinks changes your Rails application into a single page JavaScript application, that is, it doesn’t load new pages but instead replaces the current page with new content from the server.

[This is similar to pjax, but here we dont need to worry about which element on the page to replace, and combining the server-side response to add, the entire body will be replaced.]

Few points to note about Turbolinks

Less execution time:

  1. Turbolinks makes following links in your web application faster. Turbolinks  won’t allow the browser to recompile the JavaScript and CSS between each page change/loading, it keeps the current page there itself and replaces only the body and the title in the head.
  2. Execution time of code depends. The more CSS and JavaScript you have, the more benefit of not throwing away the browser instance and recompiling all of it for each and every page.
  3. In any case, the benefit can be up to two times faster in apps with lots of JS and CSS. Of course, your app’s speed may vary, It’ll be dependent on your browser version and all other factors affecting performance of your application.

No jQuery or any other framework:

  1. Turbolinks is built as light-weight.
  2. It does not require jQuery or any other framework to work. But it works fine with jQuery or prototype or whatever else like these frameworks.

Events :

  1. Do note that Turbolinks changes the pages without a full page reload, so you can’t rely on DOMContentLoaded or jQuery.ready() to trigger your code.
  2. Instead Turbolinks triggers events on document to provide hooks into the lifecycle of the current page

Initialization

  1. Turbolinks will be enabled whenever the server has rendered a GETrequest.

For example:

  • POST :create => resource successfully created => redirect to GET :show
  • Turbolinks ENABLED
  • POST :create => resource creation failed => render :new
  • Turbolinks DISABLED

Opting out of Turbolinks

  1. By default, Turbolinks is enabled for all internal HTML links.
  2. You can opt out by marking links or their parent container with data-no-turbolink attribute.
  3. After giving data-no-turbolink attr with in a div, then all links inside of that div will be treated as regular links.

For example:

Visit links manually using Turbolinks

You can use Turbolinks.visit(path) to go to a URL through Turbolinks.

Jyothish Kumar is a Consultant Developer at Compassites Software Solutions Private Limited. His areas of work includes Ruby On Rails and Web technologies. Prior to Compassites, he worked at Mobme Wireless Solutions PrivateLimited. He is an active contributor on websites that offer technical help. Jyothish also has a technology blog of his own. He loves working on Ruby on Rails related projects. He hails from God’s own country (Kerala).

Leave a comment