You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+27Lines changed: 27 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,6 +18,33 @@ It helps reducing the delay between your pages, minimizing browser HTTP requests
18
18
19
19
[View demos](http://barbajs.org/demos.html)
20
20
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).
0 commit comments