For any applications, we require many jquery and css files to be loaded on each request (i.e HTML requests).

Instead, we can render all the files at once and reuse these files over-and-over again to save our page-load time.

To serve this purpose, we have several gems and one of them is rack-pjax.

  • rack-pjax uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button.

  • pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load.

  • Pjax is also compatible with browser forward-and-back navigation buttons.

Initialization:

$(link_container).pjax(link,
  {
    container: '#container',
    timeout: 5000
});

Here:

  1. Providing container attribute will ensure that the next response (i.e html template) be placed within this container.

  2. Providing timeout attribute will ensure that one's request is loaded within this time(i.e milliseconds). Pjax has its own timeout value; when exceeded, it sends an HTML request. timeout can be helpful in case when a template requires more page load time.

Callbacks

Pjax provides callbacks like complete, end, etc. The main difference between complete and end is:
i) **complete** gets executed on next pjax request but not when user hits browser's navigation buttons.
ii) Whereas, **end** callback always run whenever next request is made or user hits browser's navigation (i.e both forward-back) buttons.

Advantage:

i) Once all the jquery and css files are loaded at once, we can transform any links to be pjaxified.
This ensures layout isn't reloaded on every request or page visit via pjaxified links.

Disadvantage:

i) Pjax require pushState-enabled browser. Otherwise, it fully degrades.

References:

i) [rack-pjax][1]
ii) [pjax-demo][2] [1]: https://github.com/eval/rack-pjax [2]: http://pjax.heroku.com/