6 ms·

Really can't decide to go ahead with an Angular approach (2.0) or use React. I know React is only for the view layer so what are people using with React to do s

by eecks 11y ago

Really can't decide to go ahead with an Angular approach (2.0) or use React. I know React is only for the view layer so what are people using with React to do stuff like api calls?

alexyaseen 11y ago
React seems to emphasize using regular javascript and existing NPM modules where possible. Superagent [1] seems to be a popular one, but you can find more on React's wiki [2]. If you start using a flux implementation like Redux, there are other interesting things you can do to handle api requests [3]. [1] https://github.com/visionmedia/superagent https://github.com/visionmedia/superagent [2] https://github.com/facebook/react/wiki/Complementary-Tools#data-fetching https://github.com/facebook/react/wiki/Complementary-Tools#d... [3] http://redux.js.org/docs/advanced/index.html http://redux.js.org/docs/advanced/index.html
doughj3 11y ago
I've only just started using React but I've been a Django developer for a few years. As I'm starting to use React, I'm still working with Django and Django-Rest-Framework for my backend. It's probably a little heavy weight but you could use something like Flask or whatever equivalent light weight Web framework is in your language of choice.
- wallawe 11y ago
  I think he's asking what to use on the front-end. The author of these tutorials (at least from what I've watched so far) uses axios: https://github.com/mzabriskie/axios https://github.com/mzabriskie/axios
  - eecks 11y ago
    Yeah I am. I have an RESTful API in js/express
mikewhy 11y ago
For API calls I use isomorphic-fetch[1]. To use it in redux I use redux-promise-middleware[2] [1]: https://github.com/matthew-andrews/isomorphic-fetch https://github.com/matthew-andrews/isomorphic-fetch [2]: https://github.com/pburtchaell/redux-promise-middleware/blob/master/README.md https://github.com/pburtchaell/redux-promise-middleware/blob...
officialchicken 11y ago
There's a touch more than views to consider, e.g. do you have to build or want a native mobile app? Angular 2.0 will be under heavy development whereas I think React has matured to the point where a lot of effort is going into ease of use and performance [1]. I also found the React tool chain (using webpack/babel5) very slightly more sane than grunt/gulp once my project grew beyond "Hello TODO". But the JS tooling is absolutely crazy no matter what platform is decided. I'm using redux for API calls - I like the "single store" approach despite drawbacks vs. flux (or multiple stores). [1] https://www.youtube.com/watch?v=-RJf2jYzs8A https://www.youtube.com/watch?v=-RJf2jYzs8A
iLoch 11y ago
Here's a look at the folder structure we're using for our app: https://i.imgur.com/wc7DyOA.png https://i.imgur.com/wc7DyOA.png /actions: Flux action creators /components: These are all the JSX React components (the presentation layer) - so there are subfolders like "pages", "controls", etc. /reducers: These are Redux reducers - they're the logic that handles all of the application state /services: This is what your question was really about. We use basic ES6 modules for services, with methods like "fetchUser(id)" which use the new JS Fetch API behind the scenes. We then have redux-thunk and redux-promise middleware so we can easily offload state manipulation to these services without actually putting state logic in them. I've set up a few React projects at this point and this always seems to keep a nice separation of logic. I'm never asking where data is coming from or where it's going. I think Redux has been the biggest difference maker when dealing with all of these parts. It's no framework, but it's composed of well understood libraries, each with their own important function. You build the structure out yourself so you know exactly how it works, and the pattern will be very familiar to anyone who has used React before.
- eecks 11y ago
  Really, really helpful - thanks!
- lexhaynes 11y ago
  For a beginner to react like me, this is INVALUABLE. Thanks :)
- MatthewPhillips 11y ago
  How does one create a reusable component (something I could publish on npm for example) for React + Redux? The component would have to define its own data expectations, so the actions and reducers would have to be defined by the component. How would you do this, given your folder structure (which I think is very common in Redux/React apps)?
  - iLoch 11y ago
    Generally you don't actually use Redux in your component. Instead, you'd expose the action creators required by your component. Then the user has to make sure that the new state created from your actions gets back to your component via props. This is a common behaviour I've observed, anyway.
