7 ms·

Is React meant to replace Ember/Angular type of frameworks? Can React also connect with backend APIs to fetch JSON and present them on the frontend? I've been w

Is React meant to replace Ember/Angular type of frameworks? Can React also connect with backend APIs to fetch JSON and present them on the frontend? I've been waiting to nosedive into Angular2 (when its out), is React a better alternative to get started with?

liamzebedee 11y ago
React certainly replaces Angular as a View+Controller framework (idk about Ember, although I know there's been work on integrating the performance benefits of Virtual DOM). In scenarios with complex interactions, something like Flux is desirable, however small web apps work fine with simple JSON REST APIs.
ergo14 11y ago
I'm more interested to see if polymer/x-tag/webcomponents will replace react/angular/other stuff.
- vcarl 11y ago
  React will probably just integrate those as they become usable, since React acts as a layer of abstraction between the DOM and your presentation logic.
  - k__ 11y ago
    People are already trying it. https://github.com/Wildhoney/ReactShadow https://github.com/Wildhoney/ReactShadow
  - marknutter 11y ago
    Not so. React does not really play well with web components. Currently React has to internally define JSX elements for every known HTML element that's out there, namely to track internal state and respond to events (i.e. input fields). Because they won't be able to do the same for the vast ocean of web components that will be authored in the coming years, it will be difficult to provide clean interop with new custom elements. The React maintainers have even stated that they don't believe web components are the right way forward for web application development. React was never designed to work well with web components in the first place. On the other hand, the main reason why Angular 2.0 is such a drastic rewrite is because they needed to do it in order for Angular to work seamlessly with Web Components. It's no coincidence that both Angular and web components are Google initiatives.
    - vcarl 11y ago
      But Angular is a glorified templating engine, where react is really about FRP and rendering from data. The React components you write are essentially web components that use DOM; as long as there are standard building blocks for web components in the future, you could easily port it to React.
      - marknutter 11y ago
        Yes, but now you're requiring that developers go through the work of porting every single third party web component they might want to use in their project. That's the current pain we're all going through today with Angular, React, Ember, etc, which are basically glorified web component polyfills when it comes down to it. The whole point of Web Components is portability.
    - peterhunt 11y ago
      While this was true a few releases ago, with React.createElement() things have changed.
      - marknutter 11y ago
        How exactly does that solve the problem of consuming custom web components with their own internal state and events?
    - aggronn 11y ago
      You're wrong about web components and react. As of 0.12, if you register a web component like you normally would, you can reference it in a react component. React no longer has a white list, and instead assumes all lower case tags are HTML tags (standard or custom). The only drawback is that it doesn't support custom events out of the box. Instead, you have to manually create event listeners on elements on mount. As far as I can tell, there's no reason why it couldn't in the future though; Web component adoption is so low right now that it just hasn't been something people have complained about.
      - 11y ago
- pcr0 11y ago
  AngularJS already has third-party libraries for polymer/webcomponents, and from what I've heard, they're integrating it more solidly in Angular 2.0 React is pretty new, once it gets bigger it'll also follow along too.
wslh 11y ago
> Can React also connect with backend APIs to fetch JSON and present them on the frontend? Yes, obviously. My company uses it for this. Personally, I don't know if AngularJS is a better alternative moving forward because it has a bigger community and companies such as Microsoft are integrating it on Visual Studio. (Sadly being downvoted for saying this)
- pcr0 11y ago
  I've read through the docs and they basically use JQuery for AJAX calls. Is that what you were referring to? React will keep getting bigger, and AngularJS has no answer to React Native which I find pretty revolutionary.
  - emodendroket 11y ago
    How revolutionary does it end up being if you have to farm out a lot of hte stuff you'll do to other JavaScript libraries which presumably do not have a native component?
    - pcr0 11y ago
      You've misunderstood. I said React Native is revolutionary. It's the first JS framework that lets you build native iOS and Android apps. Key word here being "native". React itself was designed as a UI library, purely to be used as the "V" in an MVC app. It's like expecting D3.js to do your AJAX calls. Unless it's a full front-end framework, there's no point trying to do everything.
      - emodendroket 11y ago
        Perhaps that's natural, but I mean, if you had, say, "Angular Native" you'd have a whole application which would be wild.
        woah 11y ago
        What do you mean?
applecore 11y ago
Yes, it's pretty much unnecessary to include React and a framework like Angular, Ember, or Knockout in the same project. And of course React works well with REST and GraphQL APIs for communicating with a backend. React is definitely a better alternative to a heavyweight framework like Angular for new projects.
- tptacek 11y ago
  I can't imagine using React and Knockout in the same project.
- scoot 11y ago
  As a relative newcomer jo JS frontend development, is there a canonical JS REST client library that works well with React / Flux, or do I have to write that myself?
  - woah 11y ago
    Fetch is really easy to use, and is native in modern browsers. There are several polyfills as well. It eliminates the need for any libraries.
    - pvg 11y ago
      Fetch looks interesting but as far as I can tell, it's an in-progress standard with no support on any version of Safari or IE or any mobile browser whatsoever. Seems like it has a bit to go before it being 'native in modern browsers'
      - callum85 11y ago
        You can polyfill it in those browsers. Just use polyfill.io, or if you prefer, manually feature-detect it and if necessary load Github's fetch polyfill, which is good: https://github.com/github/fetch https://github.com/github/fetch
    - scoot 11y ago
      Thanks, appreciate the pointer - the idea of adopting something potentially a future standard through a polyfill is appealing. @pvg I take your point about lack of browser support, but that's what polyfills are for after all! :) In the meantime since asking I also came across restful.js (github [1], blog [2]) - it's new, but looks like a good framework-neutral alternative, if a little heavy at 27K minimised/uncompressed. Edit: Actually, fetch.js + es6-promise-min.js = 26K, so not much in it. [1] https://github.com/marmelab/restful.js https://github.com/marmelab/restful.js [2] http://marmelab.com/blog/2015/03/10/deal-easily-with-your-rest-api-using-restful-js.html http://marmelab.com/blog/2015/03/10/deal-easily-with-your-re...
madeofpalk 11y ago
> ? Can React also connect with backend APIs to fetch JSON and present them on the front-end? Technically? No. React doesn't include the direct code to main API calls. You're still going to need to make the 'API calls' 'yourself', whether with jQuery or raw XMLHttpRequest or whatever. React comes into play when you have the data and you're ready do actually do something with it.
amk_ 11y ago
I found this tutorial series to be pretty good, demoing React with Ampersand as the model/controller: http://learn.humanjavascript.com/react-ampersand/introduction http://learn.humanjavascript.com/react-ampersand/introductio... There's also a library to hook up React views directly to a Firebase (real-time JSON streaming) backend: https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html https://www.firebase.com/blog/2014-05-01-using-firebase-with...

liamzebedee 11y ago

React certainly replaces Angular as a View+Controller framework (idk about Ember, although I know there's been work on integrating the performance benefits of Virtual DOM). In scenarios with complex interactions, something like Flux is desirable, however small web apps work fine with simple JSON REST APIs.

ergo14 11y ago

I'm more interested to see if polymer/x-tag/webcomponents will replace react/angular/other stuff.

vcarl 11y ago
React will probably just integrate those as they become usable, since React acts as a layer of abstraction between the DOM and your presentation logic.
- k__ 11y ago
  People are already trying it. https://github.com/Wildhoney/ReactShadow https://github.com/Wildhoney/ReactShadow
- marknutter 11y ago
  Not so. React does not really play well with web components. Currently React has to internally define JSX elements for every known HTML element that's out there, namely to track internal state and respond to events (i.e. input fields). Because they won't be able to do the same for the vast ocean of web components that will be authored in the coming years, it will be difficult to provide clean interop with new custom elements. The React maintainers have even stated that they don't believe web components are the right way forward for web application development. React was never designed to work well with web components in the first place. On the other hand, the main reason why Angular 2.0 is such a drastic rewrite is because they needed to do it in order for Angular to work seamlessly with Web Components. It's no coincidence that both Angular and web components are Google initiatives.
  - vcarl 11y ago
    But Angular is a glorified templating engine, where react is really about FRP and rendering from data. The React components you write are essentially web components that use DOM; as long as there are standard building blocks for web components in the future, you could easily port it to React.
    - marknutter 11y ago
      Yes, but now you're requiring that developers go through the work of porting every single third party web component they might want to use in their project. That's the current pain we're all going through today with Angular, React, Ember, etc, which are basically glorified web component polyfills when it comes down to it. The whole point of Web Components is portability.
  - peterhunt 11y ago
    While this was true a few releases ago, with React.createElement() things have changed.
    - marknutter 11y ago
      How exactly does that solve the problem of consuming custom web components with their own internal state and events?
  - aggronn 11y ago
    You're wrong about web components and react. As of 0.12, if you register a web component like you normally would, you can reference it in a react component. React no longer has a white list, and instead assumes all lower case tags are HTML tags (standard or custom). The only drawback is that it doesn't support custom events out of the box. Instead, you have to manually create event listeners on elements on mount. As far as I can tell, there's no reason why it couldn't in the future though; Web component adoption is so low right now that it just hasn't been something people have complained about.
    - 11y ago
pcr0 11y ago
AngularJS already has third-party libraries for polymer/webcomponents, and from what I've heard, they're integrating it more solidly in Angular 2.0 React is pretty new, once it gets bigger it'll also follow along too.

wslh 11y ago

> Can React also connect with backend APIs to fetch JSON and present them on the frontend? Yes, obviously. My company uses it for this. Personally, I don't know if AngularJS is a better alternative moving forward because it has a bigger community and companies such as Microsoft are integrating it on Visual Studio. (Sadly being downvoted for saying this)

pcr0 11y ago
I've read through the docs and they basically use JQuery for AJAX calls. Is that what you were referring to? React will keep getting bigger, and AngularJS has no answer to React Native which I find pretty revolutionary.
- emodendroket 11y ago
  How revolutionary does it end up being if you have to farm out a lot of hte stuff you'll do to other JavaScript libraries which presumably do not have a native component?
  - pcr0 11y ago
    You've misunderstood. I said React Native is revolutionary. It's the first JS framework that lets you build native iOS and Android apps. Key word here being "native". React itself was designed as a UI library, purely to be used as the "V" in an MVC app. It's like expecting D3.js to do your AJAX calls. Unless it's a full front-end framework, there's no point trying to do everything.
    - emodendroket 11y ago
      Perhaps that's natural, but I mean, if you had, say, "Angular Native" you'd have a whole application which would be wild.
      - woah 11y ago
        What do you mean?

applecore 11y ago

Yes, it's pretty much unnecessary to include React and a framework like Angular, Ember, or Knockout in the same project. And of course React works well with REST and GraphQL APIs for communicating with a backend. React is definitely a better alternative to a heavyweight framework like Angular for new projects.

tptacek 11y ago
I can't imagine using React and Knockout in the same project.
scoot 11y ago
As a relative newcomer jo JS frontend development, is there a canonical JS REST client library that works well with React / Flux, or do I have to write that myself?
- woah 11y ago
  Fetch is really easy to use, and is native in modern browsers. There are several polyfills as well. It eliminates the need for any libraries.
  - pvg 11y ago
    Fetch looks interesting but as far as I can tell, it's an in-progress standard with no support on any version of Safari or IE or any mobile browser whatsoever. Seems like it has a bit to go before it being 'native in modern browsers'
    - callum85 11y ago
      You can polyfill it in those browsers. Just use polyfill.io, or if you prefer, manually feature-detect it and if necessary load Github's fetch polyfill, which is good: https://github.com/github/fetch https://github.com/github/fetch
  - scoot 11y ago
    Thanks, appreciate the pointer - the idea of adopting something potentially a future standard through a polyfill is appealing. @pvg I take your point about lack of browser support, but that's what polyfills are for after all! :) In the meantime since asking I also came across restful.js (github [1], blog [2]) - it's new, but looks like a good framework-neutral alternative, if a little heavy at 27K minimised/uncompressed. Edit: Actually, fetch.js + es6-promise-min.js = 26K, so not much in it. [1] https://github.com/marmelab/restful.js https://github.com/marmelab/restful.js [2] http://marmelab.com/blog/2015/03/10/deal-easily-with-your-rest-api-using-restful-js.html http://marmelab.com/blog/2015/03/10/deal-easily-with-your-re...

madeofpalk 11y ago

> ? Can React also connect with backend APIs to fetch JSON and present them on the front-end? Technically? No. React doesn't include the direct code to main API calls. You're still going to need to make the 'API calls' 'yourself', whether with jQuery or raw XMLHttpRequest or whatever. React comes into play when you have the data and you're ready do actually do something with it.

amk_ 11y ago

I found this tutorial series to be pretty good, demoing React with Ampersand as the model/controller: http://learn.humanjavascript.com/react-ampersand/introduction http://learn.humanjavascript.com/react-ampersand/introductio... There's also a library to hook up React views directly to a Firebase (real-time JSON streaming) backend: https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html https://www.firebase.com/blog/2014-05-01-using-firebase-with...