https://github.com/jongacnik/streamjax
🚿 streaming pjax???
https://github.com/jongacnik/streamjax
pjax stream
Last synced: 2 months ago
JSON representation
🚿 streaming pjax???
- Host: GitHub
- URL: https://github.com/jongacnik/streamjax
- Owner: jongacnik
- Created: 2017-02-06T08:19:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-13T08:15:31.000Z (over 8 years ago)
- Last Synced: 2025-02-12T18:18:51.990Z (4 months ago)
- Topics: pjax, stream
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# streamjax
*Very* experimental pjax implementation which streams content into container using an [`iframe` and `document.write`](https://jakearchibald.com/2016/fun-hacks-faster-content/)
**Warning: not actually on the npm registry ☢️**
## Example
```js
var streamjax = require('streamjax')
var sjax = streamjax({
container: 'main'
})
sjax.on('unload', function () {
console.log('before stream')
})
sjax.on('load', function (e) {
console.log('after content fully streamed', e.url, e.location)
})
```
Now on any anchor click, `streamjax` will perform an XHR request and attempt to stream the contents of the request into the container element.
## Heads up
Since the content is *streamed* into the container, there is no way to parse the HTML being XHR'd. This means you must send an html partial with **only** the content which should end up in the container (and you can only update a single container). This differs from traditional pjax implementations where you can send an entire HTML page through the pipes and update multiple containers.
You can pull this off on the server end of things by checking for a `XMLHttpRequest` header and sending a partial. Doable in a static site scenario too with some pre-planning.
## FAQ
### What?
[Pjax](https://github.com/MoOx/pjax) is a super handy way to appify a static site, but the need to complete the entire XHR request before setting `innerHTML` of the container can actually slow things down vs standard page refreshes. Streaming the content as the req is happening lets things get on screen faster.
### Says who?
Some ideas are being thrown around over on the HTML Standard Github about [a way to stream content into an element](https://github.com/whatwg/html/issues/2142). In that thread Jake Archibald links to a write up about performance gains streaming content into an element by [hijacking `iframe` and `doc.write`](https://jakearchibald.com/2016/fun-hacks-faster-content/) vs traditional pjax-style implementations. All credit to Jake on the hard work – thanks! ✨