12 ms·

Indeed - as in 'interactive'. Got the name from Neal Stephenson's The Diamond Age, in case anyone wondered... Though it is also reactive, in the 'reactive prog

Indeed - as in 'interactive'. Got the name from Neal Stephenson's The Diamond Age, in case anyone wondered... Though it is also reactive, in the 'reactive programming' sense.

oh_sigh 13y ago
I think this person was responding to the fact that the title of this article on HN is "Reactive.js" and not "Ractive.js"
- SkyMarshal 13y ago
  Yup, but glad to know where "ractive" came from too.
SkyMarshal 13y ago
Edit: Question answered in the other thread: https://news.ycombinator.com/item?id=6096660 https://news.ycombinator.com/item?id=6096660 I haven't dug into it yet, but from the description it reminds me a bit of Facebook/Instagram's React js framework [1]. React creates a lightweight model of the DOM in memory, and when any part is changed, it sends a diff to update the browser DOM. No bindings necessary: "When your component is first initialized, the render method is called, generating a lightweight representation of your view. From that representation, a string of markup is produced, and injected into the document. When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM." Your description is similar, but it's not clear how exactly the update is made: "In this example, Ractive.js constructs a parallel DOM representation which is aware of its dependencies on the values of user and messages.unread. When those values change, it knows exactly which parts of the real DOM need to be updated. This kind of surgical DOM manipulation is more efficient than constantly trashing views only to re-render them, and it scales far more elegantly than manually updating elements." How does the DOM update mechanism work? [1]: http://facebook.github.io/react/blog/2013/06/05/why-react.html http://facebook.github.io/react/blog/2013/06/05/why-react.ht...
- rich_harris 13y ago
  Basically, items in the parallel DOM register themselves as dependants of 'keypaths', so a {{user.name}} mustache depends on the value of user.name. If you do ractive.set( 'user', { name: 'Bob' }), Ractive scans the dependency graph to find items that may need updating. The mustache will compare its new value to its old value, and if it has changed it will update the text node that it is mirroring. I'm not intimately familiar with how React updates happen so I can't comment on how similarly we're doing things, but it looks like we have the same kind of approach.

Indeed - as in 'interactive'. Got the name from Neal Stephenson's The Diamond Age, in case anyone wondered... Though it is also reactive, in the 'reactive programming' sense.

oh_sigh 13y ago

I think this person was responding to the fact that the title of this article on HN is "Reactive.js" and not "Ractive.js"

SkyMarshal 13y ago
Yup, but glad to know where "ractive" came from too.

SkyMarshal 13y ago

Edit: Question answered in the other thread: https://news.ycombinator.com/item?id=6096660 https://news.ycombinator.com/item?id=6096660 I haven't dug into it yet, but from the description it reminds me a bit of Facebook/Instagram's React js framework [1]. React creates a lightweight model of the DOM in memory, and when any part is changed, it sends a diff to update the browser DOM. No bindings necessary: "When your component is first initialized, the render method is called, generating a lightweight representation of your view. From that representation, a string of markup is produced, and injected into the document. When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM." Your description is similar, but it's not clear how exactly the update is made: "In this example, Ractive.js constructs a parallel DOM representation which is aware of its dependencies on the values of user and messages.unread. When those values change, it knows exactly which parts of the real DOM need to be updated. This kind of surgical DOM manipulation is more efficient than constantly trashing views only to re-render them, and it scales far more elegantly than manually updating elements." How does the DOM update mechanism work? [1]: http://facebook.github.io/react/blog/2013/06/05/why-react.html http://facebook.github.io/react/blog/2013/06/05/why-react.ht...

rich_harris 13y ago
Basically, items in the parallel DOM register themselves as dependants of 'keypaths', so a {{user.name}} mustache depends on the value of user.name. If you do ractive.set( 'user', { name: 'Bob' }), Ractive scans the dependency graph to find items that may need updating. The mustache will compare its new value to its old value, and if it has changed it will update the text node that it is mirroring. I'm not intimately familiar with how React updates happen so I can't comment on how similarly we're doing things, but it looks like we have the same kind of approach.