Consider using Google's/YouTube's SPF JavaScript library

SPF is Youtube's JS framework for RefreshLess-like navigation.

In a previous conversation with @wimsleer, Wim indicates his interests in porting RefreshLess to use SPF.

It turns out that I got a chance to test with SPF in my module for GSoC 2016. So I wrote a prototype, and I would like to discuss some issues I've met.

SPF uses id to locate elements on page

A typical response:

{
  "title": "Page Title",
  "head":
      "<style>CSS Text</style>
       <!-- and/or -->
       <link href=\"CSS URL\" rel=\"stylesheet\">
       ...",
  "body": {
    "DOM ID 1": "HTML Text...",
    "DOM ID 2": "..."
  },
  "foot":
      "<script>JS Text</script>
       <!-- and/or -->
       <script src=\"JS URL\"></script>
       ..."
}

Notice the "body" object, its keys are the IDs of elements to be replaced, and values are the content (innerHTML) of elements.

In Drupal, we cannot reliably get the innerHTML of a region, because we don't know what its wrapper will be like (it could be a <div>, <header> or anything).

What I did is to wrap each region in another <div> that has the ID for SPF to look for. (Code). But this could be problematic, as adding extra wrappers might invalid some CSS selectors.

SPF uses classes on links to determine whether a link should be handled by it

I haven't find a reliable way to add "spf-link" class to all links on the page. (There doesn't seem to be a HOOK_preprocess_link() hook).

So what I tried was to dynamically add class to links on page using jQuery after the page finishes loading.
Note that we also need to use SPF's events, so that when new parts are loaded by SPF, we can add classes to those updated areas on the page.

How to send previous page state back to server (for comparing which part has changed)

SPF does not necessarily implies sending only parts of the page that change. One could just make a big "container" div on the page and make SPF update the entire container every time.
The documentation site of SPF (https://youtube.github.io/spfjs/documentation/) uses static JSON files (Example) as SPF responses -- so there is no auto-detect on changes, same response every time.

This Github issue might help. Turns out we can send extra info as headers in SPF Requests.