New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
divmgl opened this Issue Jul 31, 2016 · 9 comments

Comments

Projects
None yet
6 participants
@divmgl

divmgl commented Jul 31, 2016

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

@divmgl divmgl changed the title from Remove that Riot.js uses dirty checking (it does not) to Remove that Riot.js uses dirty checking from comparison page (it does not) Jul 31, 2016

@divmgl divmgl changed the title from Remove that Riot.js uses dirty checking from comparison page (it does not) to Remove that Riot.js uses dirty checking in comparison page (it does not) Jul 31, 2016

@yyx990803

This comment has been minimized.

Show comment
Hide comment
@yyx990803

yyx990803 Jul 31, 2016

Member

@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.
Member

yyx990803 commented Jul 31, 2016

@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.

@yyx990803 yyx990803 closed this Jul 31, 2016

@chrisvfritz

This comment has been minimized.

Show comment
Hide comment
@chrisvfritz

chrisvfritz Jul 31, 2016

Member

@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.

Member

chrisvfritz commented Jul 31, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@chrisvfritz

chrisvfritz Jul 31, 2016

Member

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. 😃

Member

chrisvfritz commented Jul 31, 2016

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. 😃

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jul 31, 2016

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

ghost commented Jul 31, 2016

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

@ricardobeat

This comment has been minimized.

Show comment
Hide comment
@ricardobeat

ricardobeat Oct 23, 2016

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.

ricardobeat commented Oct 23, 2016

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

This comment has been minimized.

Show comment
Hide comment
@chrisvfritz

chrisvfritz Oct 23, 2016

Member

@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. 🙂

Member

chrisvfritz commented Oct 23, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@kdakan

kdakan Dec 7, 2016

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.

kdakan commented Dec 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@chrisvfritz

chrisvfritz Dec 7, 2016

Member

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

Member

chrisvfritz commented Dec 7, 2016

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

kazupon added a commit to kazupon/vuejs.org that referenced this issue Oct 1, 2017

@Dmitri-Sintsov

This comment has been minimized.

Show comment
Hide comment
@Dmitri-Sintsov

Dmitri-Sintsov Oct 5, 2018

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.

Dmitri-Sintsov commented Oct 5, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment