5 ms·

creating a virtual DOM != manipulation. All fastDOM does is ensure that all DOM writes happen at once, not that you're doing the minimum number of operations n

creating a virtual DOM != manipulation. All fastDOM does is ensure that all DOM writes happen at once, not that you're doing the minimum number of operations necessary. And greensock is an animation library, so I'm not sure how it relates to the problem in question.

zkhalique 12y ago
Right, that's all you need to make sure there isn't thrashing. You can write to the DOM as much as you want during an animation frame, and only the latest write will be used. Provided you don't also read from it, which triggers a layout. Other than this, all these frameworks essentially do dirty checking when it comes time to render. Angular does it on the model, and React / Mithril do it on a virtual DOM, leaving it up to you how you update the virtual DOM. Usually they want you to recreate the entire DOM from the beginning, and then try to optimize the tree walk using immutability. In any case, you don't need anything nearly as fancy as this. You can just subscribe to events when your model changes, and use FastDOM to update your DOM on those events. It is more efficient as it does only the minimum work necessary, instead of dirty-checking, albeit sometimes it may draw the same HTML in the same place.
- joesb 12y ago
  The real benefit of React is not in virtual DOM, even though virtual DOM enable the real benefit to be feasible. It's in enabling developer to think only in "recreating the whole DOM". Subscribing to event and figure out what DOM to update is error prone. With React, you don't think about patching DOM to the right result, you only think about how the final result should looks. Understanding to latest state of document overtime is also harder with manually patched DOM. You can't be sure how the current DOM looks like after lots of patching. With React, you know exactly how the current document looks like, given value of props and state. Every programmer knows that referential transparent function is easier to reason about than state full function. React's render method makes rendering a referential transparent function, as opposed to manually patching part of the DOM. React is not about performance, it's about making it easier to write Component that works. Virtual DOM helps making the idea of rendering the whole thing possible, which happens to also make it fast.

zkhalique 12y ago

Right, that's all you need to make sure there isn't thrashing. You can write to the DOM as much as you want during an animation frame, and only the latest write will be used. Provided you don't also read from it, which triggers a layout. Other than this, all these frameworks essentially do dirty checking when it comes time to render. Angular does it on the model, and React / Mithril do it on a virtual DOM, leaving it up to you how you update the virtual DOM. Usually they want you to recreate the entire DOM from the beginning, and then try to optimize the tree walk using immutability. In any case, you don't need anything nearly as fancy as this. You can just subscribe to events when your model changes, and use FastDOM to update your DOM on those events. It is more efficient as it does only the minimum work necessary, instead of dirty-checking, albeit sometimes it may draw the same HTML in the same place.

joesb 12y ago
The real benefit of React is not in virtual DOM, even though virtual DOM enable the real benefit to be feasible. It's in enabling developer to think only in "recreating the whole DOM". Subscribing to event and figure out what DOM to update is error prone. With React, you don't think about patching DOM to the right result, you only think about how the final result should looks. Understanding to latest state of document overtime is also harder with manually patched DOM. You can't be sure how the current DOM looks like after lots of patching. With React, you know exactly how the current document looks like, given value of props and state. Every programmer knows that referential transparent function is easier to reason about than state full function. React's render method makes rendering a referential transparent function, as opposed to manually patching part of the DOM. React is not about performance, it's about making it easier to write Component that works. Virtual DOM helps making the idea of rendering the whole thing possible, which happens to also make it fast.