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

  • 1. The content on the back/forward arrows is probably being loaded and cached. – Robert Harvey May 14 '16 at 22:06
  • 2. Of course not. – Robert Harvey May 14 '16 at 22:06
  • 3. The short answer is that facebook is not instagram, and they made different design decisions. – Robert Harvey May 14 '16 at 22:07
  • Robert Harvey - After experimenting I think that Instagram creates objects for each page, hides them and shows during navigation, because this feature disappears after page reload.. What do you think? – user6227254 May 14 '16 at 22:46
  • Sounds reasonable to me. – Robert Harvey May 14 '16 at 22:48

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...


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.