Open-event-frontend: Speakers Page also DOSes the server

[iamareebjamal]

https://eventyay.com/e/3689bc98/speakers (DO NOT OPEN!!! It will crash the server)

When accessing speakers page, the frontend sends query to acess all sessions of all speakers in separate queries, then all tracks of all all those sessions, and then all microlocations of all those tracks. All of this happens without include, so there are 1000s of requests handled by the server within seconds.

If there are 200 speakers and in aggregate all of them have 300 sessions, then 300 tracks and 300 microlocations, then 900 requests will be sent to server just to show the speaker names and picture. This is where include should be used instead of sending 900 requests to the server, but is still not needed.

If you need to show the sessions of speakers, then request them when someone clicks on the speaker name. Not just load all sessions and tracks and microlocations redundantly.

Frontend has been disassociated from reality and from what it loads on each page, please analyze the resources fetched and reduce the queries to the server. Just look at network tab and ensure than no more than 5 requests (obviously not a hard rule) are sent to the server and the payload is within 100 KB (which is still a LOT).

Related: #3642

[kushthedude]

We don't also need to load tracks and micro-location on this page. Only the speaker and their related session should be enough. I will take a look at it

[iamareebjamal]

No, even they shouldn't be loaded

[iamareebjamal]

So, there was a bug in docker itself. docker-proxy in docker 18 stopped listening on port 8080 (server) when there were a lot of requests, even though it continued to listen on 4200 (frontend) for some reason. So even when the worker restarted and was listening inside the container, the host connection on port 8080 got refused because docker-proxy stopped listening to 8080. Upgrading to docker 19 fixed the issue, and server won't throw 502 now, but worker still gets overloaded due to this and restarts, so this needs to be fixed

[kushthedude]

@iamareebjamal This may soon be a frequent problem, As there are going to be a huge number of session/speakers for Summit-2020.
Proposed solutions:

• Implement Pagination in the Speakers/Session page instead of loading each of them.
• Implement an infinityLoader for the Speakers Page. And remove the extra information from the speaker column like Micro location, Session Summary as these properties can also be accessed from the Session page.
• Redesign the Speaker/Session Page and merging them into one where we can enlist the session with their corresponding speakers in spite of having two tabs for each of them.

[iamareebjamal]

Or, implement infinity loader in speakers/sessions page. Don't use include in the list fetching phase. Only load session, track and microlocations when someone expands the speaker info section. Best of both worlds and minimal changes

[iamareebjamal]

@kushthedude I find the infinity loader to be implemented in a very strange way. It only loads items when it is at the very bottom of the list, and rather than loading the items below the currently loaded items, it pushes all the items above. Any user would want to stay at the point they were at when loading happened. Secondly, even if I am at the bottom of the list, it doesn't load items until I scroll a few times up and down. I don't know how others may feel about it but it may have to be adjusted/implemented in a custom way or reverted

Lastly, more important than lazy loading the speakers is lazy loading the sessions, track and microlocation as it is the one sending ridiculous amount requests to load the items not even needed till someone clicks on the speaker card.
And I still have not seen microlocation anywhere in the speaker page UI. Can you show me a screenshot?

[iamareebjamal]

Ideally, user should not even notice that they have reached the end of the feed. It should be seamless. Compare facebook, https://twitter.com, https://newsgallery.com to the current implementation of speakers page

[kushthedude]

I will check but infinityLoader will load the items when you are at the
bottom of the list.

On Sun, 26 Jan, 2020, 22:09 Areeb Jamal, [e-mail] wrote:

Ideally, user should not even notice that they have reached the end of the
feed. It should be seamless. Compare facebook, https://twitter.com,
https://newsgallery.com to the current implementation of speakers page

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/fossasia/open-event-frontend/issues/3650?email_source=notifications&email_token=AKQMTLUXVDCNLHMRZV7TDJTQ7W4EFA5CNFSM4JQYQ7O2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJ5YDVI#issuecomment-578519509,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AKQMTLUD7ZWGDP3LVMVJZDLQ7W4EFANCNFSM4JQYQ7OQ
.

[iamareebjamal]

Check the sites above, everyone loads stuff when user is a little bit above the bottom so that they don't have to stare at the loader for 5 seconds. And also, the loader seems stuck until scrolled frivolously up and down a few times.

[kushthedude]

@iamareebjamal Are you referring to this https://github.com/ember-infinity/ember-infinity#cursor-based-pagination ?

[iamareebjamal]

No

[iamareebjamal]

See triggerOffset https://github.com/ember-infinity/ember-infinity#infinity-loader

[kushthedude]

And I still have not seen microlocation anywhere in the speaker page UI. Can you show me a screenshot?

[kushthedude]

@kushthedude I find the infinity loader to be implemented in a very strange way. It only loads items when it is at the very bottom of the list, and rather than loading the items below the currently loaded items, it pushes all the items above. Any user would want to stay at the point they were at when loading happened. Secondly, even if I am at the bottom of the list, it doesn't load items until I scroll a few times up and down.

@iamareebjamal I am unable to reproduce this, When the items load I am at the place where I was when items were not loaded. Also, I didn't need to scroll up and down .
I have enhanced the loader a bit to reduce the waiting time as at every loading it fetched the load spinner.

[iamareebjamal]

Closing now as issue is solved. Will reopen if UX is bad