Hacker News new | ask | show | jobs
by ozim 1212 days ago
How do you implement editable list of items where requirements are that:

- editing/creating new has to be in a popup - people don't want full page reload because they lose context (and have "feel" it beeing slow even if it is not) - edit-table is not a solution because amount of settings will fit popup - some things like item name in a list has to be updated in the list after saving in popip which requires two way data binding, because cannot do page reload - pagination and filtering is required and for same reason as above cannot be full page reload

I don't see how you implement that in a way that is maintainable with "sprinkling jQuery" on it. I would like to build it with full page reloads which would be fast and would take away complexity but every business analyst or product owner I saw was saying that "users feel" it is slow and they lose context even if list has stable sort and filtering was kept between reloads.

5 comments

As someone that's basically been forced to build SPAs their whole career, these kinds of comments are always the one I hunt down with hunger in these threads, because the "complaint posts" about SPAs always sound really nice: wait, there's "actual" frameworks (SSR platforms) that take care of all the things I hate implementing for me? Awesome! But then I come to the threads and there's comments like, "cool, but how do you implement {this thing that is one of the ten variations of things I implement in SPAs for my career}," and the answers are always varied but often boil down to "oh, yeah, actually, you should build an SPA for that."

Probably the majority of the internet doesn't need to be implemented as an SPA but I guess I just keep getting gigs for apps that do need an SPA implementation? Maybe I'm self selected for it by working so much in this "niche" of the industry? I have recently been tasked with building out an ecommerce thing and it's finally a time where I'm like wait why would I build this as an SPA, and I've heard that most of the internet is basically just ecommerce sites lol.

Anyway, I would love to see some of the common things I implement in SPAs, and how I'd implement them instead in Django or whatever, cause I'd love to stop having to reimplement cookie and auth management and whatever else these things supposedly give away for free

1. Highly dynamic tables of data with filtering, sorting, pagination, etc

2. Inline editing of a Resource (Widget of some kind) without needing to refresh the entire page

3. Inline progressive forms with lots of logic (one time I had to implement an SQL query generator game)

Or whatever else I'm not thinking of right now

I am mostly annoyed with people jumping out with absolutes which are fake.

Yes you don't need to make everything SPA - but yes SPA has its legitimate use cases. There will be always bunch of people overusing stuff or using it in wrong contexts but yeah complaint posts are usually written with narration of "all or nothing".

> complaint posts are usually written with narration of "all or nothing".

Mine wasn't, I specifically said that some UIs are complex enough to justify an SPA.

I do this in Preact and it is a breeze.

But I also did it in an old Rails app with a bit of jQuery and partials. The modal loaded its markup from an endpoint. Saving was an http post that returned html which I injected into the DOM using some basic sorting / filtering logic. It was… ok, but there was duplicated logic on the front and back ends. I think if I had to abandon SPAs again, I’d probably have the “save” endpoint return the full page and just replace the html each time so that all logic lived in one place. To hell with efficiency— it’d probably be just fine and quite simple.

With Angular it is not even a breeze it is something you have out of the box no questions asked. Save endpoint returns data only for single item on the list and it is updated in place in the list with two-way-binding on return of request.
This would be trivial in Hotwire with Rails
You can build certain sections of your UI in React (or whatever) without needing to rewrite your entire app as an SPA.
Phoenix liveview.