Clicks, Clicks Everywhere

Development RFCs
#1

Hello everyone :slight_smile:

I would like to discuss something that I was thinking for a while,
today we have many UI components that needs to detect clicks on them and outside of their container
to decide whether to be expanded, to disappear or to be modified in some other way.

what I was thinking is to set one click event listener on the window / document / body,
and each time a click would happen somewhere in the application,
it will update the Redux state with a simple object
of the attributes of the clicked element,
page and position where it had happen
and a timestamp.

In this way, other components that wants to get modified by mouse clicks can easily listen to the state changes, avoid extra event listeners and increase performance.

I am not sure if it is possible,
but a long term goal could be actually to create an UX INSIGHTS mechanism
by tracking the users clicks - if they agree - and keeping track of most visited pages in our app,
gather info about the most common scenarios or complication they have…
but that’s for another post right? :exploding_head:

anyway I will glad to hear what are your thoughts and wisdom on this, thanks :slight_smile:
@ui_ux

#2

I don’t think I like the Idea behind it.

Events tell you what happen.
State tell you how the UI should look like.

So the life-cycle is:
1 - Create initial-state -> 2 - Render UI based on this state -> 3 - listen to events -> 4 - Update the state -> Go back to stage 2 (render the UI)

You are basically saying, “Let’s change the State so it will also tell you what happened”, Then the lifecycle would be:
1 - Create initial-state -> 2 - Render UI based on this state -> 3 - listen to events -> 4 - Put the event in the State -> 5 - Rerender the UI -> 6 - Change the state if there is an event that should update the state -> 7 - Go back to stage 2 (render the UI)

Doesn’t stage 4 to 6 are redundant?

#3

In this way, other components that wants to get modified by mouse clicks can easily listen to the state changes, avoid extra event listeners and increase performance.

do we suffer from performance issues in this area? is there some POC measuring the improvement?

I am not sure if it is possible,
but a long term goal could be actually to create an UX INSIGHTS mechanism

Are there some existing libraries that could be used for this? I’d prefer not to write such tool ourselves, this is not the Foreman project domain. I’m sure we could get RH sponsorship for Pendo account if you’re interested.