React vs. Backbone in 2025

backbonenotbad.hyperclay.com

4 points by panphora 2 months ago · 3 comments

Reader

> Something hackable like …

I've been thinking and experimenting with re-rendering the whole DOM[1]. I'm aware there are libraries for merging DOM trees, but I'm limiting the project to native APIs. I'm following React's declarative model with a 10 LoC React.createElement implementation. Since there's no native DOM merge API, I'm mutating the DOM in two places, but reusing the components.

So far, I believe that given a merge DOM function or native API, we can get the benefits of React with a few utilities.

[1] https://github.com/ericfortis/mockaton/blob/main/src/Dashboa...

---

> Is there a better model?

IMO, React class components with something like Meteor’s ReactiveVar for state. Here’s an implementation for that standalone state:

https://github.com/uxtely/js-utils/tree/main/reactive-state

panphoraOP 2 months ago
This is a really cool approach! I checked out your Mockaton dashboard code and love what you're doing. Here's a simplified example of your pattern that really showcases its elegance:
```
  // Using your minimal native DOM library (15 lines)
  function TodoApp() {
      return r('div', null,
          r('h1', null, 'Todo List'),
          r('ul', null,
              store.todos.map(todo => 
                  r('li', { 
                      className: todo.done ? 'done' : '',
                      onClick: () => store.toggleTodo(todo.id)
                  }, todo.text)
              )
          ),
          r('input', {
              placeholder: 'Add todo...',
              onKeyDown(e) {
                  if (e.key === 'Enter') {
                      store.addTodo(this.value)
                      this.value = ''
                  }
              }
          })
      )
  }

    // Full re-render on any change - just replace everything!
    store.render = () => document.body.replaceChildren(...TodoApp())
```
What I love about this: - Zero build step - no JSX transpilation, no bundler needed - Direct DOM access - `this.value` just works, no synthetic events - Brutally simple - the entire "framework" is ~10 lines
You're absolutely right that a native DOM merge API would unlock this pattern completely. I just wish this could happen in the DOM instead of JS, so that we could get the power of the DOM as an intuitive model to think about instead of abstracting it into an amorphous data structure.
The fact that it has no build step and works directly on the DOM is fantastic — very similar to Backbone in terms of being able to understand what's happening under the hood! You can pop open devtools, see exactly what's happening, and modify it on the fly. No virtual DOM, no reconciliation mysteries, just functions returning DOM descriptions that get wholesale replaced.

Settings

React vs. Backbone in 2025

Keyboard Shortcuts