Remove that Riot.js uses dirty checking in comparison page (it does not)

[divmgl]

I believe that Riot.js is using a virtual DOM and isn't doing any kind of dirty checking. I could be wrong, but after reading the source code it doesn't seem like there is.

https://vuejs.org/guide/comparison.html
https://github.com/riot/riot/blob/master/riot.js

[yyx990803]

@divmgl I've read the source code too, and the fact is

1. It doesn't use virtual DOM (the marketing is absolutely misleading)
2. It parses all dynamic parts in the templates into expressions (which are essentially the same as Angluar 1 watchers), and re-evaluates them all when an update happens. This is fundamentally the same as dirty checking.

[chrisvfritz]

@divmgl Evan beat me to it, but to add a little more to this, what Riot calls a virtual DOM expands the definition rather generously. From their compare page:

Riot takes the expressions from the tree and stores them in an array. Each expression has a pointer to a DOM node. On each run these expressions are evaluated and compared to the values in the DOM. When a value has changed the corresponding DOM node is updated. In a way Riot also has a virtual DOM, just a much simpler one.

So the DOM they work with is not in any way virtual, but they claim it's virtual because they cache expressions and DOM node references. By their definition, this is also a virtual DOM implementation:

<p id="greeting"></p>

var state = {
  greeting: 'Hello'
}

var expressions = [{
  fn: function () {
    return state.greeting + ' World'
  }
  dom: document.getElementById('greeting')
}]

function render () {
  expressions.forEach(function (expr) {
    var newContent = expr.fn(), node = expr.dom
    if (newContent !== node.textContent)
      node.textContent = newContent
  })
}
render()

state.greeting = 'Good afternoon'
render()

As for dirty checking, looping through old/new value comparisons is pretty textbook dirty checking. Those links are to lines in their source.

[chrisvfritz]

I think it would probably be a good idea to explicitly address the fact that they advertise using a virtual DOM. Otherwise, people might just think that we missed the big "VIRTUAL DOM" on their home page. 😛 We should probably also update the tooling comparison, since they now have a Webpack loader as well (though it's not officially supported).

Maybe I'll take a pass through the 1.0 and 2.0 comparison pages after all. 😃

Looks like I didn't read it well enough. Thanks gents.

[ricardobeat]

Would you say React uses dirty checking? At some point the reconciler also has to loop through old/new value comparisons and decide on what DOM mutations to apply.

[chrisvfritz]

@ricardobeat I probably should have clarified that it was specifically the comparison between the source of truth and bound DOM values that constituted dirty checking. I can definitely see how my description could sound like I was expanding the definition to include any loops containing comparisons. And if that were the case, "dirty checking" would be pretty meaningless, as I can't think of any strategy for reconciling state changes over time that woudn't fall under that umbrella somehow. 🙂

[kdakan]

Riot js updates the dom only when the component's update method is called programmatically or a dom event like click, change etc is triggered by the user. It is similar to react js and other react clones which have their own vdom implementations. In contrast with how angular does it, there is no digest cycle. I'm actively using Riot.js on projects and the update behavior I see is as I described. So, Riot js does not do dirty checking like it is done in Angular. And it is good to give version and subversion of the framework when you're comparing things, cause all these alternate js frameworks are evolving at lightning speed and the given info is bound to become obsolete at some time.

[chrisvfritz]

@kdakan I just updated the Riot comparison for v3. If you see anything that's still inaccurate, please let me know.

[Dmitri-Sintsov]

Virtual DOM is not always an advantage, it can be painful when one wants to have the framework interoperability and also wants to include new framework into large already existing code base. Thus old Vue was better compatible to legacy code. The difference of performance are rarely noticed by the end users. Today even mobile devices are powerful enough.