Skip to content

Commit 1946556

Browse files
committed
Update README
1 parent 92fad14 commit 1946556

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,33 @@ It helps reducing the delay between your pages, minimizing browser HTTP requests
1818

1919
[View demos](http://barbajs.org/demos.html)
2020

21+
## How it works
22+
23+
Barba.js uses *PJAX* (aka push state ajax) to enhance the user's experience.
24+
25+
This technique consist in preventing the normal link behavior, changing manually the browser url, and injecting manually the new content in the page. In this way there will be no browser *"hard refresh"*.
26+
27+
Here is al walkthrough of what happens when the user click a link:
28+
29+
1. Check if the link is valid and elegible for *PJAX*, if yes, prevent the normal browser behavior.
30+
2. Change the URL using [Push State API](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState).
31+
3. Start fetching the new page via `XMLHttpRequest`.
32+
4. Create a **new** [transition](http://barbajs.org/transition.html) instance.
33+
5. As soon the new page is loaded, barba.js parses the new HTML (taking `.barba-container`) and put the new content on the DOM inside `#barba-wrapper`.
34+
6. The [transition](http://barbajs.org/transition.html) instance will take care to hide the old container and show the new one.
35+
7. As soon the transition is finished, the old container is removed from the DOM.
36+
37+
> Please note, on server side, your pages will need to be served normally.
38+
> Barba.js works as ehnancement for your website, everything should work normally without Javascript.
39+
40+
## Why?
41+
42+
Using this technique will bring numerous benefit:
43+
44+
* Possibility to create nice transition between pages enhancing the user's experience.
45+
* Reduce HTTP requests. (why reload the css/js at each page change?)
46+
* Possibility to speed up the navigation using [prefetch](http://barbajs.org/prefetch.html) and [cache](http://barbajs.org/cache.html).
47+
2148
## Features
2249

2350
- [Pjax](http://barbajs.org/how-it-works.html)

0 commit comments

Comments
 (0)