Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
Barba.js v2でサイトを簡単に非同期遷移させる | Will Style Inc.｜神戸にあるウェブ制作会社
<!-- unpkg --> <script src="https://unpkg.com/@barba/core"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/@barba/core"></script><script> barba.init({ // ... }) </script>また、モダンブラウザであれば動作するようですが、以下のスクリプトをサポートしていないブラウザはPolyfillが必要です。 PromiseSet() and Map()Array.prototype.findIntersectionObserver(@barba/prefetchで使用)polyfill.ioであれば下記を読み込んでください。 <script src="https://polyfill.io/v3
swup — Versatile and extensible page transition library for server-rendered websites
swup Versatile and extensible page transition library for server-rendered websites
PjaxとSPAが全く同じ技術構成なのを知らずにPjaxを過去の技術だと思ってる知ったかぶりが多いので最も高度で完成度の高いPjaxライブラリであるpjax-apiの作者の自分が説明しておこう。 SPAとはPjaxをバンドルしたフレームワーク Pjaxとはその語源からしてpushState+Ajaxである。そしてSPAの技術構成はフレームワーク+pushState+Ajaxである。すなわちSPAとは本質的にPjaxをバンドルしたフレームワークに過ぎない(Pjaxと対比されるSPAはツールセットとしてのSPAでありこれはアプリケーションフレームワークとしてしか存在し得ない。字義通りのSPAはSPAフレームワークで作ろうとPjaxで作ろうと何で作ろうとSingle Page ApplicationであればSPAである)。SPAを使っている限りPjaxも使っているのでありPjaxが過去の技術のご
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
PjaxとSPAの違い - falsandtruのメモ帳