merpnderp 11y ago
We're moving all our Angular code to React/Redux. Angular 2.0 seemed quite a bit more convoluted than React, even if it is saner than Angular 1.x. Having simple and easy to create components is a major win. No one on my team ever liked or used directives much, as they were overly complicated. Redux has been a huge win. In dev builds, every state change is output via a redux middleware, so it is easy to watch how state updates and transitions. In prod we plan on storing state updates and allowing them to be sent to support for trouble shooting. Even have plans for an overlay to allow support to step through those changes with a simple interface.
scwoodal 11y ago
I spent a month playing with the different libraries and settled on the following core modules for my frontend: * redux: Keeps track of all the state (UI and domain) in a single object. * immutable.js: Obviously for the immutable data structures which plays nicely within the React ecosystem. It also has a rich set of data structures that aren't found natively within JavaScript. For example I make heavy use of Records to simulate domain models. * react-router: For routing within the application. * superagent: For ajax calls. * reselect: If using redux you'll cherry pick various parts of the state tree for your components. If any of the data used within components can be derived then reselect comes into play nicely. It took longer than I had hoped but I finally have a strong set of libraries and project layout I'm happy and productive with.
- EC1 11y ago
  Why not socket.io for ajax calls?
  - scwoodal 11y ago
    I primarily use Django/Django Rest Framework as the back end so web-sockets are a pain right now. I'm looking forward to when Andrew Godwin's channel work gets into Django proper where socket.io would make a lot of sense. Unless I'm missing something and socket.io does ajax requests these days? I haven't used it in quite some time.
    - avtar 11y ago
      Have you looked into using something like Pushpin with Django? http://pushpin.org/about/ http://pushpin.org/about/
- Geee 11y ago
  Native fetch() and polyfills are also an excellent choice for ajax. There's a comparison of those: http://andrewhfarmer.com/ajax-libraries/ http://andrewhfarmer.com/ajax-libraries/
- silviogutierrez 11y ago
moonchrome 11y ago
For me it comes down to what language are you more comfortable using. Plain old JavaScript with Babel ? React TypeScript ? Angular 2 Angular 2 is much more OO style GUI lib - if you've ever worked with stuff with WPF you'll recognize the patterns immediately - focus on DI, property bindings and attributes, class based design, etc. It really works well with TS and IDEs React + TS is quirky to say the least - not just the base lib but the ecosystem - for example immutable.js is annoying to use with TS (creating typed records). It can be done but I'm not sure it's worth the effort. But one huge consideration is that React has been "out there" for a while now - there's a ton of quality work available on top of it. In Angular 2 even the basics are in flux like animations and stuff like material design components are nowhere near in sight.
kevinob11 11y ago
I really like axios for the api calls, super simple and uses the promises syntax that we use throughout our app.
idibidiart 11y ago
I recommend going with a deep architecture like React with GraphQL/Relay. Nothing like the React/Relay combo in the Angular word. Here is why Relay matters: https://gist.github.com/idibidiart/49a095b6bc528638f34f https://gist.github.com/idibidiart/49a095b6bc528638f34f
Kinnard 11y ago
Had the same problem. Now diving into learning react.
yesimahuman 11y ago
I'm a big Angular fan though I've done some React stuff as well. I think a reason to go with Angular 2 is the batteries-included approach (and TypeScript is cool once you get used to it, though certainly not required). With React you do end up having to hunt down libraries for everything beyond the view layer, which can mean a lot of random 3rd party libraries in various states of support. The flipside is the ecosystem is growing so could overcome those challenges and the architecture is simple and elegant. Honestly, I think ng2 is going to be really popular despite the backlash (and lack of HN representation) and so far the response I'm seeing is really positive once people dig in. I don't think you can go wrong with either though.
- laichzeit0 11y ago
  > which can mean a lot of random 3rd party libraries in various states of support I think this aspect makes Angular feel more like the "Java EE" of the web world. You can throw an Angular developer at an existing Angular code base and I'm fairly certain he'll know exactly what goes where and how things are strung together without much digging around or documentation required. For enterprises this is a very good thing.
