5 ms·

Would you recommend using React instead of Angular for JS heavy areas of a website that is built with a server side framework (like Rails, Django etc.)? I deve

by adamors 12y ago

Would you recommend using React instead of Angular for JS heavy areas of a website that is built with a server side framework (like Rails, Django etc.)? I developed a rather complex SPA with Angular recently and I cannot go back to the ghetto that is jQuery when using server side rendering.

camus2 12y ago
Angular solves more than the UI problem,React on its own doesnt solve the architecturing problem , AngularJS does. The big weakness of Angular is server side rendering,which involves heavy solutions like phantomjs,while you can render react components on the server. Angular is not very good at rendering/managing svg either,that's a fact. I would argue maintaining pure html templates is not that hard. But frankly Angular solves so many problems these are minor issues.Writing complex lob applications is so easy with Angular I wouldnt want to use anything else. The only case i'd switch back to backbone+react/vue/ractive and jquery is when i'm writing interactive experiences that are not CRUD apps. So no,dont switch to React for the sake of switching especially since AngularJS just works. I mean people dont even bother learning javascript,they learn AngularJS ...
- polskibus 12y ago
  Flux is Facebook's architecture for using React in a larger scheme. http://facebook.github.io/react/blog/2014/05/06/flux.htm http://facebook.github.io/react/blog/2014/05/06/flux.htm It has been discussed on HN before : https://news.ycombinator.com/item?id=7719957 https://news.ycombinator.com/item?id=7719957 Some good comments there, worth checking out. Personally, I think the message loop architecture proved very good in Windows when processors were slow and had only 1 core and it is at least worth giving it a try in web development.
- adamors 12y ago
  > Angular solves more than the UI problem Hence my question. I feel like for some apps I don't need 60% of what Angular has to offer (routing, controllers, modules etc.) I would be satisfied with just directives. Which are probably the part of Angular I like the least. For SPAs I see no other alternative to Angular currently. In instances where I need heavy JS only on some pages, I'm not sure.
  - mercer 12y ago
    React with a simple router and perhaps some help with your models (Flux or Backbone) might be enough for your needs. Any user behavior that requires new data could be an ajax call that passes back the entire state of the current 'page', which could then replace the state of top-level component (since you want most of your state to reside there anyways). React takes over from there. You'd be relying mostly on your server-side framework for the logic. You could then incrementally add logic client-side to improve performance, if that's necessary (if the state object becomes too large, for example).
- grumblestumble 12y ago
  I'd be interested to know what problems Angular has with SVG. I'm currently working on a fairly large SPA and am using SVG fairly extensively, both for simple stuff like icons and for more complicated things like document annotation. I haven't run into any problems thus far.
  - camus2 12y ago
    doing something like <my-svg-shape my-directive-that-mutate-svg-props /> doesnt work that well. Displaying SVG has never been a problem,they are like images. Unlike images they can be nested ,animated,modified at run time,scaled... if you think you can just create meta svg shapes with directives think again.
    - jonase 12y ago
      I'm very interested in working with SVG in the browser and have found it to work pretty well with React. I built a demo (Code: https://github.com/jonase/elements https://github.com/jonase/elements, App: http://jonase.github.io/elements/ http://jonase.github.io/elements/) using one of the (increasing number of) React wrappers for ClojureScript (Chrome only for the moment I'm afraid)
bnjohnny 12y ago
Yes.
mercer 12y ago
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.)
- adamors 12y ago
  I was thinking along those lines as well, thanks for the reply.
- rebelidealist 12y ago
  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.
  - mercer 12y ago
    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?

by adamors 12y ago

camus2 12y ago

Angular solves more than the UI problem,React on its own doesnt solve the architecturing problem , AngularJS does. The big weakness of Angular is server side rendering,which involves heavy solutions like phantomjs,while you can render react components on the server. Angular is not very good at rendering/managing svg either,that's a fact. I would argue maintaining pure html templates is not that hard. But frankly Angular solves so many problems these are minor issues.Writing complex lob applications is so easy with Angular I wouldnt want to use anything else. The only case i'd switch back to backbone+react/vue/ractive and jquery is when i'm writing interactive experiences that are not CRUD apps. So no,dont switch to React for the sake of switching especially since AngularJS just works. I mean people dont even bother learning javascript,they learn AngularJS ...

polskibus 12y ago
Flux is Facebook's architecture for using React in a larger scheme. http://facebook.github.io/react/blog/2014/05/06/flux.htm http://facebook.github.io/react/blog/2014/05/06/flux.htm It has been discussed on HN before : https://news.ycombinator.com/item?id=7719957 https://news.ycombinator.com/item?id=7719957 Some good comments there, worth checking out. Personally, I think the message loop architecture proved very good in Windows when processors were slow and had only 1 core and it is at least worth giving it a try in web development.
adamors 12y ago
> Angular solves more than the UI problem Hence my question. I feel like for some apps I don't need 60% of what Angular has to offer (routing, controllers, modules etc.) I would be satisfied with just directives. Which are probably the part of Angular I like the least. For SPAs I see no other alternative to Angular currently. In instances where I need heavy JS only on some pages, I'm not sure.
- mercer 12y ago
  React with a simple router and perhaps some help with your models (Flux or Backbone) might be enough for your needs. Any user behavior that requires new data could be an ajax call that passes back the entire state of the current 'page', which could then replace the state of top-level component (since you want most of your state to reside there anyways). React takes over from there. You'd be relying mostly on your server-side framework for the logic. You could then incrementally add logic client-side to improve performance, if that's necessary (if the state object becomes too large, for example).
grumblestumble 12y ago
I'd be interested to know what problems Angular has with SVG. I'm currently working on a fairly large SPA and am using SVG fairly extensively, both for simple stuff like icons and for more complicated things like document annotation. I haven't run into any problems thus far.
- camus2 12y ago
  doing something like <my-svg-shape my-directive-that-mutate-svg-props /> doesnt work that well. Displaying SVG has never been a problem,they are like images. Unlike images they can be nested ,animated,modified at run time,scaled... if you think you can just create meta svg shapes with directives think again.
  - jonase 12y ago
    I'm very interested in working with SVG in the browser and have found it to work pretty well with React. I built a demo (Code: https://github.com/jonase/elements https://github.com/jonase/elements, App: http://jonase.github.io/elements/ http://jonase.github.io/elements/) using one of the (increasing number of) React wrappers for ClojureScript (Chrome only for the moment I'm afraid)

bnjohnny 12y ago

Yes.

mercer 12y ago

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.)

adamors 12y ago
I was thinking along those lines as well, thanks for the reply.
rebelidealist 12y ago
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.
- mercer 12y ago
  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?