back
18 comments
Sounds like a fresh approach to PJAX (https://github.com/defunkt/jquery-pjax)
This is similar to Facebook's "BigPipe"[0] right?

0: https://www.facebook.com/notes/facebook-engineering/bigpipe-...

I know it's practically a HackerNews trope by now to point this out, but this is a really poor name choice, given the abbreviation that they seem keen to use. (I'm referring to https://en.wikipedia.org/wiki/Sender_Policy_Framework in case it's not obvious.)
I love YouTube. I use it daily. I have some grief with the interface though. It seems like it doesn't want to be a webpage. So much of it feels custom-made as opposed to browser based. Navigation, scrolling, and image loading breaks for me all the time regardless of browser. So for me it feels risky to adopt their interface implementation.

I realize that YouTube is a crazy hard problem to tackle, and that is probably why stuff like this is necessary.

Interesting, but a lot heavier weight than the structural library that I built: http://intercoolerjs.org. From the docs:

  In dynamic navigation, only fragments are sent, using JSON as transport.
Why not HTML as a transport?
I don't think the added JSON.parse (which is very fast these days) is a "lot" heavier weight. Also, although I haven't looked, I would assume a more rigidly structured format like JSON for multiple fragments would be easier to programmatically reference different ones instead of parsing HTML or making some other assumptions about how the disparate fragments are delimited.
We built something similar with Up.js [0]. Rather than wrapping some responses in JSON, Up.js doesn't require any server-side changes. Fragments are selected client-side via CSS selectors.

0: http://upjs.io/

This looks great. I'm curious how the server knows which fragment of the page to return... or is there an assumption with this that only 1 section of your site changes from page to page?
I haven't used it myself, but judging from (a brief review of) the documentation, the server dispatches on the request URI and responds with content updates for an arbitrary number of fragments, each identified by DOM ID.
Ah, gotcha. So you are potentially returning more content then will be rendered, but still a faster situation then a full page reload. Thanks!
Well, no; when I say "arbitrary number of fragments", I mean there isn't a set limit established by the client code, not that the server should promiscuously return data the client may or may not actually need. A correctly designed application should never make a state transition that requires the server to guess about what the client's going to need to render.
Understood, which brings me back to the original question of wondering how exactly the server knows which fragments the client wants.
Again, that's entirely a matter of application design. The general answer is that the server uses the request URI and HTTP headers to determine which fragments are needed, but there are as many specific answers as there are applications following this paradigm. (Said paradigm, incidentally, is just that of the single-page application; this is only YouTube's specific implementation of it. It sounds like you might get more use out of a general treatment of how SPA's work, than of a deeper dive into the details of the specific implementation under discussion; it might be worth your while to take a look at http://singlepageappbook.com, which, while I haven't actually read it in any close detail, looks to be a pretty good overview and high-level discussion of the topic.)
I appreciate your responses, but I think we got off track somehow. I'm quite familiar with the general architecture of SPA's... my question is specifically about how this library implements this feature. I didn't see anything in the docs about how to use URI or HTTP headers (or anything else) to specify which fragments you want -- instead it just says "?spf=navigate will be appended to the url". So I was wondering how this library specifically thinks more fine-grained details about what to return should be communicated to the server.
Is this in any way different than the common rails feature?

    <div id="bar"></div>
    <% link_to "Load #{@widget}", @widget, remote: true, id: 'foo' %>

    $("#foo").on("ajax:success", function (e, data, status, xhr) {
        $("#bar").html(xhr.responseText);
    });
I thought rendering partials and dynamically replacing them has been a standard feature of most frameworks. Rails even renders a working link so the page works without the javascript.
This sounds surprisingly like the old HTML "frames"..
I suppose they are attempting to achieve the same goal, but this does not suffer from the drawbacks that frames do (most notably the weird "which page am I actually on"? confusion and potential for frames-within-frames-within-frames-etc).