sandGorgon 11y ago
we are using Bluebird (to handle the Promises) along with Axios to do the api calls.

by eecks 11y ago

Really can't decide to go ahead with an Angular approach (2.0) or use React. I know React is only for the view layer so what are people using with React to do stuff like api calls?

alexyaseen 11y ago

React seems to emphasize using regular javascript and existing NPM modules where possible. Superagent [1] seems to be a popular one, but you can find more on React's wiki [2]. If you start using a flux implementation like Redux, there are other interesting things you can do to handle api requests [3]. [1] https://github.com/visionmedia/superagent https://github.com/visionmedia/superagent [2] https://github.com/facebook/react/wiki/Complementary-Tools#data-fetching https://github.com/facebook/react/wiki/Complementary-Tools#d... [3] http://redux.js.org/docs/advanced/index.html http://redux.js.org/docs/advanced/index.html

doughj3 11y ago

I've only just started using React but I've been a Django developer for a few years. As I'm starting to use React, I'm still working with Django and Django-Rest-Framework for my backend. It's probably a little heavy weight but you could use something like Flask or whatever equivalent light weight Web framework is in your language of choice.

wallawe 11y ago
I think he's asking what to use on the front-end. The author of these tutorials (at least from what I've watched so far) uses axios: https://github.com/mzabriskie/axios https://github.com/mzabriskie/axios
- eecks 11y ago
  Yeah I am. I have an RESTful API in js/express

mikewhy 11y ago

For API calls I use isomorphic-fetch[1]. To use it in redux I use redux-promise-middleware[2] [1]: https://github.com/matthew-andrews/isomorphic-fetch https://github.com/matthew-andrews/isomorphic-fetch [2]: https://github.com/pburtchaell/redux-promise-middleware/blob/master/README.md https://github.com/pburtchaell/redux-promise-middleware/blob...

officialchicken 11y ago

There's a touch more than views to consider, e.g. do you have to build or want a native mobile app? Angular 2.0 will be under heavy development whereas I think React has matured to the point where a lot of effort is going into ease of use and performance [1]. I also found the React tool chain (using webpack/babel5) very slightly more sane than grunt/gulp once my project grew beyond "Hello TODO". But the JS tooling is absolutely crazy no matter what platform is decided. I'm using redux for API calls - I like the "single store" approach despite drawbacks vs. flux (or multiple stores). [1] https://www.youtube.com/watch?v=-RJf2jYzs8A https://www.youtube.com/watch?v=-RJf2jYzs8A

iLoch 11y ago

Here's a look at the folder structure we're using for our app: https://i.imgur.com/wc7DyOA.png https://i.imgur.com/wc7DyOA.png /actions: Flux action creators /components: These are all the JSX React components (the presentation layer) - so there are subfolders like "pages", "controls", etc. /reducers: These are Redux reducers - they're the logic that handles all of the application state /services: This is what your question was really about. We use basic ES6 modules for services, with methods like "fetchUser(id)" which use the new JS Fetch API behind the scenes. We then have redux-thunk and redux-promise middleware so we can easily offload state manipulation to these services without actually putting state logic in them. I've set up a few React projects at this point and this always seems to keep a nice separation of logic. I'm never asking where data is coming from or where it's going. I think Redux has been the biggest difference maker when dealing with all of these parts. It's no framework, but it's composed of well understood libraries, each with their own important function. You build the structure out yourself so you know exactly how it works, and the pattern will be very familiar to anyone who has used React before.

eecks 11y ago
Really, really helpful - thanks!
lexhaynes 11y ago
For a beginner to react like me, this is INVALUABLE. Thanks :)
MatthewPhillips 11y ago
How does one create a reusable component (something I could publish on npm for example) for React + Redux? The component would have to define its own data expectations, so the actions and reducers would have to be defined by the component. How would you do this, given your folder structure (which I think is very common in Redux/React apps)?
- iLoch 11y ago
  Generally you don't actually use Redux in your component. Instead, you'd expose the action creators required by your component. Then the user has to make sure that the new state created from your actions gets back to your component via props. This is a common behaviour I've observed, anyway.

merpnderp 11y ago

