{"action":"created","issue":{"url":"https://api.github.com/repos/knockout/knockout/issues/1650","labels_url":"https://api.github.com/repos/knockout/knockout/issues/1650/labels{/name}","comments_url":"https://api.github.com/repos/knockout/knockout/issues/1650/comments","events_url":"https://api.github.com/repos/knockout/knockout/issues/1650/events","html_url":"https://github.com/knockout/knockout/issues/1650","id":51786860,"number":1650,"title":"Virtual-dom?","user":{"login":"unsafecode","id":1794924,"avatar_url":"https://avatars.githubusercontent.com/u/1794924?v=3","gravatar_id":"","url":"https://api.github.com/users/unsafecode","html_url":"https://github.com/unsafecode","followers_url":"https://api.github.com/users/unsafecode/followers","following_url":"https://api.github.com/users/unsafecode/following{/other_user}","gists_url":"https://api.github.com/users/unsafecode/gists{/gist_id}","starred_url":"https://api.github.com/users/unsafecode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/unsafecode/subscriptions","organizations_url":"https://api.github.com/users/unsafecode/orgs","repos_url":"https://api.github.com/users/unsafecode/repos","events_url":"https://api.github.com/users/unsafecode/events{/privacy}","received_events_url":"https://api.github.com/users/unsafecode/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/knockout/knockout/labels/type:%20feature","name":"type: feature","color":"207de5"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2014-12-12T09:41:27Z","updated_at":"2015-05-11T17:34:25Z","closed_at":"2014-12-24T13:03:52Z","body":"There has been a lot of discussion lately about virtual-dom (https://github.com/Matt-Esch/virtual-dom/wiki, http://futurice.com/blog/reactive-mvc-and-the-virtual-dom/), so I was wondering: will it be possible to leverage the approach in Knockout? Will it require a serious refactor of DOM-related code, or can we design a separated module?\r\n\r\nAlso, would it be actually beneficial for performance? It will be interesting to set up a comparison, since most benchmarks in the wild do not measure Knockout againt virtual-dom.\r\n"},"comment":{"url":"https://api.github.com/repos/knockout/knockout/issues/comments/100987706","html_url":"https://github.com/knockout/knockout/issues/1650#issuecomment-100987706","issue_url":"https://api.github.com/repos/knockout/knockout/issues/1650","id":100987706,"user":{"login":"matthew-dean","id":414752,"avatar_url":"https://avatars.githubusercontent.com/u/414752?v=3","gravatar_id":"","url":"https://api.github.com/users/matthew-dean","html_url":"https://github.com/matthew-dean","followers_url":"https://api.github.com/users/matthew-dean/followers","following_url":"https://api.github.com/users/matthew-dean/following{/other_user}","gists_url":"https://api.github.com/users/matthew-dean/gists{/gist_id}","starred_url":"https://api.github.com/users/matthew-dean/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matthew-dean/subscriptions","organizations_url":"https://api.github.com/users/matthew-dean/orgs","repos_url":"https://api.github.com/users/matthew-dean/repos","events_url":"https://api.github.com/users/matthew-dean/events{/privacy}","received_events_url":"https://api.github.com/users/matthew-dean/received_events","type":"User","site_admin":false},"created_at":"2015-05-11T17:34:24Z","updated_at":"2015-05-11T17:34:24Z","body":"> Are there other benefits to the virtual DOM that make it worth investigating further and keeping this issue open?\r\n\r\nYes, there are probably bunches, but the basic idea is that you're never writing directly to the DOM when a model changes. You send DOM updates to a queue, and a view manager diffs the DOM and decides the fastest method of insertion / updating. Sometimes it's changing the attributes of an element or replacing that node, sometimes it's an innerHTML operation, and, as others have said, it waits to actually make those changes until an animation frame is available, to limit jankiness and repaints.\r\n\r\nHowever, one of the OTHER things the view manager in React can do is insert based on visibility state. That is, say your model represents a really long list, like a scoreboard. The scores keep updating the model, and React keeps updating the virtual DOM. But the scores are in a long scroll list. Therefore, you tell the view manager to only insert the DOM nodes for where they would be visible in the scroll list.\r\n\r\nSo, in that way, the Virtual DOM represents the elements on the page, but it's actually a kind of superset of the DOM. The actual DOM is minimized to the fewest number of elements needed for rendering at any given time.\r\n\r\nIncidentally, Ractive.js uses a declarative syntax like Knockout, and manages updates with a virtual dom for very slick performance. http://www.ractivejs.org/ - However, Ractive doesn't have as easy-to-use two-way databinding, IMO, which is why I've just started using Knockout for one of my projects even though I normally use Ractive."}}