PJAX

The advanced PJAX superior to SPA.

The pjax-api can implement SPA on Pjax less expensive than SPA frameworks. And provides almost complete original web experience. Most SPA frameworks and pjax libraries lack many essential functions to keep the original web experience such as follows.

Browser history fix (Fix for browsers)
- Browsers set the wrong title to the current URL in page back/forward.
Scroll position restoration (Fix for browsers)
- Browsers cannot restore the scroll position if the current content doesn't have sufficient scroll size.
Unexpected scroll prevention (Fix for browsers)
- Browsers unexpectedly scroll the page before updating the page in page back/forward.
Scroll behaviors around hash links
- Most frameworks and libraries reproduce wrong scroll behaviors around hash links.
Scroll position after reloading
- Most frameworks break the current scroll position after reloading.

Properties

Pjax is a low-level API for SPA easier, simpler, and less expensive than high-level APIs of SPA frameworks.

// SPA on Pjax
import Pjax, { FakeXMLHttpRequest } from 'pjax-api';

new Pjax({
  fetch: {
    rewrite: url =>
      FakeXMLHttpRequest.create(
        url,
        fetch(url, { headers: { 'Content-Type': 'application/json' } })
          .then(res => res.json())
          .then(data =>
            new DOMParser().parseFromString(
              `<title>${data.title}</title><body>${data.body}</body>`,
              'text/html'))),
  },
});

SPA on frameworks^*1	SPA on Pjax
Type	Framework	Library
Abstraction level	High	Low
Original template language	Yes	No
Intermediate layer	Yes	No
Data format	JSON	JSON or anything^*2
UX integrity^*3	Low	High
Technical property	Exclusive	Coexistence
Ecosystem	Dedicated	Common
Old servers	Dispose	Keep
New servers	Required	Optional
Work on servers	Redevelop all	Add JSON APIs^*4
Work on clients	Redevelop all	Reconstruct scripts^*5
Partial introduction	Coarse	Fine
Location	Servers and Clients	Clients
Server constraints	Strong	Nothing
Dependence	High	Low
Learning costs	High	Low
Development costs	High	Low
Operation costs	High	Low
Running costs	High	Low
Removal costs	High	Low
Renewal costs	High	Low

1 Such as React.
2 You can send any efficient format instead of JSON and parse it on clients.
3 Between MPA(standard web sites) and SPA.
4 Just do it.
*5 To manage the lifetime of existing scripts. Since such management doesn't depend on SPA, these scripts are sharable and reusable with MPA and other SPA libraries.

SPA frameworks are cancer of the web.

Features

Feature	defunkt	Turbolinks	falsandtru	Barba
SPA on Pjax (Use JSON instead of HTML)			✓
Multiple area update		✓	✓
Fallback area matching			✓
Shadow DOM support			✓
Content type verification		✓	✓
HEAD contents markless auto sync			✓
CSS markless auto sync			✓
Script markless auto load			✓
External script load	✓	✓	✓	✓
Inline script execution	✓	✓	✓	✓
Execution sequence keeping			✓
Non-blocking script load	✓	✓	✓
Subresource integrity verification			✓^*1
Rewrite request and response (XHR)			✓
Rewrite source document		✓	✓
Concurrent sequence integration			✓
URL scope			✓	✓
Browser history fix			✓
Scroll position restoration			✓
Unexpected scroll prevention			✓
NOSCRIPT tag fix			✓
History API support^*2			✓
No jQuery dependency			✓	✓

1 Excludes ES modules.
2 Ability to use pjax APIs and history APIs in combination.

Documents

https://falsandtru.github.io/pjax-api

Install

CDN

https://www.jsdelivr.com/package/npm/pjax-api

npm

$ npm i pjax-api

Usage

Note that this example specifies the latest version. You have to replace it with any specific version to preserve APIs from breaking changes.

<script src="https://cdn.jsdelivr.net/npm/pjax-api@latest"></script>
<script src="https://github.com/falsandtru/pjax-api/raw/master/assets/js/config.js"></script>

// config.js
import Pjax from 'pjax-api';
// or
const { Pjax } = window['pjax-api'];

new Pjax({
  areas: [
    // Try the first query.
    '#header, #primary',
    // Retry using the second query if the first query doesn't match.
    '#container',
    // Retry.
    'body'
  ]
});

Browsers

Chrome
Firefox
Safari
Edge (Chromium edition only)

falsandtru / pjax-api

readme