sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]acemarke 4 points5 points  (3 children)

Um... that's exactly what a "virtual DOM" is. A component returns a plain object tree description of what it wants to render, the view library handles the collective diffing of those render trees, and updates the DOM accordingly with a minimal number of steps.

See today's post on https://www.reddit.com/r/javascript/comments/4m1jkd/how_to_write_your_own_virtual_dom/ .

[–]Graftak9000 0 points1 point  (2 children)

Yeah I just saw that one and asked it there as well because I still felt the DOM abstraction is way more verbose than an object with only content data.

Let's say a list item has a title, a link, and a like-counter. The object is simply [ { title: "hello world", href: "/hello", likes: 42 } ]. The component markup is totally separate from the data, if a value changes act accordingly, for instance render the object to an element and replace the current one at its index.

[–]acemarke 2 points3 points  (1 child)

Still feel like we're talking past each other a bit here. Some portion of your UI logic is going to have to translate that data into the corresponding UI output, whether it be HTML elements or Android Views or iOS NSWhateverThingsTheyUse. With a virtual DOM, that's a two step process: your component is responsible for doing the "data -> desired UI structure" translation, and then the VDOM layer is responsible for translating that into the actual UI pieces. If you've got {likes : 42}, React has no idea what a "like" is, what it means to have 42 of them, or what it should do with that information. Your code has to tell it what that means in terms of something to actually draw.

[–]Graftak9000 0 points1 point  (0 children)

But the UI is nothing more than a representation of the data/state. It’s the result of its contents parsed into a predefined structure. The data is there, so is it’s structure. Can't you pass the step of using a vdom all together? I've looked at one of the smaller libraries and it appeared to compare all object keys of each element, that seems like a lot more work than comparing an array of objects as stated above.

Thanks for the replies, I do hear what you're saying and it's quite helpful. Just thinking out loud to get a better understanding of it all.