6 ms·

Having spent the past two weeks diving deeply into React, this doesn't surprise me. If you haven't tried it out, give it a go. Being able to rewrite the virtua

by donw 12y ago

Having spent the past two weeks diving deeply into React, this doesn't surprise me. If you haven't tried it out, give it a go. Being able to rewrite the virtual DOM at will makes development so much cleaner, and it plays incredibly well with other tools, because React is just a presentation layer (I'm using it with Backbone) There are rough edges (TransitionGroup), but they clearly know what they are doing.

dmak 12y ago
Can this play nicely with Angular and still make use of Angular's two-way binding?
- rezistik 12y ago
  I'm interested in this as well. I believe some people have had success by attaching components to the window as globals.
- josebalius 12y ago
  Take a look at http://josebalius.github.io/ngReactGrid/ http://josebalius.github.io/ngReactGrid/ for an example.
- auvrw 12y ago
  if all you're after is two-way data binding and don't necessarily need all the other functionality provided by Angular, it might be worth mentioning that React actually can do that, even though it's not a pattern that occurs that often if you use the Flux application architecture http://facebook.github.io/react/docs/two-way-binding-helpers.html http://facebook.github.io/react/docs/two-way-binding-helpers...
- Spendar89 12y ago
  I think its important to note that React does not encourage two way data binding. Quite the opposite, actually. Data is supposed to flow one-way, from parent to child. That being said, there's an extension that adds two way bindings, called ReactLink. You can read more about it here: http://facebook.github.io/react/docs/two-way-binding-helpers.html http://facebook.github.io/react/docs/two-way-binding-helpers...
- _greim_ 12y ago
  I'm not an expert but I think you wouldn't really want to do this as they both want sole control of the chunk of DOM in question.
- rdtsc 12y ago
  Look at some of Peter Hunt videos: https://facebook.github.io/react/docs/videos.html https://facebook.github.io/react/docs/videos.html 2-way binding is not necessarily the way to go with this.
  - kalkeo 12y ago
    good~
- deepakprakash 12y ago
  Yes, and apparently you can take advantage of React's faster/smarter rendering (http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/ http://www.williambrownstreet.net/blog/2014/04/faster-angula...) That said, I would be uncomfortable mixing something as opinionated as Angular with another framework that expects to "own" the DOM/rendering. My guess is that Angular will implement their own version of VDOM in the next few months since it shows demonstrably better performance.
  - Cthulhu_ 12y ago
    Pretty much this. AngularJS abstracts DOM manipulation away from the user; by adding React to an AngularJS project, you're giving up on that abstraction. I consider React a sacrifice of abstraction / ease of development in favor of performance. I think AngularJS will adopt a similar strategy for their 2.0 development effort, maybe even a 1.x point release. But I haven't looked at the angular development process for a while now.
    - peterhunt 12y ago
      I disagree with this. React abstracts away DOM manipulation just as well as Angular does at a high level. When you dive deeper (i.e. building components/directives) React continues to abstract it away, whereas Angular reveals it. In fact, React is able to get superior performance because the DOM is abstracted so far away.
cnp 12y ago
TransitionGroup also annoys me to death. If you have any thoughts on animation please chime in here: https://groups.google.com/forum/#!topic/reactjs/2-RhZTHxNdc https://groups.google.com/forum/#!topic/reactjs/2-RhZTHxNdc But yeah, I agree -- development is massively cleaner in nearly every single way.
- spicyj 12y ago
  Yes, please do chime in -- for animation we're currently blocked on APIs that make sense, not implementation. If anyone has ideas about how animation should work, that thread is a great place to put them.
  - kalkeo 12y ago
    why？
Kiro 12y ago
Do you have an example where you rewrite the virtual DOM? I don't see anything like that on the React site.
- marcins 12y ago
  I assume they're just referring to how React works under the hood - you just change the data and that cascades down through the components rewriting (ie. changing) only the parts of the virtual DOM that changing, which then get applied to the real DOM.

by donw 12y ago

dmak 12y ago

Can this play nicely with Angular and still make use of Angular's two-way binding?

rezistik 12y ago
I'm interested in this as well. I believe some people have had success by attaching components to the window as globals.
josebalius 12y ago
Take a look at http://josebalius.github.io/ngReactGrid/ http://josebalius.github.io/ngReactGrid/ for an example.
auvrw 12y ago
if all you're after is two-way data binding and don't necessarily need all the other functionality provided by Angular, it might be worth mentioning that React actually can do that, even though it's not a pattern that occurs that often if you use the Flux application architecture http://facebook.github.io/react/docs/two-way-binding-helpers.html http://facebook.github.io/react/docs/two-way-binding-helpers...
Spendar89 12y ago
I think its important to note that React does not encourage two way data binding. Quite the opposite, actually. Data is supposed to flow one-way, from parent to child. That being said, there's an extension that adds two way bindings, called ReactLink. You can read more about it here: http://facebook.github.io/react/docs/two-way-binding-helpers.html http://facebook.github.io/react/docs/two-way-binding-helpers...
_greim_ 12y ago
I'm not an expert but I think you wouldn't really want to do this as they both want sole control of the chunk of DOM in question.
rdtsc 12y ago
Look at some of Peter Hunt videos: https://facebook.github.io/react/docs/videos.html https://facebook.github.io/react/docs/videos.html 2-way binding is not necessarily the way to go with this.
- kalkeo 12y ago
  good~
deepakprakash 12y ago
Yes, and apparently you can take advantage of React's faster/smarter rendering (http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/ http://www.williambrownstreet.net/blog/2014/04/faster-angula...) That said, I would be uncomfortable mixing something as opinionated as Angular with another framework that expects to "own" the DOM/rendering. My guess is that Angular will implement their own version of VDOM in the next few months since it shows demonstrably better performance.
- Cthulhu_ 12y ago
  Pretty much this. AngularJS abstracts DOM manipulation away from the user; by adding React to an AngularJS project, you're giving up on that abstraction. I consider React a sacrifice of abstraction / ease of development in favor of performance. I think AngularJS will adopt a similar strategy for their 2.0 development effort, maybe even a 1.x point release. But I haven't looked at the angular development process for a while now.
  - peterhunt 12y ago
    I disagree with this. React abstracts away DOM manipulation just as well as Angular does at a high level. When you dive deeper (i.e. building components/directives) React continues to abstract it away, whereas Angular reveals it. In fact, React is able to get superior performance because the DOM is abstracted so far away.

cnp 12y ago

TransitionGroup also annoys me to death. If you have any thoughts on animation please chime in here: https://groups.google.com/forum/#!topic/reactjs/2-RhZTHxNdc https://groups.google.com/forum/#!topic/reactjs/2-RhZTHxNdc But yeah, I agree -- development is massively cleaner in nearly every single way.

spicyj 12y ago
Yes, please do chime in -- for animation we're currently blocked on APIs that make sense, not implementation. If anyone has ideas about how animation should work, that thread is a great place to put them.
- kalkeo 12y ago
  why？

Kiro 12y ago

Do you have an example where you rewrite the virtual DOM? I don't see anything like that on the React site.

marcins 12y ago
I assume they're just referring to how React works under the hood - you just change the data and that cascades down through the components rewriting (ie. changing) only the parts of the virtual DOM that changing, which then get applied to the real DOM.