In simple words, Barba.js is a dependency free library that can be used to create fluid transitions between different pages. This, obviously, can serve multiple functions, such as ensuring faster loading of pages, and reducing the number of requests and queries made to the web browser, and so on.
Barba.js relies on pushstate, so it can work with almost all the major web browsers. It works via PJAX (pushstate AJAX), which accomplishes the following:
- Checks if the link is valid (if yes, it prevents normal browser behavior).
- Changes the URL using pushstate API and then fetches the new page.
- Once the new page is fetched, Barba.js parses the HTML.
All of this is done on the website-end; on the server side, pages are processed as usual.
Mode of Operation
Working with Barba.js is fairly simple. You can install it via npm:
npm install barba.js --save-dev
Or you can just include the script in your page:
Once you have included Barba.js and included your DOM, you can initialize it by calling the relevant function.
If you want Barba.js to ignore certain links, you can add the class .no-barba or just use a custom check to replace the function Barba.Pjax.preventCheck
As already mentioned, Barba.js can significantly improve page load times and reduce the number of HTTP requests. This, of course, has one direct advantage: it can enhance the overall user experience, as faster-loading pages mean a faster website, and a better UX for your visitors.
Barba.js manually changes the URL to prevent the web browser’s “hard refresh”. This is a simple method of getting the job done. Plus, it is just 4.4 KB when minified and zipped, so you need not worry about any bloat either.