How it works

barba.js uses PJAX (aka push state ajax) to enhance the user's experience.

This technique consist of preventing the normal link behavior, changing the browser url manually, and manually injecting the new content in the page. In this way there will be no browser "hard refresh".

Here is a walkthrough of what happens when the user clicks a link:

  1. Check if the link is valid and eligible for PJAX. If yes, prevent the normal browser behavior.
  2. Change the URL using the push state API.
  3. Start fetching the new page via a XMLHttpRequest.
  4. Create a new transition instance.
  5. As soon the new page is loaded, barba.js parses the new HTML (taking .barba-container) and puts the new content on the DOM inside #barba-wrapper.
  6. The transition instance will take care of hiding the old container and showing the new one.
  7. As soon the transition is finished, the old container is removed from the DOM.

In order to have a better understanding on how Barba.js works I suggest you to read this article I wrote for Smashing Magazine.

Please note: on the server side your pages will need to be served normally. Barba.js works as ehnancement for your website, everything should work normally without Javascript.

Why?

Using this technique will bring numerous benefits:

  • Possibility to create nice transition between pages enhancing the user's experience.
  • Reduce HTTP requests. (why reload the css/js at each page change?)
  • Possibility to speed up the navigation using prefetch and cache.