

Introducing Ractive.js: next-generation DOM manipulation - jackfranklin
http://www.guardian.co.uk/info/developer-blog/2013/jul/24/ractive-js-next-generation-dom-manipulation

======
rich_harris
Library author here. Will try to answer any questions!

Edit: Direct link to the project homepage
[http://ractivejs.org](http://ractivejs.org)

~~~
dustingetz
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/](http://facebook.github.io/react/)

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

~~~
rich_harris
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'?

~~~
dustingetz
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...](http://facebook.github.io/react/docs/interactivity-and-dynamic-
uis.html)

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

~~~
rich_harris
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.

------
irickt
Repo: [https://github.com/Rich-Harris/Ractive](https://github.com/Rich-
Harris/Ractive)

