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 major points on Turbolinks

1. 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.
2. 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.
3. Events :-
  1. 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
4. Initialization
  1.   Turbolinks will be enabled whenever the server has rendered a GET request.
Eg :-
  • POST :create => resource successfully created => redirect to GET :show
    • Turbolinks ENABLED
  • POST :create => resource creation failed => render :new
    • Turbolinks DISABLED
5. 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.
Eg :- 
<a href="#">Home (via Turbolinks)</a>
<div data-no-turbolink>
  <a href="#">Home (without Turbolinks)</a>
6.  Visit links manually using turbolinks
You can use Turbolinks.visit(path) to go to a URL through Turbolinks.


Popular posts from this blog

Rails Kaminari - Ajax pagination

Rails 4, MySQL, and Emoji (Mysql2::Error: Incorrect string value: '\xF0\x9F\x8C\x9D')