Great comment and excellent intro to React for interested devs. I've been successfully using React for small and mid-sized apps, and agree that Marty looks like it's an elegant solution to the Flux pattern. (for application state in React, I've also had some success with passing around an immutable cursor, like react-cursor[1]).
One cautionary note about how easy it is to integrate React with other frameworks: this statement is true as long as the framework in question doesn't touch the DOM (e.g., using Backbone models). But if you try to integrate React with any JS library or framework that mutates the DOM, you should be aware that this will interfere with React's DOM "accounting" and potentially cause lots of problems.
There are certainly ways around this (look into the lesser-used React life cycles), but it's much easier to stick within the React ecosystem for any libraries that manipulate the DOM, or build your DOM manipulations from scratch (easy to do with React). Already, there's a fairly feature complete React Bootstrap library [2]. I've started work on a React charting library, using d3 for path calculations and other utilities (and temporarily for chart axes generation, but library users shouldn't have to worry about any DOM issues) [3]. And I'm sure there are a thousand and one other React view-level component libraries I'm not familiar with, most of which are likely available via NPM.
But I agree that React and the other virtual DOM libraries and frameworks (Ractive, Mercury, Om, etc.) are the next generation approach for client-side views. They not only make DOM manipulations much snappier, but they also make them much easier for the developer.
> (for application state in React, I've also had some success with passing around an immutable cursor, like react-cursor[1]).
The react-cursor library really introduced cursors based on immutable data for me. I've never used the library, but the idea stuck. Omniscient looks very shiny as well, but it too invasively changes the workings of React for me.
Immutable.js provides a great Immutability library, with a very lightweight cursor implementation on top. You can make a simple object that recursively updates itself with the newest state from the cursor. You have to merge updated states at the keyPath to prevent clobbering from 'synchronous' updates at different cursors.
If you give that object a listen(), a getCurrentState() and a private trigger() method, you are well on your way to a complete store. Reflux offers roughly this model, and adds much needed actions and listening to other stores.
Here's a gist with a tightly coupled (incomplete) example store that emits a cursor, and a React component that listens to the store and updates it:
Omniscient is still useful in that you can make your own `component` shim using their `shouldComponentUpdate()`.
I think the reflux model doesn't too synergize well with immutable-js's cursors.
I found out that reflux with omniscient/immstruct ended up being one more level of indirection. Plus, I didn't need all the features that reflux provided. I even tried a super-light version of reflux.
So I replaced reflux with an augmentation upon immstruct with more useful features (a library I've yet to release). I'm still experimenting with it while investigating a nice isomorphic architecture.
One cautionary note about how easy it is to integrate React with other frameworks: this statement is true as long as the framework in question doesn't touch the DOM (e.g., using Backbone models). But if you try to integrate React with any JS library or framework that mutates the DOM, you should be aware that this will interfere with React's DOM "accounting" and potentially cause lots of problems.
There are certainly ways around this (look into the lesser-used React life cycles), but it's much easier to stick within the React ecosystem for any libraries that manipulate the DOM, or build your DOM manipulations from scratch (easy to do with React). Already, there's a fairly feature complete React Bootstrap library [2]. I've started work on a React charting library, using d3 for path calculations and other utilities (and temporarily for chart axes generation, but library users shouldn't have to worry about any DOM issues) [3]. And I'm sure there are a thousand and one other React view-level component libraries I'm not familiar with, most of which are likely available via NPM.
But I agree that React and the other virtual DOM libraries and frameworks (Ractive, Mercury, Om, etc.) are the next generation approach for client-side views. They not only make DOM manipulations much snappier, but they also make them much easier for the developer.
1. https://github.com/dustingetz/react-cursor
2. https://github.com/react-bootstrap/react-bootstrap
3. https://github.com/esbullington/react-d3