How it works

動作について

barba.jsはPJAX(pushState AJAX)を使い、UX(ユーザーエクスペリエンス)を向上させます。

PJAXは普段のリンクの動きを防ぎ、 手動でURLを変更し、手動でコンテンツを新しいコンテンツに入れ替えます。 このようにブラウザでの「ハードリフレッシュ」は発生しません。

リンクをクリックした時に発生する処理の流れは以下の通りです。

• リンクが正しく、PJAXが適切かどうかをチェックします。 正常なら通常のリンクの動作を差し止めます。
• pushStateAPIを使ってURLを変更します。
• XMLHttpRequest経由で新しいページを取得します。
• 新しいtransitionインスタンスを生成します。
• 新しいページがロードされたら、barba.jsはHTMLをパースします。 (.barba-containerを取得します。)
  そして、取得したコンテンツを#barba-wrapperに設置します。
• transitionインスタンスは古いコンテナを隠し、 新しいコンテナを表示します。
• 遷移が完了したら、DOMから古いコンテナを削除します。

barba.jsの仕組みをより深く理解するために、以前Smashing Magazineに投稿したこちらの記事を読むことをお勧めします。

注意：サーバは正常にページを配信する必要があります。
barba.jsはサイトをより良くするだけです。 たとえJavaScript動かなかったとしても正常に動作させるべきです。

何故PJAXを使うのか

PJAXには多くの利点があります。

• ページ遷移をより良くすることでUXが向上する可能性があります。
• HTTPリクエストを減らします。(なぜページ遷移のたびにCSS/JSのリロードするのでしょう？)
• prefetchとcacheを使って ページ巡回を高速化できる可能性があります。