What is needed on the server side?

KrishnaPG commented 8 years ago

The documentation says, the static navigation GET /destination becomes GET /destination?spf=navigate for dynamic. which, I think, is achieved by class="spf-link" on the anchor link.

All this is fine. What is not clear is, how is the return JSON is achieved? Is the server supposed to monitor for spf=navigate queries and return the JSON ? Or does SPF does some magic to compute the 'difference' of the returned HTML as json?

If the server has to be aware of the spf=navigate then I think it defeats the whole purpose of having this SPF js hooked up on the front end.

tchiotludo commented 8 years ago

@KrishnaPG ; spf doesn't do this kind of magic you want. The main purpose of spf (from my point of view) is to replace some part of the html page, not the whole page. It's allow you to have a lot flexibility on what you are doing and the server must be aware of that. It's allow a lot of thing like prefetch only some div before the user request it for example.

If you look at a ajax full page refresh, look at these project : https://github.com/luruke/barba.js https://github.com/turbolinks/turbolinks

ztl8702 commented 8 years ago

I thought SPF handles diff-ing initially. But turns out it does not :( The tricky part on server side is how to know what is on the previous page, in order to calculate the difference.

In projects such as Drupal's Refreshless(https://www.drupal.org/project/refreshless), they add some "hash" to parts of the page, then sends those hashes back to server when requesting new page. The server then compares the old hashes with the new page, and only sends parts that haslve changed (have different hash).

I don't know how to use SPF to do the same thing. I don't think SPF allows sending extra information back to server for comparison.

tchiotludo commented 8 years ago

You are not obliged to know what is on previous page on serverside. It's a possibility that spf allow you, but not an obligation.

You can return a full page with this kind of response and you have the same behavior than turbolinks & barba :

{
  "head": "<!-- Styles -->",
  "body": {
    "container":"<!-- Full content of the page container-->",
  },
  "foot": "<!-- Scripts -->"
}

<html><body><div id="container"></div></body></html>

But the main purpose of spf is show on this image, keep the menu bar & change only main content : Nav

Depending on your serverside implementation, partial response can be easy. Personally, I'have a HMVC serverside. My main controller capture the output of child controller and output html or json depending on the spf querystring (or headers on my implementation).

Spf have a more powerful api than these alternative from my point of view and allow you all kind of things. For example, on my project, I don't use anymore spf.navigate() (that handle the browser history, ajax query, ...) and I used only the powerful spf.process that handle a spf response (json) and inject style / script and html. This allow me to handle a spf response and display it in a modal or tooltip (loading js / css dependency automatically)

Hope it's help

jhonsore commented 8 years ago

Hey all,

maybe too late, but no answer before was satisfactory, so, take a look at this:

How docs says:

When SPF sends a request to the server, it appends a configurable identifier to the URL so that your server can properly handle the request. (By default, this will be ?spf=navigate.)

In my case (using php), i just checked if there is a $_GET['spf'] in page request, if ok, i send spf json format, otherwise, i just send normal request (html page). Would looks like this:

if($_GET["spf"]){ //if spf cgi lets print our json echo { "head": "", "body": { "content": "", }, "foot": "" } }else{ //do normal request echo page.html }

(off course the structure is not like this dirty way, it is just the simple way to say how things works)

Easy, easy.

youtube / spfjs

What is needed on the server side? #418