undefined | Better HN

0 pointskeymone5y ago0 comments

imagine an SPA for a basic CRUD system. there's a list view and details view with a delete button that returns you to the list.

in liveview server renders me the list view, i click details, server renders me details view, i click delete button, server renders me the list view.

if there's big latency/connection error/etc between clicking delete and getting back the rendered list - user just has to wait.

in spa i could optimistically assume that delete worked and render the list that i already have cached without the deleted item, allowing user to continue working immediately and if there was a disconnect/error - i could retry that delete in the background without bothering user, only prompting them after some number of retries.

don't see how could i implement this workflow in liveview.

0 comments

7 comments · 2 top-level

sfusato5y ago· 3 in thread

You can do that in LiveView just as easily. Remove the item client side, then pushEvent to the server to handle the deletion. In case of any errors, notify the user, refresh the state .etc

pushEvent, pushEventTo (from client to server) [0]

push_event (from server to client) [1]

[0] https://hexdocs.pm/phoenix_live_view/js-interop.html#client-...

[1] https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#p...

keymoneOP5y ago

> Remove the item client side

so, "just use JS"?

> In case of any errors, notify the user, refresh the state .etc

so, "just use JS"?

every time you say "just use JS" you're diminishing the usecase of liveview because if i need so much js logic - why do i need to also use liveview if i can just use a framework/environment where i can share codebase between client and server seamlessly and have full control.

sfusato5y ago

You stated don't see how could i implement this workflow in liveview.. I've presented you a way.

In case of any errors, notify the user, refresh the state .etc => This would all be done server-side and the client side would simply react automatically. The client side code in this case would have been minimal.

I don't think I'm diminishing anything. For quite a few years I was neck deep in React/Vue world. Now that I'm actively using LiveView, I can properly compare the differences between both approaches, cons and pros. For any new project, in the majority of cases I would pick Elixir with Phoenix LiveView instead of Elixir/Phoenix (backend) with React/Vue (frontend).

1 more reply

diveanon5y ago

I did a deep dive into liveview and this was my take away.

Its nice tech, but once you start introducing JS again to improve UX you really start asking yourself why you didn't just build it with react in the first place.

realusername5y ago· 2 in thread

You could just delete the row with alpine or do a 3 line JS hook if you wanted to, it's quick and easy. That sounds a strange workflow though, it's generally better to make users wait for deletion.

keymoneOP5y ago

isn't it funny that when you're trying to praise tech you like, all sorts of examples jump into mind, but when you try criticizing something you like - all that imagination vanishes and all existing examples can be dismissed as strange :)

realusername5y ago

I find it strange because that's not a behaviour I would use, but to each their own, it's the beauty of the web :).

If you really want to do it, you can add 3 lines on your project and that will work with any CRUD page you're building, I don't think that's unreasonable or difficult to do.

Edit:

Actually thinking about it, if you just made a form for that delete button and a phx-disable-with="" on the row it would probably work straight away without any JS hook.

1 more reply

j / k navigate · click thread line to collapse

0 comments

7 comments · 2 top-level

sfusato5y ago· 3 in thread

You can do that in LiveView just as easily. Remove the item client side, then pushEvent to the server to handle the deletion. In case of any errors, notify the user, refresh the state .etc

pushEvent, pushEventTo (from client to server) [0]

push_event (from server to client) [1]

[0] https://hexdocs.pm/phoenix_live_view/js-interop.html#client-...

[1] https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#p...

keymoneOP5y ago

> Remove the item client side

so, "just use JS"?

> In case of any errors, notify the user, refresh the state .etc

so, "just use JS"?

sfusato5y ago

You stated don't see how could i implement this workflow in liveview.. I've presented you a way.

1 more reply

diveanon5y ago

I did a deep dive into liveview and this was my take away.

Its nice tech, but once you start introducing JS again to improve UX you really start asking yourself why you didn't just build it with react in the first place.

realusername5y ago· 2 in thread

You could just delete the row with alpine or do a 3 line JS hook if you wanted to, it's quick and easy. That sounds a strange workflow though, it's generally better to make users wait for deletion.

keymoneOP5y ago

realusername5y ago

I find it strange because that's not a behaviour I would use, but to each their own, it's the beauty of the web :).

If you really want to do it, you can add 3 lines on your project and that will work with any CRUD page you're building, I don't think that's unreasonable or difficult to do.

Edit:

Actually thinking about it, if you just made a form for that delete button and a phx-disable-with="" on the row it would probably work straight away without any JS hook.

1 more reply

j / k navigate · click thread line to collapse