We're moving all our Angular code to React/Redux. Angular 2.0 seemed quite a bit more convoluted than React, even if it is saner than Angular 1.x. Having simple and easy to create components is a major win. No one on my team ever liked or used directives much, as they were overly complicated. Redux has been a huge win. In dev builds, every state change is output via a redux middleware, so it is easy to watch how state updates and transitions. In prod we plan on storing state updates and allowing them to be sent to support for trouble shooting. Even have plans for an overlay to allow support to step through those changes with a simple interface.

scwoodal 11y ago

I spent a month playing with the different libraries and settled on the following core modules for my frontend: * redux: Keeps track of all the state (UI and domain) in a single object. * immutable.js: Obviously for the immutable data structures which plays nicely within the React ecosystem. It also has a rich set of data structures that aren't found natively within JavaScript. For example I make heavy use of Records to simulate domain models. * react-router: For routing within the application. * superagent: For ajax calls. * reselect: If using redux you'll cherry pick various parts of the state tree for your components. If any of the data used within components can be derived then reselect comes into play nicely. It took longer than I had hoped but I finally have a strong set of libraries and project layout I'm happy and productive with.

EC1 11y ago
Why not socket.io for ajax calls?
- scwoodal 11y ago
  I primarily use Django/Django Rest Framework as the back end so web-sockets are a pain right now. I'm looking forward to when Andrew Godwin's channel work gets into Django proper where socket.io would make a lot of sense. Unless I'm missing something and socket.io does ajax requests these days? I haven't used it in quite some time.
  - avtar 11y ago
    Have you looked into using something like Pushpin with Django? http://pushpin.org/about/ http://pushpin.org/about/
Geee 11y ago
Native fetch() and polyfills are also an excellent choice for ajax. There's a comparison of those: http://andrewhfarmer.com/ajax-libraries/ http://andrewhfarmer.com/ajax-libraries/
silviogutierrez 11y ago

moonchrome 11y ago

For me it comes down to what language are you more comfortable using. Plain old JavaScript with Babel ? React TypeScript ? Angular 2 Angular 2 is much more OO style GUI lib - if you've ever worked with stuff with WPF you'll recognize the patterns immediately - focus on DI, property bindings and attributes, class based design, etc. It really works well with TS and IDEs React + TS is quirky to say the least - not just the base lib but the ecosystem - for example immutable.js is annoying to use with TS (creating typed records). It can be done but I'm not sure it's worth the effort. But one huge consideration is that React has been "out there" for a while now - there's a ton of quality work available on top of it. In Angular 2 even the basics are in flux like animations and stuff like material design components are nowhere near in sight.

kevinob11 11y ago

I really like axios for the api calls, super simple and uses the promises syntax that we use throughout our app.

idibidiart 11y ago

I recommend going with a deep architecture like React with GraphQL/Relay. Nothing like the React/Relay combo in the Angular word. Here is why Relay matters: https://gist.github.com/idibidiart/49a095b6bc528638f34f https://gist.github.com/idibidiart/49a095b6bc528638f34f

Kinnard 11y ago

Had the same problem. Now diving into learning react.

yesimahuman 11y ago

I'm a big Angular fan though I've done some React stuff as well. I think a reason to go with Angular 2 is the batteries-included approach (and TypeScript is cool once you get used to it, though certainly not required). With React you do end up having to hunt down libraries for everything beyond the view layer, which can mean a lot of random 3rd party libraries in various states of support. The flipside is the ecosystem is growing so could overcome those challenges and the architecture is simple and elegant. Honestly, I think ng2 is going to be really popular despite the backlash (and lack of HN representation) and so far the response I'm seeing is really positive once people dig in. I don't think you can go wrong with either though.

laichzeit0 11y ago
> which can mean a lot of random 3rd party libraries in various states of support I think this aspect makes Angular feel more like the "Java EE" of the web world. You can throw an Angular developer at an existing Angular code base and I'm fairly certain he'll know exactly what goes where and how things are strung together without much digging around or documentation required. For enterprises this is a very good thing.

sandGorgon 11y ago

we are using Bluebird (to handle the Promises) along with Axios to do the api calls.