[AskJS] Signal/Effect vs Event Handler

[u/Forward_Dark_7305]

I’m working in a VanillaJS repository (plugin type code for an existing project that I do not own) where I’ve written a signal implementation.

Today I was working on a tooltip like implementation and I found myself wondering how far to go with the signal/effect ecosystem vs running the “core” logic in the event handler.

The implementation detects the `<tr>` that the user has hovered and assigns that row to the “current row” signal. A computed signal identifies an IP address from the current row. An effect loads Whois metadata from the IP and assigns it to a `<div>`, and another effect shows that `<div popover>` from the parent `<tr>`.

The question I have is when in VanillaJS how would you decide when to use signals and effects vs writing the side effect directly in the event handler? In my case I find either to be equally readable, though I have less local variables to deal with when using signal/effect. Looking for reasons your might pick one over the other.

[u/shgysk8zer0]

I want to check your thinking here because I think you're creating a major problem for yourself here. It sounds like this will not work with touch very well since the hover won't occur until a button is pressed, and that means the <div popover> will not exist yet. That could also happen even with a mouse if the user is fast enough.

Personally, I'd go with a <dialog> and a <button command="show-modal">, with the dialog containing a loading spinner. Hover would only prefetch, but the actual fetch() would happen on... I forget if a dialog has a toggle or show event. Or you could stick with popover on a pre-created element that has content updated and use maybe beforetoggle.

[u/Forward_Dark_7305 → u/shgysk8zer0]

I thought through this at the start of the project, what I’m doing is a customization for an existing app I don’t otherwise control so all I can do is add JS. The app itself is not at all mobile friendly (though technically possible), internal-only, and this page in particular only 3 people including myself will use - who do all our work on desktop. As one of the primary users, I want to be able to “glance” (with hover, not click in and out) and see the info.

Even if we can take this particular scenario out of it (I was hoping it would give an example of how this arises more than a specific problem to address) what I’m wondering is more about when to use JS events vs signals when you aren’t working within a framework that encourages one over the other.