News for hackers. Stuff that matters.
Re:Removing User Interface Complexity, or Why React is Awesome by mercer on Tuesday May 13, 2014 @11:43AM (#7738701)
Based on my initial explorations using React with Rails, I'd say React might even be better when used with an existing server-side framework.

With React, you can basically store all you data (state) in the root component (which could be the root of your entire page), and replace that with new state without thinking too much about the DOM updates and view changes that result from this.

This is perfect for a server-side framework, because such a framework by definition already renders everything whenever something changes (page refresh). Without React, the framework does a bunch of things and finally craps out objects that are transformed to HTML by the view (where the views are as 'dumb' as possible). With React, instead of rendering the object to HTML, you just pass these objects, as JSON, to a React component (which could be the whole page), and it figures out what needs updating. You don't have to deal (as much) with client-side logic if you don't want to, and things will still be performant.

This also significantly simplifies server-side rendering, to the point where it might require only one extra call to render the component server side (the handy renderComponentToString).

Of course, in practice it's often not quite that simple, but because of how React operates, you can get pretty far with relying primarily on the server-side framework and little logic on the React-side of things (plus you can achieve the 'holy grail' of seamless server- and client-side rendering.

(apologies if I'm getting things wrong, by the way. I'm by no means an expert on these matters and only just diving into React.)

Re:Removing User Interface Complexity, or Why React is Awesome by rebelidealist on Tuesday May 13, 2014 @05:03PM (#7740686)
Can you please explain how to store data from the server on a "root component"?

The data portion is the main reason I was looking at Angular.

Thank you.

Re:Removing User Interface Complexity, or Why React is Awesome by mercer on Wednesday May 14, 2014 @06:53AM (#7743053)
If you keep it client-side: you turn the server-side data into json, then pass that to the renderComponent function (in a script tag or whatnot). Inside your component, you'd use this data in the getInitialState function to set the state of this component (which could pretty much be the whole page).

Does that answer your question?

Re:Removing User Interface Complexity, or Why React is Awesome by shaohua on Wednesday May 14, 2014 @01:07AM (#7742293)
I assume you just render a big json from the serverside and let the react component to consume it in getinitialstate() of the root component?
Re:Removing User Interface Complexity, or Why React is Awesome by mercer on Wednesday May 14, 2014 @06:48AM (#7743045)
Yes. Instead of passing the instance variables from the controller to the view, you instead send it to the client as JSON and basically replace the state of the relevant component(s) (through the ajax callback, or whatever method you prefer).

As your app grows, it might become inefficient to send down the now-huge JSON object, and you might want to add some client-side logic to deal with that. However, this might not even be necessary, as 1) even though you replace the entire state, React will only update what changed, and 2) by using optimistic updating on the client (or whatever the proper term is), the user might not notice that the actual data-syncing is a bit slower. Plus, it'll still be faster than a server-side-only approach.

The nice thing is that sending the total state (of the page or component) every time significantly simplifies matters, to the point where you might be able to keep relying on your server-side framework for most of the logic, at least until you need to start optimizing stuff.

Re:Removing User Interface Complexity, or Why React is Awesome by adamors on Tuesday May 13, 2014 @12:38PM (#7739048)
I was thinking along those lines as well, thanks for the reply.