morphdom VS turbo

All of what I'm talking about is doable through libraries today (or you can write it yourself). But making things available through DOM APIs create a new baseline where the very same tools are made available for anyone, no matter the framework (think: document.querySelector APIs).

Regarding patch, morphdom explains very well the difference between replacing and patching the DOM [1]:

> Replacing an entire DOM tree is fast but loses internal state (e.g., scroll positions, input carets, CSS transitions). Instead, we aim to transform the existing DOM tree to match the new one, minimizing changes and preserving state.

---

1: https://github.com/patrick-steele-idem/morphdom

morphdom

And sure enough, it works! So what's going on here? Well, clicking the link invokes our reflex, which gets executed right before our current controller action runs again. It allows us to execute any kind of server-side logic, as well as play with the DOM in various ways, but with ruby code. Then, the DOM gets morphed over the wire.

It's super simple actually. And that is in large part to (Morphdom)[https://github.com/patrick-steele-idem/morphdom] which I'm using to compare the output of render() to what is already on the DOM. Morphdom will patch the differences.

I'm using morphdom to patch our DOM. Its a very simple library that compares two DOM elements and updates only the differences. It is extremely performant and does not even use a Virtual DOM, just the DOM you already have!

using HTML-diffing libraries like morphdom to efficiently update elements on the page

no it actually looks like morphdom is what i'm looking for.

It tries to morph into existing DOM (with https://github.com/patrick-steele-idem/morphdom). In case of fail, there is fallback to HTML replacement with outerHTML. All DOM operations after action occurs on component level, not the whole page.

Today, we’re going to build a live search experience once more. This time with StimulusReflex, a “new way to craft modern, reactive web interface with Ruby on Rails”. StimulusReflex relies on WebSockets to pass events from the browser to Rails, and back again, and uses morphdom to make efficient updates on the client-side.

Whenever the JavaScript on the browser-side receives new HTML, it will update the current page using a DOM-diff approach (using morphdom). So only DOM nodes that have actually changed between the initial page load and the updated HTML will be updated.

There are two sides to the argument which I think should be treated separately: a) Is it a good idea overall? and b) is htmx implementation good enough?

a) I think so, yes. I've seen much more spa that have a completely broken page navigation. This approach does not fit all use cases, but if you remember that the whole idea of htmx is that you rely on webserver giving you page updates as opposed to having a thick js app rendering it all the way it makes sense. And yes, js libraries should be wrapped to function properly in many cases, but you would do the same with no react-native components in any react app for example

b) I don't think so. htmx boost functionality is an afterthought and it will always be like this. Compare it with turbo [1] where this is a core feature and the approach is to use turbo together with stimulus.js which gives you automagical component life cycle management. Turbo still has it's pains (my favorite gh issue [2]), but otherwise it works fine

[1]: https://turbo.hotwired.dev/

The TypeScript configuration used in previous attempts was fundamentally flawed. From tsconfig.json prior to removal in commit 0826b8152c0e97f19d459c1a1c364fa89cc62829

https://github.com/hotwired/turbo/pull/971/files

Turbo

As you can see in the example above, I'm using Turbo Frames to give a single-page application feel, while not having to write any JavaScript.

I also recommend checking out the docs for Stimulus and Turbo to familiarise yourself with all their features and the APIs used in this series.

https://github.com/hotwired/turbo