26 ms·

Introducing Ractive.js: next-generation DOM manipulation

19 points by jackfranklin 13y ago

rich_harris 13y ago
Library author here. Will try to answer any questions! Edit: Direct link to the project homepage http://ractivejs.org http://ractivejs.org
- dustingetz 13y ago
  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 13y ago
    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 13y ago
      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-dynamic-uis.html http://facebook.github.io/react/docs/interactivity-and-dynam... Sorry, I don't mean to derail your thread.
      - rich_harris 13y ago
        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 13y ago
Repo: https://github.com/Rich-Harris/Ractive https://github.com/Rich-Harris/Ractive

19 points by jackfranklin 13y ago

Library author here. Will try to answer any questions! Edit: Direct link to the project homepage http://ractivejs.org http://ractivejs.org

dustingetz 13y ago
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 13y ago
  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 13y ago
    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-dynamic-uis.html http://facebook.github.io/react/docs/interactivity-and-dynam... Sorry, I don't mean to derail your thread.
    - rich_harris 13y ago
      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 13y ago

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