Introducing Ractive.js: next-generation DOM manipulation | Hacker News Reader

Introducing Ractive.js: next-generation DOM manipulation

guardian.co.uk

19 pointsjackfranklin6 comments

Library author here. Will try to answer any questions!

Edit: Direct link to the project homepage http://ractivejs.org

Ractive.js has some things in common with Facebook React, if you guys are interested in declarative DOM, react merits close study. React diverges from Ractive (and other databinding "things") by removing almost all mutation of models from the programming model, which removes a lot of complexity and is a pretty big deal.

http://facebook.github.io/react/

edit: upon closer study, Ractive seems to be more similar to React than I first thought.

Definitely. Ractive has superficial similarities to Angular (e.g. Mustache templates) but is probably closer to React in concept. Poking under the hood of React is high on my todo list.

I'm interested to know what you mean by 'removing almost all mutation of models'?

from [1]: "In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way."

So you don't actually do DOM mutation yourself, nor do you "update" the DOM in response to events on models that changed. You think in terms of "pseudodom", not actual DOM, so if any state changes or an event fires you can just redraw all the pseudodom instead of worrying about finding the right place in the dom that you need to update.

[1] http://facebook.github.io/react/docs/interactivity-and-dynam...

Sorry, I don't mean to derail your thread.

Not at all, these discussions are useful. I think React and Ractive actually handle this in a similar way - Ractive maintains a 'parallel DOM' (which is basically the result of populating the parsed HTML template with data), and items within the parallel DOM are responsible for updating the real DOM as and when necessary.

So both React and Ractive are concerned with doing the least amount of DOM manipulation possible.

Repo: https://github.com/Rich-Harris/Ractive

Reply on news.ycombinator.com