Idea: Preload .json files on link hover

[DavidWells]

Had this idea the other day similar to what https://github.com/dieulot/instantclick does.

The idea is having <Link> prefetch the page's corresponding .json data file when a link is hovered on.

Link hover -> prefetch json -> update redux page store (without actually changing the route) -> user clicks for instant page load

Not proposing to do this for all links but might be interesting for better UX with a 'faster' page load times. =)

Alternate crazy idea: Preload based on mouse position like http://gabrielbull.github.io/react-aim/ =P

[thangngoc89]

I like this idea. I think we can package this into a HOC for PageContainer

[MoOx]

Good idea :)

[thangngoc89]

http://instantclick.io/

[amsdamsgram]

Hi, is this issue open to new contributor / first timer?

[thangngoc89]

@iDams yes. That's why it was tagged with contribution welcome.

[amsdamsgram]

@thangngoc89 Nice, I'll give it a try with HOC for PageContainer

[thangngoc89]

@iDams Nice. But I think it should be a HOC for LayoutContainer. We want to catch all links, not just links inside markdown content.

[amsdamsgram]

@thangngoc89 I don't see any LayoutContainer in the project.

[thangngoc89]

@iDams sorry. It was renamed to AppContainer. Any way, this doesn't change anything. It's a HOC, we can mount it where ever we want

[amsdamsgram]

@thangngoc89 You're right. Thanks!

[amsdamsgram]

What is the difference between src at the root and src in /docs?
On which one should I focus on?

[thangngoc89]

@iDams hi there. src was the core of Phenomic. And /docs is a website which is created by Phenomic (well dogfooding) so if you want to work on a feature to Phenomic, you will need to focus on src

[MoOx]

@iDams use the chat https://gitter.im/MoOx/phenomic if you need a hand for this :)

[DavidWells]

Should the hover add the page to the pages array or to a new key preFetched in state?

I had plans on using the pages state for some analytics stuff and it won't be accurate if the hover adds stuff to it (aka visitor may not have actually visited page)

There are potentially other reasons why we'd want this prefetched page in a different key for remote debugging etc.

[MoOx]

@DavidWells pages store will go await soon, don't rely on this. Phenomic data won't be store in redux anymore (read only, no real need), and we will provides HoC for consuming collection instead of the current mess.

[DavidWells]

Ok cool. Looking forward to seeing some of the updates.

Redux isn't going away is it? I'm using that for user auth stuff (I guess it would still work with phenomics wrapper though heh)

[MoOx]

Redux is going await for Phenomic, but you will definitely still be able to use it on your own. I will provide migration instructions for people that rely on it, don't worry ;)

[amsdamsgram]

@thangngoc89 @MoOx thanks!

[DavidWells]

@MoOx @thangngoc89 I'm trying to get this rolling.

Where would I start?

If redux is going away, where is the fetch call happening and how can I add the requested json to the cache? https://github.com/MoOx/phenomic/blob/master/src/redux/modules/pages.js#L94-L97

[thangngoc89]

@DavidWells make a HOC that add event listener on every link inside it. The callback for that listener should be passed as props. We can swap it later when redux goes away

[thangngoc89]

(basically you are making a React component)

[amsdamsgram]

@DavidWells I was already trying to work on it but you can do it. You started the issue and I don't have time right now to work on it. I'll take another issue when I see one for new contributor ;)

[MoOx]

@DavidWells not sure what is the best approach yet, I am finishing webpack 2 integration + caching and I will remove redux after that (and will think of a way to handle this issue).

@iDams you can probably take any issue you want, just ask for it so we can point you in the right direction :)

[amsdamsgram]

@MoOx sounds good! 👍

[thangngoc89]

@iDams be sure check out our new Help wanted board

[amsdamsgram]

@thangngoc89 I will thanks!

[DavidWells]

@MoOx @thangngoc89 Is this possible for me to start working on with the current setup or does redux need to be removed from the internals first?

I want to start prefetching the json files for a even snappier experience =)

[MoOx]

I would advise to wait, I am going to work on the new collection API this week (so redux removal planned). But maybe if you are in a hurry, you can take a stab at it right now, and I will handle the change when removing redux...
Or maybe you can handle that in your project directly? Not sure if that easy but seems feasible :)

[DavidWells]

Fetching the data is no problem. The question is where to put it :)

Sounds like that will be changing with this though.

I will write the logic for the component.

Is there an issue / branch to follow along on the new collection API?

On Sep 27, 2016, at 2:35 AM, Maxime Thirouin notifications@github.com wrote:

I would advise to wait, I am going to work on the new collection API this week (so redux removal planned). But maybe if you are in a hurry, you can take a stab at it right now, and I will handle the change when removing redux...
Or maybe you can handle that in your project directly? Not sure if that easy but seems feasible :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[MoOx]

Not really but #712 and #609 should do it (it's your issues so you will already be notified)

[DavidWells]

Hey @MoOx any updates on how the collections are going to work without redux?

Do you want help/ideas on the collections updates?

My main goals would be:

1. minimizing the window.collection object for smaller html files.
2. loading window.collection via a separate .js or .json file to cache it. (perhaps even lazy-loading the collections.js file after the page loads)
   <script src='/collection.js'>
3. Gain access to the new page setup (instead of the redux pages key). This will let me create this hover link prefetching component
4. Hopefully convert/normalize the collections setup to grab data directly via url or some other unique keys for constant lookup time for data. (related)

something like:

window.collection = {
   'url-slug-here' : {
      data: 'link-to-data15562.json',
      otherDataIWantToGrabWithoutWaitingForJSONDownload: 'blah',
   },
   'other-url/slug/here' : {
      data: 'link-to-data12313.json',
      otherDataIWantToGrabWithoutWaitingForJSONDownload: 'title xyz',
   },
}

Then I could grab data super easily without having to loop through potentially large collections. Just a simple var myData = window.collection['other-url/slug/here'] would work.

Let me know your thoughts and how I can help!

Also related: #713 (comment)

[MoOx]

@DavidWells I am going to work on the collection refactoring right now, so stay tuned.

Not sure we will be able to remove the collection completely. Need to think about this more.

Meanwhile I think using a script to load it is pretty easy to handle. Will try that.

[MoOx]

See also https://github.com/aweary/react-perimeter

[MoOx]

This will be a feature that will come later and that won't be tied to json or whatever comes with the link