morphdom VS bun

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.

Updating the DOM is not slow. In fact, there are libraries and frameworks that emphatically reject the virtual dom approach. morphdom is one such example of a DOM modification library. Svelte's author Rich Harris has been proclaiming for a while that virtual dom is an overhead (see e.g. this article). Google's lit-html and lit-element do much of what react does without the virtual dom.

It has a decent compatibility with both Jest and Vitest's APIs (you can track progress here so you can use it as almost a drop-in replacement for either. Just as Node's, it has describe/it, mock, test and others, but with the expect syntax (which I find more readable). For example:

In this third and final article in the series on HTML Streaming, we will explore the practical implementation of the Diff DOM Streaming library in web browsing. This approach will allow any website using web components to retain its state during browsing. We will discuss in detail how to achieve this step by step using VanillaJS and Bun.

At Node Conference 2023, Jarred Sumner (creator of Bun) showed a demo of server components in Bun, so there is at least partial support in that ecosystem. The Bun repo provides bun-plugin-server-components as the official plugin for server components. And while I haven’t looked at it in-depth, Marz claims to be a “React Server Components Framework for Bun”.

Continuously evolving, Bun is currently optimized for MacOS and Linux, with ongoing efforts towards Windows compatibility. Tailored for resource-constrained environments like serverless functions, it emerges as an ideal solution. The Bun team is committed to achieving comprehensive Node.js compatibility and seamless integration with prevalent frameworks. For those intrigued by Bun's potential and want to give it a try, more information is available on its website at https://bun.sh/.

Let’s say you are interested in learning more about Bun and probably give it a try. Bun has a website, where you can learn more about Bun and its features (including all the benchmark data captured in this issue), and here is the link.

Looks like it, it seems the 2% are mostly odd platform specific issues that the authors' did not deem very important (my assumption for the release happening anyway). AFAIK this[1] PR tries to fix them.

[1]: https://github.com/oven-sh/bun/pull/9729

Bun has a solution for it. First of all, it already has a list of trusted dependencies. For them, Bun will execute all necessary scripts by default. Otherwise, you can add it to trustedDependecies in your package.json file. In Bun community usage of trustedDependencies is a hot topic. There are several suggestions on how to improve it.

Install Node.js (or Bun, or Deno, or whatever JS runtime you prefer) if it's not there

I think maybe I was unclear. I'm talking about writing libraries that abstract across these differences and provide a single API, as sibling describes. I already know it's possible. I made a simple filesystem abstraction here[0] and a very simple HTTP library that uses it here[1]. They both work in Node/Deno and the browser. Unfortunately I ran into issues with Bun's slice implementation[2]. But I suspect there's a much better way of detecting and using the different backends.

[0]: https://github.com/waygate-io/fs-js

[1]: https://github.com/waygate-io/http-js

[2]: https://github.com/oven-sh/bun/issues/7057