Live data from Hacker News

I made a better DOM morphing algorithm

joel.drapper.me

41–50 of 58 posts

Re: I made a better DOM morphing algorithm

#41
Super interesting, I'm just getting into DOM morphing libraries to try to patch around what I've found so far as the main limitation of the htmx approach: losing DOM on swaps. I started a discussion around some of the issues here: https://github.com/bigskysoftware/htmx/discussions/3501

Someone proposed using ideomorph, but it doesn't seem to address the issues I've encountered. Curious if you think a different morphing approach would help?

Re: I made a better DOM morphing algorithm

#42
post #41

Super interesting, I'm just getting into DOM morphing libraries to try to patch around what I've found so far as the main limitation of the htmx approach: losing DOM on swaps. I started a discussion around some of the issues here: https://github.com/bigskysoftware/htmx/discussions/3501 Someone proposed using ideomorph, but it doesn't seem to address the issues I've encountered. Curious if you think a different morphi…

You can try Morphlex (this library) over at https://dm.rt.ht

(DOM Morph RealTime HyperText)

Re: I made a better DOM morphing algorithm

#43
post #40
post #24

Is there a library that can work with JSX? I'd like to render JSX on the server and only send the diff to the client. I started writing some experimental code, but it was a lot of work. https://github.com/geon/react-node-diff/blob/main/src/diff-r...

Wait but, don't you render the jsx to html? So you you can still perform the diff on the rendered html? Also, how do you know what you rendered last time? When you do the diff between what's in the browser and what the server just gave you, you have both sides. If you do it server side, you could... Render twice, once before and once after the state change? Or keep a server side cache?

The server would keep a copy of the virtual dom during the session. Each change would be diffed and the diff sent to the client to apply. The client would only apply apply changes from the server, not change the dom on its own, so they wouldn’t get out of sync.

I can render to html, but then I’d need to parse the html back do diff it. Seems stupid.

I tried building a redux-style spa like that. Worked fine. https://github.com/geon/server-side-spa/tree/main/src/server

Re: I made a better DOM morphing algorithm

#44

I'm very interested in this! I've been working on some prototypes for possible immutable DOM APIs and though I haven't gotten that far in experimenting with it I've been expecting to encounter the same problem that this library is designed to solve: in my system the DOM will be represented as a deeply immutable tree of JS objects, arrays, and such, so a state update might consist of being given references to two immu…

The novelty here is identifying nodes in a list more consistently vs existing options like morphdom. There is a ton of prior art you can draw from, this is called a virtual DOM and is the approach used by React and many contemporary libraries.

The vdom idea isn't new to me but doing it with structural identity hashes is a bit different that what React does, no?

Re: I made a better DOM morphing algorithm

#45
post #29

I’m curious, what got you interested in solving this particular problem? I.e. what was your specific use case? Most websites work fine with plain html. If you need something fancier, the world seems to have settled on using React. I get that this is to let you render html on the backend and then stream it to the site so that JS can update the dom. But why? Genuine question; I’m not saying there’s no good reason.

I've written SSR SPA frameworks with basic DOM "morphing" - e.g. I need to keep a sidebar from changing the HTML content/state when you click on a link, and I've always found advanced DOM morphing to be sketchy/bug prone and unnecessary. The way I do it is to update everything _except_ for the DOM nodes that need to be excluded (via data attributes), e.g. the sidebar or a video player. I have found no problems with t…

Do you have an example of this technique that you can link to, or a fuller discussion of it?

I have a soft spot for Alpine and I’m always on the lookout for things I can do with just Alpine.

Re: I made a better DOM morphing algorithm

#46
post #36
post #8

Earlier quoted context omitted.

> the world seems to have settled on using React. The world might have, but I personally have not!!! x( (I don't think the world really has, the same way the world moved on from jQuery at some point :) and jQuery was probably more widespread)

jQuery is used far more than React. https://w3techs.com/technologies/overview/javascript_library

But if you compare google trends you will find that the crossover point of react vs jQuery was somewhere around 2018. In other terms, jQuery usage was much more widespread but it is not used for new projects anymore.

Re: I made a better DOM morphing algorithm

#47
I don't understand the hate that SPAs get when these are the hoops people will ultimately jump through to render stuff on the server. Maybe you really do have an application at hand, not a "web page" (whatever that is in current year), and then you might as well use the SPA approach to implement it.

Re: I made a better DOM morphing algorithm

#48
Hi! Idiomorph maintainer here. Congrats on the release! It's very, very cool to see how Morphlex is tackling some of the trickier subtleties of DOM morphing. We're in the R&D phase for the next version of Idiomorph, so its awesome to see how you're pushing things forward. I can see some overlap, like with `isEqualNode` (cheers to D* for cluing me into this API). But some of your ideas seem totally fresh, like your approach to solving the reordering problem. I'm looking forward to investigating whether any of these ideas would make sense in Idiomorph, and over all, I'm very pleased to see energy being put into making turn-key SSR more viable!

Re: I made a better DOM morphing algorithm

#49

Wouldn't 'DOM Merging' be a more descriptive term?

I don't think merging is an accurate term here. Merging makes me think you take the union of both. But in this case you have two DOM structures and want to make one exactly like the other. And morphing is a good term because you want to change it into the other, not just replace it.

Re: I made a better DOM morphing algorithm

#50
post #46
post #36

Earlier quoted context omitted.

jQuery is used far more than React. https://w3techs.com/technologies/overview/javascript_library

But if you compare google trends you will find that the crossover point of react vs jQuery was somewhere around 2018. In other terms, jQuery usage was much more widespread but it is not used for new projects anymore.

The trends of Google search doesn't imply anything by itself, just that less people search Google for jQuery than React. Which isn't entirely surprising in my view - people use search engines to learn about something they're unfamiliar with. That doesn't necessarily correlate with increased usage. I've searched for React (although not on Google) but never used it.

It wouldn't be too much work to understand a bit more about the comparative usage. Looking at recent commits of projects on GitHub would be a good start, but also skewed towards open source projects which doesn't represent all actual usage of course.

Another way would be to look through historic changes to websites to see if there's any changes to the source. It'd be a bit complicated because content changes don't necessarily mean anyone is touching jQuery or React pieces.

This also ignores any sort of private usage, which you won't get any reliable data on, and may represent a significant amount of actual usage.

At the end of the day, there's only so much accurate data available to make accurate conclusions about usage of software libraries that don't phone home. The best data available, as far as I'm concerned, is what I posted earlier - and it's still not perfect and doesn't support any claims other than what the data shows.

As a side note, I don't have any dog in this race. I do think it's interesting to get a better understanding of what pieces of software are being used, by whom, in what amount, etc. but it's difficult.

Post reply on HN