4 ms·

Virtual DOM is an implementation detail of React for web. Its true innovation is its declarative component model. You are missing the point of React. https:/

Virtual DOM is an implementation detail of React for web. Its true innovation is its declarative component model. You are missing the point of React. https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a https://medium.com/@dan_abramov/youre-missing-the-point-of-r...

Touche 12y ago
I don't know what you mean by "declarative component model", can you explain?
- danabramov 12y ago
  The mental model is much simpler because your `render` method describes UI at any point of time. Not just the DOM, but your own components too. On the inside, any component can have its own state, but from the outside, it's not visible, and components using it don't care or know about it. Separating `props` and `state`, component boundaries, lack of two-way binding and predictable top-down data flow make it easy to reason about where any data comes from, and how UI will change over time. Read this: http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome http://jlongster.com/Removing-User-Interface-Complexity,-or-...
  - Touche 12y ago
    This is true of all virtual dom libraries. There is no point of two-way binding when you have a virtual dom, and I'm not sure it even makes sense since you have to rerender the tree anyways. So we agree, you're just separating the concept from the implementation and I'm talking about them as one.
    - danabramov 12y ago
      There's a difference between “virtual DOM” and components. In React, components are not just functions that return their own virtual DOM. AFAIK for many vdom-based libraries this statement wouldn't be true. React components may have local state (as much as some people hate it, some find it useful), they have a lifecycle, can react to receiving new props with side effects, can implement diff bail-out hook. And you can nest such components declaratively.
      - Touche 12y ago
        The other libraries intentionally left out shouldComponentUpdate because they don't think it's something a developer should have to worry about. I don't know of any evidence to suggest that React is faster because of this feature. And declarative nesting is a feature of all of the frameworks I've come across, I'm not sure why you think that's unique to React. The advantage feature I would credit React for is the size of its community and influential advocates like you.
        danabramov 12y ago
        >declarative nesting is a feature of all of the frameworks I've come across, I'm not sure why you think that's unique to React Declarative nesting of lifecycle-ful and stateful components without going full FRP. I'm actually excited to learn about other frameworks that do this! Which do you have in mind?
        seanmcdirmid 12y ago
        WPF (even completely ignoring XAML), JavaFX both support declarative nesting with interesting databinding features to support it. They are based on retained scene graphs, however. If you are interested in academics, I published such a system at ECOOP in 2006: http://research.microsoft.com/pubs/179366/mcdirmid06superglue.pdf http://research.microsoft.com/pubs/179366/mcdirmid06superglu...
adrusi 12y ago
The "declarative component model" is not an innovation, it's an obvious approach that has been used for ages when prototyping. You can achieve the same conceptual model of your interface by just generating the entire HTML of the page and rerendering it whenever something changes. This obviously doesn't perform and has some edge cases where it breaks things (textboxes, for example), but the idea is the same as react's components. FRP is based around the idea of declarative components, but a lot of developers have an aversion to it because of the academic aura around it. React's innovation is using virtual DOM to make declarative components usable without delving into FRP.
- danabramov 12y ago
  >FRP is based around the idea of declarative components, but a lot of developers have an aversion to it because of the academic aura around it. Not just that. I may be stupid but personally I find it mentally simpler to `setState` than to `flatMapLatest`. To each their own I suppose. >React's innovation is using virtual DOM to make declarative components usable without delving into FRP. Precisely. >The "declarative component model" is not an innovation, it's an obvious approach [..] can achieve the same [..] by [..] obviously doesn't perform and has some edge cases where it breaks things (textboxes, for example), but the idea is the same React is not an academic paper, it's a tool. It doesn't need to have new ideas, it needs to execute on them in a practical way. Which it does.

Touche 12y ago

I don't know what you mean by "declarative component model", can you explain?

danabramov 12y ago
The mental model is much simpler because your `render` method describes UI at any point of time. Not just the DOM, but your own components too. On the inside, any component can have its own state, but from the outside, it's not visible, and components using it don't care or know about it. Separating `props` and `state`, component boundaries, lack of two-way binding and predictable top-down data flow make it easy to reason about where any data comes from, and how UI will change over time. Read this: http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome http://jlongster.com/Removing-User-Interface-Complexity,-or-...
- Touche 12y ago
  This is true of all virtual dom libraries. There is no point of two-way binding when you have a virtual dom, and I'm not sure it even makes sense since you have to rerender the tree anyways. So we agree, you're just separating the concept from the implementation and I'm talking about them as one.
  - danabramov 12y ago
    There's a difference between “virtual DOM” and components. In React, components are not just functions that return their own virtual DOM. AFAIK for many vdom-based libraries this statement wouldn't be true. React components may have local state (as much as some people hate it, some find it useful), they have a lifecycle, can react to receiving new props with side effects, can implement diff bail-out hook. And you can nest such components declaratively.
    - Touche 12y ago
      The other libraries intentionally left out shouldComponentUpdate because they don't think it's something a developer should have to worry about. I don't know of any evidence to suggest that React is faster because of this feature. And declarative nesting is a feature of all of the frameworks I've come across, I'm not sure why you think that's unique to React. The advantage feature I would credit React for is the size of its community and influential advocates like you.
      - danabramov 12y ago
        >declarative nesting is a feature of all of the frameworks I've come across, I'm not sure why you think that's unique to React Declarative nesting of lifecycle-ful and stateful components without going full FRP. I'm actually excited to learn about other frameworks that do this! Which do you have in mind?
        seanmcdirmid 12y ago
        WPF (even completely ignoring XAML), JavaFX both support declarative nesting with interesting databinding features to support it. They are based on retained scene graphs, however. If you are interested in academics, I published such a system at ECOOP in 2006: http://research.microsoft.com/pubs/179366/mcdirmid06superglue.pdf http://research.microsoft.com/pubs/179366/mcdirmid06superglu...

adrusi 12y ago

The "declarative component model" is not an innovation, it's an obvious approach that has been used for ages when prototyping. You can achieve the same conceptual model of your interface by just generating the entire HTML of the page and rerendering it whenever something changes. This obviously doesn't perform and has some edge cases where it breaks things (textboxes, for example), but the idea is the same as react's components. FRP is based around the idea of declarative components, but a lot of developers have an aversion to it because of the academic aura around it. React's innovation is using virtual DOM to make declarative components usable without delving into FRP.

danabramov 12y ago
>FRP is based around the idea of declarative components, but a lot of developers have an aversion to it because of the academic aura around it. Not just that. I may be stupid but personally I find it mentally simpler to `setState` than to `flatMapLatest`. To each their own I suppose. >React's innovation is using virtual DOM to make declarative components usable without delving into FRP. Precisely. >The "declarative component model" is not an innovation, it's an obvious approach [..] can achieve the same [..] by [..] obviously doesn't perform and has some edge cases where it breaks things (textboxes, for example), but the idea is the same React is not an academic paper, it's a tool. It doesn't need to have new ideas, it needs to execute on them in a practical way. Which it does.