2 ms·
> Now suppose though that each thumbnail in the grid can open a bigger preview dialog that has more images, a bigger description, and it's own add to wishlist b
by timr 5y ago
> Now suppose though that each thumbnail in the grid can open a bigger preview dialog that has more images, a bigger description, and it's own add to wishlist button. You can click that button, and it does the same thing. You close the dialog, but now your grid item needs to reflect that it's already been added to the wishlist. These things get really tiresome to keep building, something that I'm sure isn't new to you if as you say, you've been in software a while.
I've done this many times, using plain-old jQuery and server-side rendering, and it really isn't that hard. The "conventional" way is to (of course), render the preview(s) with classes or data attributes on the updatable elements s.t. you can quickly identify the elements that need to change (say $('.wishlist-count').text(updatedCount) for the sake of argument).
For more complex things (let's say you need to be able to insert a complicated, but slightly different, object in the wishlist, for example), you can render a template into the page, dup it on wishlist addition, and populate the variable data in any number of different ways. You can even create JS objects that encapsulate this kind of logic (e.g. Wishlist.add(itemNumber)) without much additional effort. No framework required.
Now, I grant you that when you need to do this for many different kinds dynamic elements that all interact in different ways, or when you need to absolutely guarantee minimal re-rendering, you might want to jump to a framework. But I still feel that most front-end people these days instinctively rule out simpler approaches that would work just fine, because they're prematurely optimizing. Or worse...because they simply don't know anything other than React.