-1

In Instagram (web), when you click back/forward arrows - I've noticed that the content isn't loaded from the server and it immediately show up. After reading the docs on react.js + flux, I had this understanding:

Action -> Dispatcher -> Stores ... where the storeswould listen for changes and load new data from server in an array e.g: {"data": post_id: 10}

I really want to achieve this, since right now I'm loading content using ajax + push state (window.onpopstate = history.onpushstate = function() { ...... }).
And the problem with using this, is that all content loaded on scroll (e.g: posts) are lost during navigation. And when you return back, you start from beginning, so you have to scroll to the point you stopped at last time. I noticed this problem on Facebook website, yet not in Instagram...

So my questions are:

  • Does the immediate response comes from stores? If so in what format and how?
  • Is react.js the only way to achieve this, maybe using backbone or angular?
  • Why Facebook website doesn't use this and Instagram does?

Please give me some examples (code) or links, since I'm new to this..Thanks

user6227254
  • 1
  • 2

2 Answers2

0

I think the easiest way to implement this behavior would be to cache the ajax responses somewhere.

That way you wouldn't have to change any of the react/flux code (or any framework at all). When you click the back button, the API would return a cached result instead of making a new request, and the data would be available instantly.

Here is a naïve implementation with the memoize() function from lodash :

var fetchPage = function(id) {};
var fetchPageCached = _.memoize(fetchPage);

That way, if you call fetchPageCached() twice, it will return the same result but issuing only one ajax request.

That said, I don't know why facebook doesn't cache previous pages...

felixgirault
  • 1
  • 1
0

It turns out that this feature is called time travelling and it comes from flux or redux. I use redux, go check it out: http://redux.js.org

user6227254
  • 1
  • 2